ASP.NET MVC and the templated partial view (death to ASCX)

Subscribe to my feed here:  http://feeds.jeffreypalermo.com/jeffreypalermo

We are used to master pages and applying them to ASPX pages.  Then we pull small parts of the view into user controls or ASCX.  In ASP.NET MVC, we use ASCX files as partial views because the user control model is so baked into our thinking.

I propose that ASCX does not provide much benefit in ASP.NET MVC.  It’s usefulness may end with using the extension as a naming convention for the easy identification of partial views.  Beyond that, it’s pretty thin.

Consider the following scenario where only the ASPX extension is used for views and partial views.  The partial views, because they are ASPX files, are able to leverage master pages for small-scale templating.  Using master pages for nested templates around partials gives us a whole new dynamic with which to break down web pages in ASP.NET MVC.

image

The above screen shot is the screen we are going for.  We want consistent formatting for two partials that would hold charts.  Here is a code sample based on the basic project template.  I have enhanced the Home Index.aspx view as follows:

/Views/Home/Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<div style="float:left"><%Html.RenderPartial("chart1"); %></div>
<div style="float:left"><%Html.RenderPartial("chart2"); %></div>
<div style="clear:both"></div>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc"
title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
</asp:Content>

You see we are rendering two partials, chart1 and chart2.  Here is the code for the partials:

/Views/Shared/Chart1.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/ChartLayout.Master" 
Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ContentPlaceHolderID="Main" runat="server">
Chart 1 goes here
</asp:Content>

/Views/Shared/Chart2.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/ChartLayout.Master" 
Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ContentPlaceHolderID="Main" runat="server">
Chart 2 goes here
</asp:Content>

Notice that each of these partials declare a master page.  Let’s see what templating the master page gives us:

/Views/Shared/ChartLayout.master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<div style="border:solid 4px green;padding:100px;margin:20px">
<asp:ContentPlaceHolder id="Main" runat="server"></asp:ContentPlaceHolder>
</div>

The css styling is what to look for.  Each partial is surrounded by a green border with padding and margin.  This formatting is consistently applied by the master page declared in both the partials.  The main view doesn’t care about this partial formatting because it belongs to the partial.  Look again to the screenshot above.  Because we used ASPX partial views, we gained the formatting capability of master pages.

Comments

Elijah Manor said on 6.02.2009 at 11:10 PM

Good post... I was wondering if you could do a post or series of posts on sub-controllers. If I remember correctly, you mentioned that you use these a lot in your projects. Just a thought. Thanks for all your work. Great stuff. Keep it coming!

Elijah Manor said on 6.02.2009 at 11:10 PM

FYI I will be tweeting your post tomorrow ;)

Saurabh said on 6.03.2009 at 2:34 AM

Thanx ...... no more .ascx

Bill Lowden said on 6.03.2009 at 8:44 AM

Great post! Your tutorial and code is easy to follow. Thanks for sharing.

Geoffrey Braaf said on 6.03.2009 at 8:55 AM

This is very neat!

Perhaps this is worrying too much, but wont this cause some performance loss? I mean, the framework _knows_ that an .ascx wont have to be templated and can thus render it right away. When rendering a .aspx it might have to do additional checking and possibly some additional work when rendering.

I think in most cases the gained functionality outweighs performance, but I also think it's worth at least some consideration.

PS. I second the request Elijah made regarding sub-controllers. I recall you talking about this in a podcast?

Dave Ward said on 6.03.2009 at 11:18 AM

Maybe I'm missing something. Wouldn't it be a lot cleaner to just define the green border in a .chartContainer (or whatever) class and then apply that to your container divs in /Home/Index?

Jeffrey Palermo said on 6.03.2009 at 11:28 AM

@Dave,

The use of CSS is orthogonal to the example. I could rework the sample to put a body of common mark-up around each chart partial, and it would illustrate just as well.

Using CSS classes is certainly useful. Perhaps the given example would be clearer without the use of CSS.

Dave Ward said on 6.03.2009 at 11:48 AM

Ah, that makes sense. I was too distracted by the inline styling.

Jan Willem B said on 6.04.2009 at 3:40 AM

Not being used to ASP.NET "Classic", I never use ascx files for parts of pages. I was wondering what use ascx could possibly have over the other options (like Html.RenderAction as well). So thanks for the clarifying post.

Will Naylor said on 6.04.2009 at 8:07 PM

great post; easy to follow. i'm definately using this approach to a website i'm working on

blog4j .net said on 6.05.2009 at 3:53 AM

Great! aspx instead of ascx bring real flexibility

Frank Krueger said on 6.14.2009 at 7:51 PM

YES YES YES. This is exactly the kind of information I have been looking for. Thanks for the write-up.

Charles Brewer said on 6.17.2009 at 9:45 PM

There are always multiple ways of achieving results. I personally think ascx files are a good clean way of creating reusable modules which can inherit from customized user controls. I admit it's the customizations that the ascx inherits which can make it powerful but the modularized approach keeps things very organized for me. I also like the Master/Content schema in ASP.net and quite often load ascx files into content files on the fly. No big advantage to this but it keeps things organized for me. Sorry I don't have any public web sites to share, most of what I do are for government sites.

Mabuk said on 6.18.2009 at 6:39 PM

@Jan Willem - quite right, gains the full use of the controller to manipulate the views

Doug said on 8.20.2009 at 4:24 PM

I just ran some load tests (using VSTS Load Testing) to explore whether using ASPX files for partial views had any performance implication versus using ASCX files.

The result: no significant difference.

Run some tests yourself, of course, but for me, this is useful to know.

Michaux Kelley said on 11.05.2009 at 10:56 AM

Excellent post! I always enjoy your insight. Thank you very much.

Salman said on 11.11.2009 at 7:34 PM

Interesting approach! Indeed it takes a while to break away from standard webform thinking.