Add a .cshtml file to a Script Bundle in MVC - asp.net-mvc

I have a cshtml file that has the following lines on top:
#{
Layout = null;
Response.ContentType = "text/javascript";
}
When referenced directly from _Layout.cshtml in a script tag, it works fine. But I am trying to add it to a bundle, I understand that Optimization recently made it possible, if that is true, can someone show me how?
So this works fine
#Html.JsInclude(jslocation + "ui.data.cshtml?"); // normal script tag
While these give an error: Illegal character when they encounter the #, apparently the file never gets executed.
bundles.Add(new ScriptBundle("~/scripts/uidata").Include(JsFolder + "ui.data.cshtml"));
#Scripts.Render("~/scripts/uidata");

i dont know what #Html.JsInclude is doing but normally asp.net MVC engine will not render views directly. instead it demands that you call an ActionMethod which then returns a view.
so even if you try loading a view using script tag with url of the view it typically shouldnt work or if you have allowed direct access to the views folder and added .cshtml mime type to files that are sent upon a request. all the contents of the file will be send which will include all the content even if it is inside #{}
also with all this there is no use of making a bundle consisting contents of your view as a bundle is a minified copy and is cached so if you want it to be cached why just not send a script file across.
you probably are trying to inject a script dynamically. in which case send across the script directly by the controller with the appropriate content-type header

Related

Structure in a Blazor App and why can't I have one?

So, I've created a bog-standard Blazor Server App using dotnet new blazorserver. Opened the solution in VS and run it.
Fine.
If I add a new folder, say Components and add a new Razor Component in that folder - Component1.razor - then in my index.razor page I add a using statement to point at my Components folder and the mark up to include the component itself and run the app, the index page shows, but there is no sign of my component. Further looking at the source of the rendered HTML, I see an empty element <component1></component1>
If I move my new component to the Pages folder and rerun the app, the component renders properly.
If I create a sub-folder under Pages and move my component to there and rerun the app, the component fails to render.
Am I doing something wrong? Am I expecting too much? Should I be able to have a structure that means I don't have to have every single component in a single folder?
I think you missing the point of _Imports.razor. You can put your pages anywhere they will be found by the #page "" attribute. If you want your components to be available either put a reference to their folder via the _Imports.razor or use the #namespace attribute/directive to override the namespace from folder its is in to another that is being imported. There is nothing special happening here. The template puts a using statement in for the "Shared" folder. This is why App.razor in the root folder has access to them.
Example _Imports.razor (From a project with name/default namespace of PolymorphicApi)
...
#using PolymorphicApi
#using PolymorphicApi.Shared
If you do not want to use _Imports.razor, you may not want to make all your components available. You can use #namespace in the component. This is the same as overriding the default namespace in a .cs file.
Example :
#namespace PolymorphicApi
A component using this statement could be in any subfolder and will be available as the root namespace is already imported.
As a side note: _Imports.razor can be thought of as a chunk of razor statements that will be imported into all razor components in that folder down. You do not have to use it just for namespaces. For example you can use an #inject statement. I do this to have Localization in every component by default.

Relative URLs within sub application on IIS site

I have "test" website on IIS and "sub1" sub-application within it.
When I request domain.com/sub1, IIS processes sub-application sucessfully.
Some of URLs in code are relative, and when I have something like this in code /component/test, application requests following url domain.com/component/test instead of domain.com/sub1/component/test.
What do I need to change in order to make relative URLs to be valid.
in your code, use #Url.Content("~/") or <% =Url.Content("~/") %> to get to the relative root of the application.
Or, sometimes, you can get away with prefixing with ~/, but generally only with js and css files in your layout
note: the # is for razor view engine, and the <% %> is for aspx view engine, you didn't specify which you were using
EDIT: (based on comment from OP)
CSS should be relative from the directory your CSS is hosted, you can use ../ to traverse directories. For your JS, can you edit those files? I would define a SITE_ROOT variable (above all js files) in your layout and then reference that variable from within your JS files
example: var SITE_ROOT = '#Url.Content("~/")';
then prefix your calls in the JS file with SITE_ROOT + '/relative_url'

CKEditor - move skins folder somewhere else

