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 Max Quantiy that can be ordered.
        short MaxQuantity = 10;
        // Get the current number of items Ordered.
        short currentValue = (short)FieldValue;
        // Compare number ordered 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 Max Quantiy that can be ordered. 
    Dim MaxQuantity As Short = 10 
    ' Get the current number of items Ordered. 
    Dim currentValue As Short = CShort(FieldValue) 
    ' Compare number ordered 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.

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 auxiliary 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 auxiliary 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 auxiliary 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 auxiliary 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