How to: Customize Data Field Display in the Data Model

Artigo
12/04/2014

This topic describes how to customize the display of a data field (table column) in ASP.NET Dynamic Data by creating your own field template. The tasks described in this topic include the following:

Create a custom field template to customize the display of the data field.
Associate the custom field template with the data field. This establishes the data model connection between the data field and the custom field template.

Note

When you customize a data field display by using the data model, the customization applies to the entire Web site. This means that Dynamic Data uses the custom field template instead of the default template (which is selected based on the data type in the data field) used to display the data field.

This topic assumes that you have created a Dynamic Data Web Site. For information about how to create a Dynamic Data Web Site, see Walkthrough: Creating a New Dynamic Data Web Site Using Scaffolding. The examples in this topic use the AdventureworksLT database. For information about how to download and install the SQL Server sample database, see Microsoft SQL Server Product Samples: Database on the CodePlex site.

To create a custom field template

In Solution Explorer, right-click the DynamicData/FieldTemplates folder, and then click Add New Item.
Under Visual Studio installed templates, click Dynamic Data Field.

In the Name box, enter the name of the control; you can use any name. For example, MyCustomFieldTemplate. Make sure that you select Place the code in separate file check box.
Switch to or open the user control file that you just created.
Create the markup that will be rendered to display the data.

The following example shows a Label control whose Text property is set to the current field value string and whose OnDataBinding property is set to a custom event handler.
```
<asp:Label id="Label1" runat="server" 
   Text='<%# FieldValueString %>'>
</asp:Label> 
```
Save and close the field template file.

Open the field template code behind file to expose the partial class.

Note

Notice that the field template partial class is derived from the FieldTemplateUserControl class.

partial class DynamicData_FieldTemplates_MyCustomControl: 
    System.Web.DynamicData.FieldTemplateUserControl
{     }

Public Partial Class DynamicData_FieldTemplates Inherits _ 
    System.Web.DynamicData.FieldTemplateUserControl
End Class

Customize how the field template displays the data field. For example, you can create an OnDataBinding event handler for the field template in the partial class and get the value of the current data field from the control's FieldValue property and customize how it is displayed.

The following example shows how to handle the OnDataBinding event. For example, if the order quantity exceeds the maximum quantity allowed, the field is displayed with a red background.

Protected override void onDataBinding(EventArgs e)
{
        // Define the maximum quantity that can be ordered.
        short MaxQuantity = 10;
        // Get the current number of items ordered.
        short currentValue = (short)FieldValue;
        // Compare the number to the maximum quantity 
        // allowed and set the foreground color to red. 
        if (currentValue > MaxQuantity)
        {
            Label1.Forecolor = System.Drawing.Color.Red;
        }
}

Public Sub DataBindingHandler(ByVal sender As Object, ByVal e As EventArgs) 
    ' Define the maximum quantity that can be ordered. 
    Dim MaxQuantity As Short = 10 
    ' Get the current number of items ordered. 
    Dim currentValue As Short = CShort(FieldValue) 
    ' Compare the number to the maximum quantity 
    ' allowed and set the foreground color to red. 
    If currentValue < MaxQuantity Then 
        Label1.Forecolor = System.Drawing.Color.Red 
    End If 
End Sub

Close the user control code behind file. You have now created a custom field template.

To associate a custom field template with a data field

In Solution Explorer, right-click the App_Code folder, and then click Add New Item.
Under Visual Studio installed templates, click Class.

In the Name box, enter the name of the database table that contains the data for the custom field template to display.

For example, if the custom field template will display data from the SalesOrderDetail table, the file name is SalesOrderDetail.cs or SalesOrderDetail.vb and the class name is SalesOrderDetail. This file will also contain an associated class that lets you customize display of the data field.
Switch to or open the class file that you just created.
Add the Partial keyword in Visual Basic or the partial keyword in Visual C# to the class definition to make it a partial class.
Add the namespace directive that refers to the System.Web.DynamicData, and System.ComponentModel.DataAnnotations, by using the Imports keyword in Visual Basic or the using keyword in Visual C#.
```
using System.Web.DynamicData;
using System.ComponentModel.DataAnnotations;
```
```
Imports System.Web.DynamicData
Imports System.ComponentModel.DataAnnotations 
```
Add the MetadataTypeAttribute attribute to the partial class definition. The attribute's parameter is the name of the associated metadata class that you will create in order to handle the data field display customization.
```
[MetadataType(typeof(SalesOrderDetailMetadata))]
public partial class SalesOrderDetail {

}
```
```
<MetadataType(GetType(SalesOrderDetailMetadata))> _
Public Partial Class SalesOrderDetail 

End Class
```
Create a class that will act as the associated metadata class. You can use any name for the class, but the class name must match the name that you referenced in the MetadataTypeAttribute attribute in the previous step.
In the metadata class, create a field whose name corresponds to the data field to display. Mark the field by using the UIHintAttribute attribute, specifying the name of the custom field template that is used for display.

The only purpose of the associated class is to provide a place to define the UIHintAttribute attribute, so that you do not have to add any other code to the class.

The following example shows a complete definition for the metadata class that includes a single field (with the UIHintAttribute attribute) that defines custom display for the OrderQty data field.
```
public class SalesOrderDetailMetadata
{
  [UIHint("MyCustomFieldTemplate")]
  public object OrderQty;
}
```
```
Public Class SalesOrderDetailMetadata
  <UIHint("MyCustomFieldTemplate")> _
  Public OrderQty As Object
End Class
```

Example

The following example shows a custom field template that checks the quantity of product ordered. If the quantity ordered is greater than the maximum number allowed, the field template displays the value by using red foreground.

Compiling the Code

The following are required for compiling this code example.

Visual Studio 2010 or Visual Web Developer 2010 Express.
A Dynamic Data Web site. For more information, see Walkthrough: Creating a New Dynamic Data Web Site Using Scaffolding.

Compartilhar via

How to: Customize Data Field Display in the Data Model

To create a custom field template

To associate a custom field template with a data field

Example

Compiling the Code

See Also

Concepts

Other Resources

Recursos adicionais