I'm using CKEditor for the first time and trying to do something that I thought would be very simple to do but so far I've had no success.
Essentially I want to place the editor.js, config.js and styles.js in a scripts folder but want the "Skins" folder that contains the css and images to appear within a separate "Styles" folder.
The application consists of a simple view that displays the editor on load.
The code to display the editor is a follows:
angular.element(document).ready(function () {
CKEDITOR.config.contentsCss = '/Styles/CKEditor/';
CKEDITOR.replace('editor');
});
The HTML within my view is as follows:
#section scripts
{
<script src="~/Scripts/ckeditor.js" type="text/javascript"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Main.js" type="text/javascript"></script>
}
<h2>Index</h2>
<textarea id="editor" name="editor"></textarea>
This is an MVC application and the scripts are rendered at the end of the body within the layout view.
The editor will not display in any browser. As I understand it setting the contentsCss property should do the trick.
If I place the skins beneath my script folder it works fine. I can see in the generated source that it is adding a link to the header pointing to /Scripts/Skins/moono..., but I want it to add a reference to /Styles/Skins/moono...
Is what I am trying to do feasable and if so what am I missing here? I was expecting this to be simple.
As a work around I could just add some routing rules that redirects the relevant request to a different location, but I'd rather get to the bottom of the issue before I do this.
Further information:
My application is an ASP.net 4.5/MVC 4 app.
I'm referencing angular because I'll be using that once I've sorted this issue. I have tried removing all references to angular but the problem still persists.
I've tried setting the contentsCss property in the following ways:
Directly using CKEDITOR.config.contentsCss
Within the config.js file. The sample assigns an anonymous function to CKEDITOR.editorConfig and in there you can manipulate congif entries.
Passing a config parameter when calling the "replace" method on the CKEditor object.
I've tried manipulating the contentsCss property both before and after the call to replace.
I'm using the latest version of CKEditor (4.2)
Thanks to #Richard Deeming, I've found the answer.
I'm using the default moono style, so I needed to set the CKEDITOR.config.skin property as follows:
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/'
My final code now looks like this:
angular.element(document).ready(function () {
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/';
CKEDITOR.replace('editor');
});
You have to set the url to the actual folder containing the skin itself (I thought CKEditor might append skins/mooono itself but it doesn't).
I also found that you must include the final '/' from the URL.
Looking at the documentation, you need to specify the path as part of the skin name:
CKEDITOR.skinName = 'CKeditor,/Styles/CKeditor/';

Asp MVC 3: Dynamically resolve relative resources in views

I have a javascript application that runs in a view (index.cshtml).
Problem:
The problem is all relative paths are relative to the current url, which would be ok in a simple html webapp but not in asp mvc. The js-app shouldn't have to bother whether it's served in a normal html file or via a asp mvc page.
I.e. http://www.domain.com/<controller>/<action>/ contains a script test.js. This script loads an external xml file searching relative to it ie. "data/data.xml". The resulting url reads http://www.domain.com/<controller>/<action>/data/data.xml. This isn't found.
Question:
Is there a way to route static files (images,..., maybe even js files) to the content folder like "~/Content/controller/action/<pathToFile>/"?
Any help appreciated!
Lg
warappa
PS: I know about Url.Content() but that doesn't fit here.
The solution doesn't require mapping - just a simple html tag in the header:
<base href="#(Request.Url.GetComponents(UriComponents.SchemeAndServer, UriFormat.Unescaped) +
Url.Content("~/content/controller/action/"))" />
Lg
warappa
EDIT
Some browsers need an absolute url - sample updated.
In you can use absolute URL addresses to access you static resources:
$('img').attr('src', '/Content/Pictures/picture1.png');
or
<script src="/Scripts/script.js"></script>
This way you will allways get the same resources relative to the page base address, no matter if you load the script in a /{Controller}/{Action}/{View}, {Area}/{Controller}/{Action}/{View}, a custom route or even in a static script html page.
Or perhaps what you're looking for is the use of css files, since CSS's url('<path>') resolves the addresses relative to the CSS file's location. You would just need to import the one CSS file that had all the resource (image?) file paths. Then the scripts could reference the distinct class names, thus not being location aware at all. This is what libraries like jQuery UI do. But again this would require a fixed folder structure relative to the CSS document.

Display html file inside iframe

How to display a HTML file from my system in iframe using rails?
I will explain my issue...
I have a view file that has an iframe which calls an action through <iframe src="controller/action?param=somevalue"></iframe> and the action renders a HTML file based on the params.
The HTML file called has reference to stylesheets and javascripts in the format <script type="text/javascript" src="../common/About.js"></script>
When viewed in browser the HTML file displays correctly with the styles and javascript but when viewed in the application the styling and scripts are not working from the external file. On viewing the source code for the external files i get "Unknown action" error.
What is that i am doing wrong in this?
(reacting to yr last comment): you need to specify css and js files in the iframed html page separately. html in an iframe is rendered completely independent from the surrounding page.
This is not a rails-related question imho.
I found the mistake I made. Its because of routes being not defined properly. When I give relative urls in the html file, the rails views assumes the full path to be some thing like src="controller/common/About.js". As there is no action defined by the name common I was getting the Unknown action error. I have redefined my routes and its working fine now.

Resources