MVC + ASP.Net template control and user control

Seeing that I can use a DataBoundControl such as DataList, and binding it to a source control is achievable – what next?

Data bound controls contain various templates. The usual suspects are the item template and alternating template (for a repeating object, with possible varied style), the header and the footer templates (for enclosing HTML pre/post wrap or header / footer effects).

Under MVC, all events are out the window. So we’re not concerned at all with event hookup. We might want to provide the various “modes” of display (Edit, Create, Delete etc) which align well with CRUD command structure and may map to MVC quite naturally. But for starters, my project’s requirements simply required styling of the repeating item to be easily controlled.

So rather than inline HTML in the tag, I wanted to use a user control (ASCX). This allows my to style the item once and re-use it in pop-ups or other areas of the site, not just the data list view.

The question becomes then – how do I pass data “down” to the user control? The answer turned out to be to easy – you don’t have to do anything! That’s right, the containing DataList gets bound to data. The user control then can pluck fields from the “data row” (each item in the bound list of the parent) by using the syntax Eval("{some property}")

So the steps are:

1. Create your user control (MiniItem.ascx)
2. Register the user control in the hosting ASPX page
3. Include the user control in the item template of your data bound control

The user control is an .ascx file, but change it to just inherit from System.Web.UI.UserControl. This is MVC so code behind is left behind..

<%@ Control Language="C#" Inherits="System.Web.UI.UserControl" %>
<fieldset>
    <legend>Oh Goodie!</legend>
    <p>
        Product ID:
        <%#Eval("ProductID") %>
    </p>
    <p>
        Title:
        <%#Eval("Title") %>
    </p>
    <img src='/Content/ProductImages/<%#Eval("ImagePath") %>' alt='Image Path' />
    <p>
        Description:
        <%#Eval("Description") %>
    </p>
</fieldset>

Your host ASPX file will need to register your control type in order to use it, so up at the top you place:

<%@ Register Src="MiniItem.ascx" TagName="MiniItem" TagPrefix="uc1" %>

Now you can use the user control simply by adding it to the ItemTemplate tag:

<asp:DataList runat="server" ID="dataList" RepeatColumns="4" RepeatDirection="Horizontal">
    <ItemTemplate>
        <uc1:MiniItem ID="MiniItem1" runat="server" />
    </ItemTemplate>
</asp:DataList>

There you have it. You can use the good concepts of ASPX and the controls and visual components you are familiar with. While HTML helpers and fluent interface libraries are popping up, some find it more convenient and easy to use the “old” familiar ASPX controls. There are some good reasons to learn new things and try new framework or software paradigms. However, we can also leverage many of the successful declarative features of ASPX as a templating engine to achieve rapid development and modular UI.