Thursday, October 08, 2009

Using MvcContrib ScriptInclude, Stylesheet, And T4MVC

I am always looking for more ways I can integrate features of MVC Contrib into my ASP.NET MVC projects. I also have started using David Ebbo’s T4MVC Template that generates strongly typed helpers for ASP.NET MVC (download).

Before I integrated these tools my script and style includes looked like…

<script src="../../Content/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../Content/Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

<link href="../../Content/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Styles/start/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />

I remembered hearing about ScriptInclude and StyleInclude Html Helpers in the MVC Contrib so I updated the above references to the following…

<%= Html.ScriptInclude("~/Content/Scripts/jquery-1.3.2.min.js")%>
<%= Html.ScriptInclude("~/Content/Scripts/jquery-ui-1.7.2.custom.min.js")%>
    
<%= Html.Stylesheet("~/Content/Styles/Site.css")%>
<%= Html.Stylesheet("~/Content/Styles/start/jquery-ui-1.7.2.custom.css")%>

I was please about using the MVC Contrib Helpers, but I wasn’t thrilled with having hard-coded strings laying around which is where the T4MVC Template comes into play.

There are many features of the T4MVC Template (many more than I planned on covering today), but one of them is interrogating your project structure and generating static classes with read-only references to your Scripts, Styles, and Images.

So, after running the T4MVC Template, I updated my references to the following…

<%= Html.ScriptInclude(Links.Content.Scripts.jquery_1_3_2_min_js)%>
<%= Html.ScriptInclude(Links.Content.Scripts.jquery_ui_1_7_2_custom_min_js)%>
    
<%= Html.Stylesheet(Links.Content.Styles.Site_css)%>
<%= Html.Stylesheet(Links.Content.Styles.start.jquery_ui_1_7_2_custom_css)%>

Looks pretty good, doesn't it? Well, there is only one problem… it doesn’t work! Why? Well, the output of the T4MVC Links are relative paths that have been resolved (meaning they no longer have the “~”). The MVC Contrib Helpers assume that if the URL passed it it doesn’t have the “~”, then it will prepend either “~/Scripts/” for scripts or “~/content/css/'” for styles.

Seeing that I have moved my scripts, styles, and images under the “~/Content” folder, there are a couple of changes to the MVC Contrib Html Helpers that could make this work…

    1. Provide some sort of mechanism to define the paths prepended to the Scripts and Styles if there is no “~”
    2. Override the Html Helpers with another option to not prepend any path information
    3. Possibly search for the “/” instead of the “~” when determining if a path should be prepended to the URL
    Can you think of any other solutions to get these to play well together?

No comments:

Post a Comment