Field templates are user controls that Dynamic Data uses to render UI for displaying and editing data fields. Dynamic Data requires field templates to exist for each data field type that is represented in the data context. (If no field template exists for a specific data field type and no field template can be found using fallback rules, Dynamic Data throws an exception.)
If you create a Dynamic Data Web site, the site includes a set of field templates that represent typical database data types. These are created together with page templates, a master page, and cascading style sheet files. However, in this walkthrough, you are learning how to add Dynamic Data capabilities to an existing site. Therefore, it is assumed that you do not have access to default field templates.
The field templates that you create in this walkthrough will resemble the default templates in a Dynamic Data Web site. For more information, see ASP.NET Dynamic Data Field Templates Overview. You can see the default field templates that are generated when you create a Web site that uses scaffolding. For more information, see Walkthrough: Creating a New ASP.NET Dynamic Data Web Site Using Scaffolding.
This section shows how to create the following templates:
Creating Field Templates for String Data
This section shows how to create field templates to render UI for displaying and editing String data fields.
To create field templates to display and edit String data fields
In Solution Explorer, right-click the project name, and then click New Folder.
Rename the new folder DynamicData.
.gif) Note: |
|---|
You must use the folder names that are described in this procedure, because the names have special meaning in Dynamic Data. |
In Solution Explorer, right-click the DynamicData folder, and then click New Folder.
Rename the new folder FieldTemplates.
In Solution Explorer, right-click the FieldTemplates folder, and then click Add New Item.
Under Visual Studio installed templates, click Dynamic Data Field.
In the Name box, enter Text.ascx. Make sure that you select Place the code in separate file.
Click Add.
Two field templates named Text.ascx and Text_Edit.ascx are created. The first control renders the UI for displaying String data fields. The second control renders the UI for editing String data fields.
Open the Text_Edit.ascx file and in the @ Control directive, set the AutoEventWireup attribute to true.
Save and close the user control files.
You have now created the field templates that render UI for displaying and editing String data fields.
Creating DateTime Field Templates
This section shows how to create field templates to render UI for displaying and editing DateTime data fields. The display field template uses a short date representation that excludes the time. The editing field template uses the Calendar control to enable the user to enter a new value.
To create a field template to display and edit DateTime data fields
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 DateCalendar.ascx. Make sure that you select Place the code in separate file.
Click Add.
Two field templates named DateCalendar.ascx and DateCalendar_Edit.ascx are created. The first control renders the UI for displaying DateTime data fields. The second control renders the UI for editing DateTime data fields.
Open the DateCalendar.ascx file.
In the Literal control, delete the FieldValueString assignment to the Text attribute, as shown in the following example.
<asp:Literal ID="Literal1" runat="server"/>
Save and close user control file.
Open the DateCalendar.ascx.vb or DateCalendar.ascx.cs field template code-behind file.
Override the user control OnDataBinding method to format the DateTime value for display by excluding the time, as shown in the following example. The value of the field is available in FieldValue.
protected override void OnDataBinding(EventArgs e)
{
base.OnDataBinding(e);
string shortDate = string.Empty;
if (FieldValue != null)
{
DateTime dt = (DateTime)FieldValue;
shortDate = dt.ToShortDateString();
}
Literal1.Text = shortDate;
}
Protected Overloads Overrides Sub OnDataBinding( _
ByVal e As EventArgs)
MyBase.OnDataBinding(e)
Dim shortDate As String = String.Empty
If FieldValue IsNot Nothing Then
Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
shortDate = dt.ToShortDateString()
End If
Literal1.Text = shortDate
End Sub
Save and close the code-behind file.
Open the DateCalendar_Edit.ascx file.
In the @ Control directive, set the AutoEventWireup attribute to true.
In the TextBox control, replace the FieldValueString expression in the Text attribute with the custom GetDateString() method, as shown in the following example.
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# GetDateString() %>' >
</asp:TextBox>
Add the following markup to the file to define the Calendar control that renders UI to enable an alternative way of editing dates.
<asp:Calendar ID="Calendar1" runat="server"
VisibleDate=
'<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
SelectedDate=
'<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
OnSelectionChanged="Calendar1_SelectionChanged" />
<asp:Calendar ID="Calendar1" runat="server"
VisibleDate=
'<%# If(FieldValue,DateTime.Now)%>'
SelectedDate=
'<%# If(FieldValue,DateTime.Now) %>'
OnSelectionChanged="Calendar1_SelectionChanged" />
Save and close the field template file.
Open the DateCalendar_Edit.ascx.vb or DateCalendar_Edit.ascx.cs code-behind file.
Add a GetDateString method. In the method, process the user's input as entered through the TextBox control. The method formats the date by using a short date format that excludes the time.
The following example shows how to do this.
protected string GetDateString()
{
if (FieldValue != null)
{
DateTime dt = (DateTime)FieldValue;
return dt.ToShortDateString();
}
else
return string.Empty;
}
Protected Function GetDateString() As String
If FieldValue <> Nothing Then
Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
Return dt.ToShortDateString()
Else
Return String.Empty
End If
End Function
Add a handler for the Calendar control's SelectionChanged event.
In the handler, set the Text property of the TextBox control to a formatted version of the selected date from the calendar. This displays the user's current selection in the text box.
The following example shows the handler.
protected void Calendar1_SelectionChanged(
object sender, EventArgs e)
{
// Display value using the short date format.
TextBox1.Text =
Calendar1.SelectedDate.ToString("d");
}
Protected Sub Calendar1_SelectionChanged( _
ByVal sender As Object, ByVal e As EventArgs)
' Display value using the short date format.
TextBox1.Text = Calendar1.SelectedDate.ToString("d")
End Sub
Save and close the field template files.
You have now created the field templates that render the UI for displaying and editing DateTime data field types. The field templates instruct Dynamic Data to apply appropriate formatting and validation. If validation fails, the field templates also generate appropriate error messages.