CODEWITHSUNDEEP
c#javascriptasp.net-mvc
Vyrotek
Vyrotek

Reputation: 5459

How do you reference .js files located within the View folders from a Page using Asp.net MVC

For example, if I have a page located in Views/Home/Index.aspx and a JavaScript file located in Views/Home/Index.js, how do you reference this on the aspx page?

The example below doesn't work even though the compiler says the path is correct

<script src="Index.js" type="text/javascript"></script>

The exact same issue has been posted here in more detail: http://forums.asp.net/p/1319380/2619991.aspx

If this is not currently possible, will it be in the future? If not, how is everyone managing their javascript resources for large Asp.net MVC projects? Do you just create a folder structure in the Content folder that mirrors your View folder structure? YUCK!

Upvotes: 4

Views: 5271

Answers (5)

Pablo Montilla
Pablo Montilla

Reputation: 3050

If you re-route your pages to a custom RouteHandler, you can check for existence of files before handling the RequestContext to the MvcHandler class.

Example (not complete):

public class RouteHandler : IRouteHandler
{
    public IHttpHandler 
    GetHttpHandler(RequestContext requestContext)
    {
        var request = requestContext.HttpContext.Request;

        // Here you should probably make the 'Views' directory appear in the correct place.
        var path = request.MapPath(request.Path); 
        if(File.Exists(path)) {
            // This is internal, you probably should make your own version.
            return new StaticFileHandler(requestContext);
        }
        else {
            return new MvcHandler(requestContext);
        }
    }
}

Upvotes: 0

maartenba
maartenba

Reputation:

Here's a nice extension method for HtmlHelper:

public static class JavaScriptExtensions
{
    public static string JavaScript(this HtmlHelper html, string source)
    {
        TagBuilder tagBuilder = new TagBuilder("script");
        tagBuilder.Attributes.Add("type", "text/javascript");
        tagBuilder.Attributes.Add("src", VirtualPathUtility.ToAbsolute(source));
        return tagBuilder.ToString(TagRenderMode.Normal);
    }
}

Use it like this:

<%=Html.JavaScript("~/Content/MicrosoftAjax.js")%>

Upvotes: 1

Vyrotek
Vyrotek

Reputation: 5459

For shared javascript resources using the Content folder makes sense. The issue was I was specifically trying to solve was aspx page specific javascript that would never be reused.

I think what I will just have to do is put the aspx page specific javascript right onto the page itself and keep the shared js resources in the Content folder.

Upvotes: 1

dimarzionist
dimarzionist

Reputation: 18687

You should have separated folder structure for scripts. For example JavaScript folder under application root. Storing js files with views is not only affects you with path resolving issues but also affects security and permissions thins. Also it's much more easier later to embed JS files as assembly resources if you will decide to deploy some of your application parts separately in future when they are stored in dedicated subfolder.

Upvotes: 1

Chris Pietschmann
Chris Pietschmann

Reputation: 29905

You can use the VirtualPathUtility.ToAbsolute method like below to convert the app relative url of the .js file to an absolute one that can be written to the page:

<script type="text/javascript" src="<%=VirtualPathUtility.ToAbsolute("~/Views/Home/Index.js") %>"></script>

Upvotes: 3

Related Questions