Saturday, May 2, 2009 10:03 AM Kazi Manzur Rashid

Script and CSS Management in ASP.NET MVC – Part 2

My last post on Script and CSS Management in ASP.NET MVC has well accepted by the community and I have got few valuable suggestions, specially from Jake Scott. Beside those, there are one more awkward things I found while working with the Fluent html version which makes me to change few public signatures. Lets see the issue that I am talking about, in the initial version when you want to add multiple script lines, you have to do:

Html.jQuery().OnPageLoad("utility.init();\r\ntest.init();")

Did you get the issue, yes for formatting I have to add the \r\n at the end of each statement and enclose the whole thing in a “”, a better version would be:

Html.jQuery().OnPageLoad(
                             () =>
                             {%>
                                 utility.init();
                                 test.init();
                             <%}
                         );

With the above, I do not have to worry about the formatting or enclosing, I can type the same way as I do for regular javascript codes. This is the change in this version with just one exception, you have to explicitly call the Render() method instead of <%= like the previous version. A complete example of the previous version’s master page would be:

<% Html.jQuery().Scripts(
                            script =>
                            {
                                script.Source("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");
                                script.Source("~/Scripts/utility.js");
                            }
                         )
                 .OnPageLoad(
                                () =>
                                {%>
                                    utility.init();
                                    test.init();
                                <%}
                            )
                 .OnPageUnload(
                                () =>
                                {%>
                                    alert('Cleanup for master page.');
                                <%}
                              )
                .Render();%>

Since this version use Lambda syntax for javascript statements and to capture the output, I have to use a fake ASP.NET Response filter to capture and then rewrite it in the original stream, one of the pitfall of using ASP.NET Response filter and using response.Flush() in it is,  it is not possible to modify the ASP.NET Response header later on in that request. But I don’t think modifying the response header is not all required in our regular scenarios. Next, in the previous version I was using an implicit operator to convert the helper to string which no longer works when using the lambda in view, that is why it is required to call the Render() where you want to dump the output.

The next two changes does not have any impact on the public signatures, First the file caching, although the cache duration that is specified in the web.config applies to the http response header nothing to do with the server side caching but in this version, to make the development life easier, the server side caching is also depends upon this value (otherwise we have to compile the project each time we make a change in the script/css file), if you want to disable caching in server side just set this value to 0 (zero).

And the last one is adding an overloaded extension method for UrlHelper, as Jake mentioned he wants to use separate handlers for css and js files, with the overloaded version now you will be able specify the handler when mentioning the asset.

Enjoy!!!

Download: Full Source

Shout it
Filed under: , , , ,

Comments

# re: Script and CSS Management in ASP.NET MVC – Part 2

Saturday, May 2, 2009 9:49 AM by Erik

Works like a charm..

Thanks for the update.

Erik

# re: Script and CSS Management in ASP.NET MVC – Part 2

Sunday, May 3, 2009 6:58 AM by Muhammad Mosa

Rashid, I guess this post should have DotNetShoutout tag.

# re: Script and CSS Management in ASP.NET MVC – Part 2

Sunday, May 3, 2009 8:02 AM by Jake Scott

Haha glad you liked the feedback. The reason for seperate handlers is so that the css handler is in the assets/stylesheets directory which is relative to the assets/images folder. That way our css developer did not have to go and change the paths. It would be cool if you could somehow map the path to the handler in the httpHandlers section to an asset group somehow, so that you didn't have to specify them in your views? Also the OnPageLoad and OnPageUnload I used a format string so that you can just go @"

utility.init()

test.int()

"

Anyways thanks heaps

Jake

# re: Script and CSS Management in ASP.NET MVC – Part 2

Sunday, May 3, 2009 8:22 AM by Kazi Manzur Rashid

Mosa,

No, DotNetShoutout/KiGG has a trim down version of it. It should be part of an another project.

# re: Script and CSS Management in ASP.NET MVC – Part 2

Sunday, May 3, 2009 10:46 PM by HappyCoder

Hi Kazi,

Thanks for the update. Just a quick question, is it possible to add a  script reference in a ViewUserControl? I tried the following in my ViewUserControl:

<% Html.jQuery().Scripts(script => script.Source("~/Content/Scripts/Internal/scrip.js")).OnPageLoad("Script.Init();"); %>

and

<%= Html.jQuery().Scripts(script => script.Source("~/Content/Scripts/Internal/scrip.js")).OnPageLoad("Script.Init();") %>

Thank you