Microsoft ASP.NET 4 : Dynamic Data Details

At this point, you might be looking at the preceding example and wondering what the big deal is. After all, if you point the GridView toward a data source, the GridView automatically reflects the data source columns and creates a bunch of columnar representations. However, the columns for the GridView shown so far are bound columns that use the BoundField server-side control. Once the GridView is rendered—that's all the end user sees, and there is no easy way to customize the behavior. ASP.NET Dynamic Data features change that: The Dynamic Data features are built around the DynamicControl and the DynamicField controls.

The DynamicControl is used in the ListView and the FormView data controls. Using the DynamicControl causes ASP.NET to render a UI based on schema from the database. You use the DynamicField in the GridView and DetailsView (instead of the BoundField) to render the UI. The DynamicField relies on the DynamicControl internally, so produces the same sort of data-driven UI in the context of the GridView and the DetailsView.

When you use the DynamicControl (either explicitly or implicitly), ASP.NET renders data entry forms generated directly from the tables of your database, and you can substitute other controls to render the UI (rather than relying on the default provided by ASP.NET). This lets you use a wide variety of controls easily in the GridView, ListView, FormView, and DetailsView.

For example, imagine you want to allow users to enter a Social Security number using the DataGrid. If you do not use Dynamic Data, the GridView uses the standard TextBox control to render the editing UI, and there's no easy way to inject any other control. Now imagine you want to use a different control during editing: the MaskedTextBoxExtender from the AJAX toolkit. By applying the MaskedTextBoxExtender to the TextBox, you can ensure that the user enters the number in the correct format (three digits, a hyphen, two digits, another hyphen, and then four more digits). Up until now, it has not been feasible to extend the GridView in this way. But now you can with the DynamicControl or DynamicField. The Dynamic Data scaffolding produced by Visual Studio includes well-delineated places where you can substitute different, nondefault controls. In addition, Dynamic Data supports automatic validation. For example, by using the Dynamic Data features of ASP.NET, you can avoid having to recode all those validators over and over again because the database schema can inform how the data validation works for a particular column.

The next example illustrates how to extend the application to show more tables and to use the automatic validation supplied by the scaffolding.

Extending the application

1. Open the DotNetReferences.dbml file. Visual Studio should display the Object Relational Designer. Open Server Explorer. Find the DotNetLinks table and drag it into the Object Relational Designer. Rebuild the application and you will see links for the DotNetLinks table (as well as the DotNetReferences table). Click the DotNetLinks hyperlink. You should see the DotNetLinks table represented in the browser as follows:

   
   

   

   
   

2. Close the browser and open the file List.aspx; it is in Solution Explorer under the Project node: Open the Dynamic Data node, and then open the Page Templates node. After you open List.aspx, switch to Design mode if not already displayed as such. You should see the GridView in Design mode:

   
   

   

   
   

3. This page is just like any other Web form at this point. If you would like to format the GridView, you can by clicking the SmartTag for the grid (the angle bracket (>) in the box in the upper right corner of the control). For example, you can auto format the GridView to give it a more colorful appearance. You can also edit the control to have alternating row styles. The example here skins the GridView using the Classic format. Here's the DotNetLinks GridView following the reformat:

   
   

   

   
   

4. Now update the Linq to SQL data model to support regular expression validation. The file created by Visual Studio is named DotNetReferences.Designer.cs, and you can edit it by expanding the DotNetReferences.dbml file in Solution Explorer. Find the URL property in the DotNetLink class and add the RegularExpression attribute to it. The regular expression shown here is borrowed from the RegularExpressionValidator's ValidationExpression dialog box:

   [global::System.Data.Linq.Mapping.ColumnAttribute(Storage="_URL",
     DbType="NVarChar(100) NOT NULL", CanBeNull=false)]
   [System.ComponentModel.DataAnnotations.RegularExpression
                           ("http(s)?://([\\w-]+\\.)+[\\w-]+(/[\\w- ./?%&=]*)?")]
   public string URL
   {
     get
     {
       return this._URL;
     }
     set
     {
       if ((this._URL != value))
       {
         this.OnURLChanging(value);
         this.SendPropertyChanging();
         this._URL = value;
         this.SendPropertyChanged("URL");
         this.OnURLChanged();
       }
     }
   }
   
   					  

   
   

5. Run the site. Go to the DotNetLinks page and try to edit one of the links. You are presented with the DotNetLinks edit page. Type an invalid URL in the edit box. Click the Update link and watch the built-in regular expression validator fire and as illustrated in the following graphic. This happens because the URL property in the data model throws an exception when a value not matching the regular expression defined in the attribute is set.

   
   

   

   
   

6. To see where the built-in RegularExpressionValidator is set up, open the file Text_Edit.ascx, which is in the DynamicData\FieldTemplates folder in Server Explorer. You'll see the following code:

   <%@ Control Language="C#" CodeBehind="Text_Edit.ascx.cs"
     Inherits="DynamicDataLinqToSQLSite.Text_EditField" %>
   
   <asp:TextBox ID="TextBox1" runat="server"
     Text='<%# FieldValueEditString %>' CssClass="DDTextBox"></asp:TextBox>
   
   <asp:RequiredFieldValidator runat="server"
     ID="RequiredFieldValidator1" CssClass="DDControl DDValidator"
     ControlToValidate="TextBox1"
     Display="Dynamic" Enabled="false" />
   <asp:RegularExpressionValidator runat="server"
     ID="RegularExpressionValidator1" CssClass="DDControl DDValidator"
     ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
   
   <asp:DynamicValidator runat="server"
     ID="DynamicValidator1"
     CssClass="DDControl DDValidator"
     ControlToValidate="TextBox1" Display="Dynamic" />

   
   

Voila! The editing facilities of the page are controlled by a user control!

As you can see, there is nothing hidden or magical about the ASP.NET Dynamic Data feature. In fact, if you peruse the files generated by Visual Studio, you can see a host of common ASP.NET idioms . The power of Dynamic Data is that you can use it to tailor a site that is driven by the data model rather than spending a lot of time creating a UI to match the data model. This is especially powerful if you expect your data model to change in the future.