Dynamic Data on regular ASP.NET pages

<< Adding Feedburner & FeedFlare to your Subtext site | Home | ASP.NET MVC Preview 5 is out >>

Dynamic Data on regular ASP.NET pages

Dynamic Data is only for crazy auto generated sites where you expose too much functionality and allow stupid unskilled programmers to do stuff they shouldn't! Well... I've heard this objection a few times now and I recognize that this is a very valid concern. However there are a few more things, very useful things, that you can do with Dynamic Data! (Dynamic Data shipped with .NET Framework 3.5, SP1)

You should not add a data context to your site with all tables and register this model with ScaffoldAllTables = true! That would be a bad thing to put into production! A very bad thing! Still I say fine; if you need an admin site then make an admin site and use it for this purpose! Works Great.

Some of the nice new features of DynamicData that we have not seen before is for instance persisted selection, this means that when you select item 5 in the first page and move to the next page the 5th item is not selected. Instead of the selection being set by the row index it is set by the key of the item providing more logical behavior. Automatic validation that does string length, nullable, not nullable and some type checking by default which may be be customized using attributes. And, as I will show below; foreign key to nice names and editable drop down list.

So what should you do to avoid the bad thing mentioned above? You can use Dynamic Data for regular pages where you want to crate GridViews or ListViews (this new control is MEGA sweet) you can easily take advantage of really powerful Dynamic Data behavior. All you really need to do is add a DynamicDataManager to your page and feed it your control that will host DynamicData. That's it and you're set!

Each column you want to enable Dynamic Data support for in your grid you just write up as a DynamicField! Here is a very simple page that show a grid with dynamic content (Please note how short the sample is! We're saving a lot of coding here!):

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        DynamicDataManager1.RegisterControl(GridView1);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <asp:DynamicDataManager ID="DynamicDataManager1" runat="server" AutoLoadForeignKeys="true" />

    <asp:GridView ID="GridView1" runat="server" DataSourceID="theDataSource" AllowPaging="True"
        AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ProductID">
        <Columns>
            <asp:DynamicField DataField="ProductID" />
            <asp:DynamicField DataField="ProductName" />
            <asp:DynamicField DataField="Supplier" />
            <asp:DynamicField DataField="UnitPrice" />
            <asp:DynamicField DataField="Discontinued" />
        </Columns>
    </asp:GridView>

    <asp:LinqDataSource ID="theDataSource" runat="server" ContextTypeName="NorthWindDataContext"
        TableName="Products">
    </asp:LinqDataSource>

    </form>
</body>
</html>

Immediately you get a grid with data in it...

The impressive thing here is, in case you did not notice it, that for instance Discontinued is dynamically rendered as a Checkbox.

If you think that's pretty cool then try it out on a ListView using the DynamicContro.Mode Property (which is a DataBoundControlMode) to Edit even though I'm in the ItemTemplate and not the EditTemplate. I just wanted a clean and quick sample to show you so I just accepted this smallish blunder:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        DynamicDataManager1.RegisterControl(ListView1);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:DynamicDataManager ID="DynamicDataManager1" runat="server" AutoLoadForeignKeys="true" />

    <asp:ListView ID="ListView1" runat="server" DataSourceID="theDataSource" DataKeyNames="ProductID">
        <ItemTemplate>
            <tr>
                <td>
                    <asp:DynamicControl runat="server" DataField="ProductID" Mode="Edit" />
                </td>
                <td>
                    <asp:DynamicControl runat="server" DataField="ProductName" Mode="Edit" />
                </td>
                <td>
                    <asp:DynamicControl runat="server" DataField="Supplier" Mode="Edit" />
                </td>
                <td>
                    <asp:DynamicControl runat="server" DataField="UnitPrice" Mode="Edit" />
                </td>
                <td>
                    <asp:DynamicControl runat="server" DataField="Discontinued" Mode="Edit" />
                </td>
            </tr>
        </ItemTemplate>
        <LayoutTemplate>
            <table runat="server">
                <tr runat="server">
                    <td runat="server">
                        <table id="itemPlaceholderContainer" runat="server" border="0">
                            <tr runat="server">
                                <th runat="server">
                                    ProductID
                                </th>
                                <th runat="server">
                                    ProductName
                                </th>
                                <th runat="server">
                                    Supplier
                                </th>
                                <th runat="server">
                                    UnitPrice
                                </th>
                                <th runat="server">
                                    Discontinued
                                </th>
                            </tr>
                            <tr id="itemPlaceholder" runat="server">
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr runat="server">
                    <td runat="server">
                    </td>
                </tr>
            </table>
        </LayoutTemplate>
    </asp:ListView>

    <asp:LinqDataSource ID="theDataSource" runat="server" ContextTypeName="NorthWindDataContext"
        TableName="Products">
    </asp:LinqDataSource>
    
    </form>
</body>
</html>

The result of this page running is pretty cool:

As you can see the Supplier is now a select box! The data is mapped over to SupplierID automagically! The underlying data looks like this from the ViewSource: