ASP.net MVC static resource bundles and Scripts.Render()

Question

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

Answer 1

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!