ASP.NET MVC HtmlHelper API Reference

Question

I am working on a composite runtime resource library for ASP.NET WebForms / MVC. I support both standard ASP.NET WebForms through WebControls, and recently added support for ASP MVC Html Helpers. One of the features that I currently support with WebForms WebControls is the concept of "partial" resource definitions, where the resource can be combined through the Wizard / View pages, etc.

When implementing the MVC equivalent, I'm not sure what is the best practice? Currently, I'm leaning toward design something like this:

Master page

<% using (Html.CreateCompositeResourcePartContext()) { Html.CompositeCssResourcePart( "ResourceName", new[] { "/Styles/SharedStyle1.css", "/Styles/SharedStyle2.css" } ); %> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <% } %> 

Which will create a “contextual” wrapper around the head of the ContentPlaceholder.

View page

 <asp:Content ID="HeadContentPlaceholder" ContentPlaceHolderID="head" runat="server"> <% Html.CompositeCssResourcePart( "ResourceName", new[] { "/Styles/PageStyle5.css", "/Styles/PageStyle6.css", "/Styles/PageStyle7.css" }) %> </asp:Content> 

In this way, any browsing pages can extend the definition of a partial resource, as shown above.

The questions I have are:

1) Unlike all other HtmlHelpers, these extensions do not immediately write out an HTML fragment, but rather wait until the context is deleted. Should these extensions be disconnected from the ViewContext (or another object)?

2) I personally think that the concept of “use” makes sense to wrap a block of code rather than separate calls to BeginCompositeResourcePartContext / EndCompositeResourcePartContext, do you agree? If not, what is better about individual method calls?

Any feedback on the above issue would be greatly appreciated. If more information is required, please let me know.

Edit

To clarify ... the block inside the chapter of the main page and the subsequent link on the side of the view page will be combined together into one resource. Therefore, when the CompositeResourcePartContext context is placed, all SIX files are combined into only one css file and written out as a single TAG link (or script, css sprite, etc.)

 <link rel="stylesheet" type="text/css" href="/MyMergedStyleSheet.css" /> 

Answer 1

After I thought about it (and consulted with a colleague), I think the best option is to stick to my original plan not to pollute my ASP.NET MVC API with the concept of "partial" resource definitions (works for WebControls, but not so good with MVC, in my opinion). Before examining the explicit HtmlHelper extension for this case in my library, I suggested that the problem could be solved by defining a custom extension method as follows:

 public static class CustomXpediteExtensions { private static readonly IEnumerable<String> SharedCss = new[] { "/Styles/SharedStyle1.css", "/Styles/SharedStyle2.css", "/Styles/SharedStyle3.css" }; public static MvcHtmlString CustomCompositeCssResource(this HtmlHelper htmlHelper, params String[] resources) { return htmlHelper.CompositeCssResource(SharedCss.Concat(resources)); } } 

And then just referring to this user extension (or constant, etc.) on the watch page.

 <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server"> <%= Html.CustomCompositeCssResource( "/Styles/PageStyle5.css", "/Styles/PageStyle6.css", "/Styles/PageStyle7.css" ) %> </asp:Content> 

This will allow you not to repeat yourself when pooling shared resources (i.e. ensuring consistency) and ultimately handle this case.

I will leave it open for a while to find out if there are any reviews about this; but if a good deed is not done, why this is unacceptable, I think this is the answer.

Answer 2

This seems like a great idea, but will best serve as part of the build process. You can easily create combined CSS for individual pages using the T4 template and possibly a naming convention to add CSS links to your page. Something like:

 <%: Html.MergedStyleSheet() %> 

can output:

 <link rel="stylesheet" type="text/css" href="/Content/ControllerName/ActionName.css" />