MVC View and JavaScript file - asp.net-mvc

When inside a View, within MVC, and you have your JavaScript, I tried to move it to a JavaScript file in the same directory, and it reports it can not file the javascript file
As an example I user NerdDinner and the DinnerForm.aspx, created a JavaScript file in the same directory as the DinnerForm.aspx called DinnerForm.js and referenced it in the aspx file, as below:
Here is the issue, I need to keep my JavaScript file near if not in the same directory in the project as DinnerForm.aspx, how do I go about doing this?
I don't want to place the full path, eg: "~\views\dinners\dinnerform.js" as this is just a work around, and will cause issues later
Any ideas?

You can't have the JavaScript files in the Views folder as it does not actually exist to the browser. If you have a look at the Web.config file in the Views folder, you'll see that it is set to the HttpNotFoundHandler handler. That means it returns 404 for all requests to its folder.
Why not put them in the Scripts folder? You could always have sub folder under it.
E.g. /Scripts/Dinner/dinnerform.js

JavaScript files by convention should be placed in project's Scripts folder and could be linked as
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>"

Related

My js in the Scripts folder are not being loaded in my MVC4 app

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.

Is it possible to automatically bundle, minify and include my page specific Javascript?

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)

CSS not being used by my view model

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...

.NET MVC - accessing .xhtml file

I have created an Area for XForms and when I try to return view("index.xhtml") the framework resolves the view as index.xhtml.aspx or index.xhtml.cshtml.
I tried routes.IgnoreRoute("{resource}.*xhtml/{*pathinfo}"); in global.asax.
Either I am not sure what URL to use (am I still hitting the controller or going straight at the .xhtml file in the views folder?) OR I made a mistake in my ignoreroute.
Any help appreciated.
If you are trying to have the action just write the content of index.xhtml, you'll need to do return File("index.html", "application/xhtml+xml"). View/PartialView assume you want the specified view file parsed and executed using the currently configured view engine.
You can't/shouldn't put static files you want remote users to be able to hit directly in your ~/Views folder. MVC places a web.config file in this folder that prevents files in this location from being served.
So, either have your controller action return the file as I mentioned above, or move the xhtml files into some other folder in your application that is not restricted. Then your route should work and your files should be served statically.

How to access HTML files from ASP.NET MVC VIEWS Folder

I will like add conventional HTML page under VIEWS folder (in ASp.NET MVC) page.
I have added the route exceptions as mentioned below.
routes.IgnoreRoute("{resource}.htm/{*pathInfo}")
routes.IgnoreRoute("{resource}.html/{*pathInfo}")
Although it does work when I put the html files out of VIEWS folder but I get Page not found 404 when I put those in VIEWS folder. I am also unable to browse the VIEWS folder by setting directory browsing option in IIS.
Please help me on HOW to access HTML file from VIEWS folder.
I think that it's a mistake to mix your HTML content with your views. I'd suggest that you create a separate static folder under Content and put your HTML there. You can create an analogous directory structure to your view structure if necessary for management. Then you don't need to do anything special in order to able to reference the files. You can even, then, open them up to editing with Contribute, etc. by people who are allowed to modify static content.
+-Content
+-Images
+-Static
+-Account
+-privacy.html
+-refunds.html
+-Styles
Usage:
<a href='<%= Url.Content( "~/Content/Static/Account/privacy.html" ) %>'>Privacy Policy</a>
The default Views folder has an Web.config file that explicitly gives 404 errors for all requests. You just need to edit and enable for HTML files (or all files, but then people might snoop).

Resources