Could anyone explain me the difference between:
<script src="/Scripts/custom.js"></script>
and (added tilde symbol)
<script src="~/Scripts/custom.js"></script>
and
#Scripts.Render("~/Scripts/custom.js")
within an ASP.NET MVC application (mainly in Razor View code)?
I am aware that usually #Scripts.Render is used for bundling and minifying scripts. As you can see in my third example, I am not using #Scripts.Render("~/bundles/*") on purpose because I am not making this question look like question that is about bundling. I would like to know what the best way would be for rendering (page specific) scripts. Is there any other significant reason to use one before another?
<script src="/Scripts/custom.js"></script>
This is relative to the root of your site. It's expecting a custom.js file to be in a Scripts directory in the root of your site, ex: example.com/Scripts/custom.js
<script src="~/Scripts/custom.js"></script>
This is virtual root relative. If your site is hosted as a virtual application in IIS (a sub application), then it will ensure that it looks for a custom.js file in the root of your virtual application, rather than the root of the parent site. So even if your site is hosted at example.com/yoursite, ~/Scripts/custom.js will look for example.com/yoursite/Scripts/custom.js instead of example.com/Scripts/custom.js.
#Scripts.Render("~/Scripts/custom.js")
This looks for the file at the same location as <script src="~/Scripts/custom.js"></script>, but is just using a Razor HTML Helper as a shorthand to generate the HTML markup.
Related
I have 2 scripts. One is in a Folder called ItemMenu in the root and the other is in the Scripts folder that is also in the root.
The script in the Scripts folder is never loaded, but the ItemMenu one it. They are both included in a script tag the same way on the client.
Here is the HTML render of the scripts.
<script src="/Scripts/article_layout1.js"></script>
<script src="/ItemMenu/itemMenu.js"></script>
If, I use the full URL it will work - but this won't work long term.
It's not making any sense to me.
I have confirmed the locations of these and "/Scripts/article_layout1.js" can be accessed by navigating directly to the URL. I have confirmed the spelling and folder names.
Does anyone have any idea here? This is going to make me crazy maybe.
I have a MVC 4 application in .NET 4.0. My web hosting provider (network solutions) has virtual directories setup so I can't use the default bundling behavior (I think).
In my _Layout view I have this line:
#Scripts.Render("~/bundles/dd-d2")
In BundleConfig.cs I have
bundles.Add(new ScriptBundle("~/bundles/dd-d2").Include(
"~/Scripts/dd-d2.js"));
And everything works fine when I run in visual studio. But when i upload to my web hosting, The file is not found because it appends the virtual folder in front of the bundle path.
instead of /bundles/dd-d2?v=BlahBlah, I get /ROOT_FOLDER/bundles/dd-d2?v=BlahBlah
I fixed this issue by adding this to my line in the _Layout file
#Scripts.Render(Url.Content("~/bundles/dd-d2"))
The Url.Content helper converts the virtual path into an app absolute path and it finds my bundled script files.
Now, the problem I am having with that approach is, if I make a change to the javascript file, it is NOT reflected in the outputted bundled script file. It always has the old information in it even when I upload it to my web hosting. Is this file cached somewhere? Is there a better way of doing this? I would like to take advantage of the minification of my script files by using bundling.
if I do it this way, it does work
<script src="#Url.Content("~/Scripts/dd-d2.js")" type="text/javascript"></script>
But then my script is not minified.
For each of my views I have page specific javascript stored in a separate file, my naming convention results in that each js file always lives in the same place scripts/pagejs/controllername/viewname.js Can I automatically include and minify these javascript files for each view?
I've already got so far in thinking and I can do it this way without bundling, I have a render tag in my cshtml page that looks in the scripts directory, I could replace this with one that looks in the bundles directory
<script src="/Bundles/pagejs/Account/Home.js"></script>
The bundling process should result in one bundle containing one javascript file (the bundling process here is only useful for the minification process)
I have this code in an Index.cshtml file:
#{ViewBag.Title = "Home";}
<link href="Home.css" rel="stylesheet" type="text/css"/>
<img id="logo" src="~/Content/Images/Logo.png" />
This file is a view in my ASP.NET MVC4 application.
When I run the web application, I can see that the source code adds the appropriate HTML around this, and also adds a reference to the 'Content\Site.css' file.
However, neither the Site.css file nor my own Home.css CSS file appear to be used when running the application. First of all, any edits I make to Site.css aren't reflected when I view source when running the application, which is weird. I have saved everything and built the project before running it and checking out the source code through my browser.
Second of all, the CSS link to Home.css (which is in the same folder as my view) does not appear to be used. The HTML editor doesn't have a problem with the file, and so indicates that the path is valid - but when I click on Home.css in my the source code editor on my browser, I get a 404 error, saying that the file doesn't exist.
Any idea on what I am doing wrong here?
The actual image I am using here loads correctly.
the CSS link to Home.css (which is in the same folder
as my view) does not appear to be used.
The Views folder is restricted direct access to from the clients. So you should not be putting any CSS, javascript or images files inside it. They should reside in your ~/Content folder (or some other folder which is accessible from the clients). And then reference it like this:
<link href="~/Content/Home.css" rel="stylesheet" type="text/css"/>
As far as your first problem about ~/Content/Site.css is concerned, the stylesheet might be cached by the browser. Try clearing the cache. If you are running your application in Release mode and enabled Bundles, ASP.NET MVC 4 will automatically emit a cache response header so that the static resources included in the bundle get cached in the browser.
you also could use #url.content() helper method to convert your relative path to absolute. It's extremely useful when you will implementing website with multiple areas and also it's the common style to set path to the content in MVC so it's better does it this way
css belongs in the head - i can't stand .net
It also needs to NOT have the closing /> at the end of the tag - it messes things up. XHTML proper, but not everyone understands it. Unclose the link tag and try...
Use ~/ before your file statement for example:
<img src="~/images/team-image3.jpg" class="img-responsive" alt="">
instead of
<img src="images/team-image3.jpg" class="img-responsive" alt=""> etc...
I have some javascript files that are named starting with an underscore. When I publish these it seems they can't be found. Is there some rule that stops these being viewed by the browser when running on IIS? I think I remember something like that for the cshtml files but didn't know that applies to js files.
I found the following post, which talks about files with "_" prefix: Why does Razor _layout.cshtml have a leading underscore in file name?.
By convention, the Razor pages that cannot be shown by the browser via direct request are prefixed with "_". Following is one of the comments from the post:
Razor was developed for ASP.NET Web Pages (WebMatrix), which doesn't
have the same sort of protection built in regarding Views folders and
Routing that you get within MVC. Since layout pages in Web Pages are
not intended to be served directly, they are prefixed with the
underscore. And the Web Pages framework has been configured not to
allow files with leading underscores in their names from being
requested directly.
In your View is the reference to them pointed to the correct path?
<script src="#Url.Content("~/Scripts/jquery-custom.js")" type="text/javascript"></script>
I would also hit Control + F5 several times after the page loads to make sure it is not cached and that is the reason it is not pulling down.