Walkthrough: Customizing Table Layout Using Entity Templates

Article
02/13/2013

This walkthrough shows you how to create a custom entity template to define the layout of a specific table in a Dynamic Data project. Entity templates work with LINQ to SQL and with the ADO.NET Entity Framework.

A Visual Studio project with source code is available to accompany this topic: Scaffolding Dynamic Data.

The following illustration shows the default layout of an entity (row of data).

Default Entity Template layout

The following illustration shows the same data rendered using the custom entity template that you create in this topic.

Custom Entity Template Layout

In this walkthrough, you will create a custom entity template to display the Address table of the AdventureWorksLT sample database using an ADO.NET Entity Framework data model. Entity templates also work with LINQ to SQL. The custom entity template that you will create changes the layout of fields and the appearance of the field labels as shown in the previous illustration.

The downloadable sample includes the following additional features that illustrate how to use custom entity templates:

Custom edit and insert entity templates for the Address table of the AdventureWorksLT. You do not create custom edit and insert templates in this walkthrough, but if you download the sample, you can examine and work with the insert and edit templates that are defined in the sample.
The custom AddressCustom.aspx page that uses the Address entity templates.

Prerequisites

Microsoft Visual Studio 2010 or a later version.
A Dynamic Data Web site or a Dynamic Data Web application. This enables you to create the custom entity templates. For more information, see Walkthrough: Creating a New Dynamic Data Web Site using Scaffolding.
The AdventureWorksLT sample database. For more information, see How to: Connect to the AdventureWorksLT Database using an .MDF File.

Creating a Custom Entity Template

The first step is to create a custom entity template. For this walkthrough, you will create a custom template that displays data from the Address table of the AdventureWorksLT database.

To create a custom entity template for the Address table

In Solution Explorer, open the DynamicData node, right-click the EntityTemplates folder, click Add, and then click New Item.
Under Visual Studio installed templates, click Web User Control.
In the Name box, enter the name of the data model entity that represents the Address table.

For LINQ to SQL and for the ADO.NET Entity Framework data model, enter the name Addresses.ascx. By default, these data models create a name for the entity that uses the plural form of the table (for example, "Addresses" for the Address table).

If you are working with the ADO.NET Entity Framework data model and you prefer to work with an address entity that uses a singular name, clear the Pluralize or singularize generated object names check box, and then enter the name Address.ascx.

In the .ascx file, enter the following markup to create the layout of the Address table:

<tr>
  <td class="DDLightHeader">
        <asp:Label ID="Label1" runat="server" Text="Address" />
  </td>
  <td>
    <asp:DynamicControl ID="DynamicControl1" runat="server" 
        DataField="AddressLine1" />
  </td>
</tr>
<tr>
  <td class="DDLightHeader">
    <asp:Label ID="Label2" runat="server" Text="City" />
  </td>
  <td>
    <asp:DynamicControl ID="DynamicControl3" runat="server" 
        DataField="City" />
  </td>
  <td class="DDLightHeader">
    <asp:Label ID="Label3" runat="server" 
        Text="State/Province" />
  </td>
  <td>
    <asp:DynamicControl ID="DynamicControl4" runat="server" 
        DataField="StateProvince" />
  </td>
</tr>
<tr>
  <td class="DDLightHeader">
    <asp:Label ID="Label4" runat="server" Text="Country/Region" />
  </td>
  <td>
    <asp:DynamicControl ID="DynamicControl5" runat="server" 
        DataField="CountryRegion" />
  </td>
  <td class="DDLightHeader">
    <asp:Label ID="Label5" runat="server" Text="Postal Code" />
  </td>
  <td>
    <asp:DynamicControl ID="DynamicControl6" runat="server" 
        DataField="PostalCode" />
  </td>
</tr>;

In the class file for the page, change the base class from UserControl to EntityTemplateUserControl.

Testing the Address Entity Template

You can now test the Address entity template that you just created.

To test the Address entity template

In Solution Explorer, right-click the Default.aspx page, and then click View in Browser.

The page displays a list that contains the tables that you added to the data model.
Click the Address table.
Click the Details link on one of the displayed rows.

A page is displayed that contains the data from the row that you selected. Notice the layout is in the format that you defined in the Address entity template.
Click the Edit link.

The default format provided by the Default_edit.aspx entity template is displayed. You did not define a custom template for the insert operation, so Dynamic Data uses the default template.

Testing the Address Entity Template in the Downloaded Project

Custom pages for the Address table that contain markup for the DynamicEntity control will also use the Address entity template. For example, the project that you can download contains the AddressCustom.aspx page, which uses the Address entity template. If you download and install the sample project, you can see how the custom entity template is used.

To test the Address entity templates with the AddressCustom.aspx page in the download sample

In Solution Explorer, right-click the AddressCustom.aspx page, and then click View in Browser.

The page displays address data using the address entity template. You can recognize the address entity template is used by the layout, custom font styles and font colors. The AddressCustom.aspx page shows that the same custom entity template can be used by the default page templates and custom pages.

Next Steps

To create custom edit and insert templates for the Address table, you can repeat the procedure that you used in this walkthrough to create a custom display of the table. If you are using the default LINQ to SQL or Entity Framework data model that is generated for the AdventureWorksLT database, the edit and insert entity templates for the Address table are named Addresses_Edit.ascx and Addresses_Insert.ascx. For more information about how to customize field templates, see How to: Customize ASP.NET Dynamic Data Default Field Templates.

Share via