Reference JavaScript Files that are in the views folder - MVC 5

1
votes

It is a standard in my company to place the JavaScript file that is uniquely associated with one page or view in the same folder where that page or view resides. Now that we are migrating to MVC we want to keep doing that. For example, if there is a file

~/Views/Customer/CustomerMgmt.cshtml

I need to be able to reference the following associated script file:

~/Views/Customer/CustomerMgmt.js

This js file has functionality that ONLY pertains to CustomerMgmt.cshtml the file will not be shared and thus no other consumer will make use of it. If I reference the JavaScript file using the following, it fails with a 404 error:

<script type = "text/JavaScript" src = "@Url.Content( "~/Views/Customer/CustomerMgmt.js" )">< /script>

The solutions I tried after researching include:

  1. Add the JavaScript reference to BundlerConfig.RegisterBundles and use Scripts.Render in the CsHtml: I still get a 404 error.
  2. Remove the filter that comes with ~/views/web.config:

< add name="BlockViewHandler" path="" verb="" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" / >

This option allows me to reference ~/Views/Customer/CustomerMgmt.js but it is unsecure

  1. Use blacklisting instead of whitelisting to only block *.CsHtml files: This would potentially allow other extensions that may be added in the future and not only *.Css and *.Js
  2. Add the following to the handlers section:

< add name="JavaScriptHandler" path=".js" verb="" preCondition="integratedMode" type="System.Web.StaticFileHandler" / >

I still get a 404 error.

  1. Add custom code to be able to reference the files I need (Helpers, jScript controllers, etc.)

I opted to use the following instructions that modify ~/views/web.config:

  1. Add the following inside < system.webServer >< handlers>:

< add name="JavaScript" path="*.js" verb="GET,HEAD" type="System.Web.StaticFileHandler"/ >

< add name="CSS" path="*.css" verb="GET,HEAD" type="System.Web.StaticFileHandler"/ >

  1. Add the following inside < system.web>< httpHandlers>:

< add path="*.js" verb="GET,HEAD" type="System.Web.StaticFileHandler" / >

< add path="*.css" verb="GET,HEAD" type="System.Web.StaticFileHandler" / >

< add path="* " verb="*" type="System.Web.HttpNotFoundHandler" / >

After I make this change I get a 500 error and the following (in brief):

An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode

And I’m presented with the following suggestions:

a. Migrate the configuration to the system.webServer/handlers section

b. Ignore this error by setting < system.webServer >, < validation validateIntegratedModeConfiguration="false" / >

c. Switch the application to a Classic mode application pool

After using the option “b” everything seems to work fine and I’m able to reference ~/Views/Customer/CustomerMgmt.js but I see several posts suggesting that this is not the best approach.

My questions are:

  1. What is the best approach to follow for this case? I’m using MVC 5.2.3

  2. Is the practice of putting a uniquely associated js file in the same folder as the view considered a bad practice? This file will ONLY be used by a particular view and we don’t want to clutter the ~/Scripts folder (or subfolders within).

I know that I can also create a new folder structure like “~/ViewScripts/…” and put the associated js files there. I will do that if necessary but, if possible I would like to keep adhering to the company standards and put the file, that is only being used by a particular view, together with that view.

Thanks to everyone in advance. Some of the items that I researched include:

MVC - Accessing css, image, js files in view folder

Placing js files in the views folder

How to reference javascript file in ASP.NET MVC 2 Views folder?

Where to put view-specific javascript files in an ASP.NET MVC application?

Cannot load resource MVC 4 JavaScript

Can I deploy a javascript file within MVC areas?

Serving static file on ASP.NET MVC (C#)

Serving static file on ASP.NET MVC (C#)

1
javascriptc#asp.net-mvcrazorasp.net-mvc-5
Are you Unit Testing each JavaScript file? Is this SPA? – Win
I haven't created the tests for this case yet. When I create the tests for the associated js, they are separated (I don't know if that is a wrong approach). This application will have multiple pages, all MVC. – JF Will
No Unit Test, and Not SPA. So, there is no point of having separate js file next to cshtml, except that you can navigate easily. Why not just place those scripts directly inside specific cshtml? – Win
Thank you @win.Many of the views have enough associated code that merits keeping that code in a separate file. To have the associated JavaScript code in a separate file is also a standard that we follow. I am currently able to reference that separated file and it resides in the [Views] folder but my doubt is whether I'm following the best approach or not. – JF Will
@JFWill did you get a resolution for this as I am just embarking on a similar quest with a company I have just joined – Simon Price

1 Answers

1
votes

From this forum I managed to get some code that seems to do the job. I'm using it in a ViewComponent. I have a folder for the component and wanted to consolidate all the files in one folder, e.g.

  • \Component\
  • \Component\Component.cshtml
  • \Component\Component.js
  • \Component\ComponentModel.js
  • \Component\ComponentController.js

Assuming a consistent naming convention, I loaded it with this, which doesn't require any changes to web.config nor does it open up the client to loading other .js files.

<script>
    @{ Html.RenderPartial(Regex.Replace(ViewContext.ExecutingFilePath, @"\.[^.]+$", @".js")); }
</script>