3

I'm trying to implement some static resource improvements into my ASP.net MVC 4 project (VB.net) by changing how static resources such as javascript and css files are retrieved.

I've been following this link (ASP.NET & MVC 4: Cookieless domain for bundling and static resources ) to help accomplish this but I've come across an issue whereby unbundled javascript and css files are not rendered.

Normally when rendering .js or .css bundles you use the following:

@Scripts.Render("~/bundles/jquery")

This will then render each script tag separately in the ~/bundles/jquery bundle when in development mode, and render a single script tag pointing to the minified bundle when in production.

According to the link above, when the scripts are bundled into a single file, you can use the following line:

<script src="@Url.StaticContent("~/bundles/jquery")" type="text/javascript"></script>

This works fine for me for bundled files since the src property is valid and the StaticContent function is able to change the src URL. But when in development mode, the bundled file does not exist as no bundling takes place and all scripts are rendered seperately to the browser by @Scripts.Render and so this method does not work.

Does anyone know if it is possible to create an extension method for the Scripts helper that will accomplish what I need, or am I going to have to do something like this?

@If Misc.IsLocalDev Then
    @Scripts.Render("~/bundles/jquery")
Else
    @<script src="@Url.StaticContent("~/bundles/jquery")" type="text/javascript"></script>
End If
Improve this question
5
  • 1
    Out of interest, why do you want to do this - is it to allow you to add additional attributes to the script calls? Commented Nov 6, 2013 at 12:18
  • 1
    I'm trying to do this so cookie data is not sent with the requests to get static resources since they do not need the cookies. It also means that more concurrent browser connections can be made to speed up page load. Commented Nov 7, 2013 at 15:15
  • The downvote wasn't me so I can't say why it was. Completely missed the static domain references at lunchtime, this is in fact a technique I have used (minus bundling) before. Is it important to you that unminified and separate files are available to you in debug mode? Commented Nov 7, 2013 at 18:20
  • Also, just so I can get any code in the right language, are you using ASP.NET MVC with VisualBasic.NET or C#? The sample above (unusually) suggests the former. Commented Nov 7, 2013 at 18:22
  • Thanks for taking the time on this! I would rather they were as it make debugging any potential JS errors much much easier. And sorry yes, i'm using VB.net. Commented Nov 8, 2013 at 9:03

1 Answer 1

Reset to default
2

I managed to find a solution to this problem, so hopefully by putting it up here for all to see this will help others with a similar problem that I had.

Working off the same idea as the workaround I posted in my original question, I created 2 new helper functions to help generate the necessary Script and Style references in my views...

Scripts

<ExtensionAttribute()> _
Public Function RenderScripts(helper As HtmlHelper, async As Boolean, ParamArray Paths() As String) As IHtmlString

    If Misc.IsLocalDev Then
        Return Optimization.Scripts.Render(Paths)
    Else
        Dim url As UrlHelper = New UrlHelper(HttpContext.Current.Request.RequestContext, RouteTable.Routes)
        Dim html As String = ""
        For Each Path In Paths
            If async = True Then
                html = html & "<script async src=""" & url.StaticContent(Path) & GetAppVersionSuffix() & """ type=""text/javascript""></script>"
            Else
                html = html & "<script src=""" & url.StaticContent(Path) & GetAppVersionSuffix() & """ type=""text/javascript""></script>"
            End If
        Next
        Return New HtmlString(html)
    End If

End Function

So instead of using:

@Scripts.Render("~/bundles/jquery")

I replaced the calls with:

@Html.RenderScripts(False, "~/bundles/jquery")

A few notes on the above method...

  • I added an async parameter to the function call to allow me to utilise modern browser aynsc scripts.
  • The GetAppVersionSuffix() function call returns the assembly version which is appended to the end of the scripts source as ?v=1.2.3.4 for example. This ensures that the browser gets a new copy of the scripts and style-sheets when a new version is released.
  • The Misc.IsLocalDev function is a special function I use to change the way certain parts of the web application behave when I'm developing on my local machine. In this case, it ensures that unbundled scripts and styles are rendered instead of minified/bundled ones to ease debugging.

Styles

<ExtensionAttribute()> _
Public Function RenderStyles(helper As HtmlHelper, ParamArray Paths() As String) As IHtmlString

    If Misc.IsLocalDev Then
        Return Optimization.Styles.Render(Paths)
    Else
        Dim url As UrlHelper = New UrlHelper(HttpContext.Current.Request.RequestContext, RouteTable.Routes)
        Dim html As String = ""
        For Each Path In Paths
            html = html & "<link href=""" & url.StaticContent(Path) & GetAppVersionSuffix() & """ rel=""Stylesheet"" />"
        Next
        Return New HtmlString(html)
    End If

End Function

So again, instead of using:

@Styles.Render("~/Content/Style")

I replaced the calls with:

@Html.RenderStyles("~/Content/Style")

I hope this is useful to someone!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.