This chapter is from the book
This chapter is from the book
This chapter is from the book
Changing Existing Field Template
Dynamic Data uses the same field template for all matching columns in the model. The DateTime_Edit field template is automatically used for all columns of type DateTime in the Northwind data model, including OrderDate, RequiredDate, and ShippedDate columns of the Order table as well as BirthDate and HireDate columns of the Employee table. By changing definition of the field template, you affect all web pages where it is used. Figure 3.2 shows how the experience of entering date values can be improved by allowing the users to select a date from a calendar drop-down.
)
Figure 3.2. Modified DateTime field template with calendar drop-down.
The modified field template, DateTime_Edit.ascx, is shown in Listing 3.7. This example uses the CalendarExtender control from the AJAX Control Toolkit, but you can use any other ASP.NET control from your favorite component vendor. The CalendarExtender is associated with the TextBox by specifying its TagetControlID property. Using the PopupButtonID property, it is also associated with an ImageButton that users can click to display the calendar drop-down.
Listing 3.7. Extended DateTime_Edit Field Template (Markup)
<%@ Control Language="C#" CodeBehind="DateTime_Edit.ascx.cs" Inherits="WebApplication.DynamicData.FieldTemplates.DateTime_EditField" %> <asp:TextBox ID="textBox" runat="server" Text='<%# FieldValueEditString %>' Columns="20" /> <asp:ImageButton ID="calendarButton" runat="server" ImageUrl="../Content/Images/Calendar.png" /> <ajax:CalendarExtender runat="server" TargetControlID="textBox" PopupButtonID="calendarButton" /> <asp:RequiredFieldValidator runat="server" ID="requiredFieldValidator" ControlToValidate="textBox" Enabled="false" /> <asp:RegularExpressionValidator runat="server" ID="regularExpressionValidator" ControlToValidate="textBox" Enabled="false" /> <asp:DynamicValidator runat="server" ID="dynamicValidator" ControlToValidate="textBox" /> <asp:CustomValidator runat="server" ID="dateValidator" ControlToValidate="textBox" EnableClientScript="false" Enabled="false" OnServerValidate="DateValidator_ServerValidate" />
Notice that this example uses a custom ajax: tag prefix with the CalendarExtender without actually registering it. We could have used the ASP.NET <%@ Register %> directive to register this tag prefix directly in the DateTime_Edit.ascx. However, because the AJAX Control Toolkit is used in other field templates of this sample project, it is better to register it in the Web.config as shown in Listing 3.8. This makes the AJAX controls available in all pages and controls of the web application and helps you avoid having to register the same tag prefix in multiple pages and user controls.
Listing 3.8. Registering AJAX Controls in the Web Configuration File
<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0"/>
<pages styleSheetTheme="Default">
<controls>
<add tagPrefix="ajax" assembly="AjaxControlToolkit"
namespace="AjaxControlToolkit"/>
</controls>
</pages>
</system.web>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
<connectionStrings>
<add name="NorthwindEntities"
providerName="System.Data.EntityClient"
connectionString="
metadata=res://*/Northwind.csdl|
res://*/Northwind.ssdl|
res://*/Northwind.msl;
provider=System.Data.SqlClient;
provider connection string="
data source=.\sqlexpress;
initial catalog=Northwind;
integrated security=True;
multipleactiveresultsets=True""/>
</connectionStrings>
</configuration>