ASP.NET Dynamic Data Websites - Creating Custom Dynamic Data Fields

ASP.NET Dynamic Data Websites - Creating Custom Dynamic Data Fields

by David Hayden ( Florida ASP.NET Developer ), Filed: ASP.NET 3.5, Code Generation

 

This is my 4th tutorial on the new ASP.NET Dynamic Data that ships with the ASP.NET 3.5 Extensions CTP. ASP.NET Dynamic Data is all about building database-driven web applications in a more productive and less monotonous manner, and that sounds good to me :)

If you are interested, you can read the past three tutorials:

 

Dynamic Data Fields

ASP.NET Dynamic Data provides fields that use the database schema to automatically determine the correct control to render to display data. The Fields are nothing more than ASP.NET UserControls that sit in the App_Shared -> DynamicDataFields Folder in your website:

 

Dynamic Data Fields

 

All the Dynamic Data Fields shown above are included by default, except for the custom CalendarDateTime and CalendarDateTime_Edit Fields that I added for this tutorial.

Dynamic Data Fields work like this. When a boolean field, for example, needs to be rendered, by default it is the Boolean.ascx or Boolean_Edit.ascx Field that is used to render the value. If a DateTime field needs to be rendered, by default it is the DateTime.ascx or DateTime_Edit.ascx Field that renders its values. And so on and so forth.

If you want to globally change the way a type is rendered in the application, one only has to make the change in the Dynamic Data Field UserControl associated with the type.

 

Overriding the Dynamic Data Field to Display a Value

Sometimes you don't want to globally change a Dynamic Data Field, however, but use a custom field to display a specific value.

For example, the Employees Table in the Northwind Database has a HireDate Field. By default, the DateTime_Edit Field will display the value for modification. This is nothing but a TextBox as shown in this partial view:

 

Custom Dynamic Data Field

 

Let's pretend that our client wanted HireDate to have a Calendar for date input, but BirthDate and all other dates in the application to be the default textbox.

To do so, we decide to create a custom Dynamic Data Field for HireDate, called CalendarDateTime and CalendarDateTime_Edit as shown in the Solution Explorer above. To start us off, we just copy and paste DateTime and DateTime_Edit, and rename them to CalendarDateTime and CalendarDateTime_Edit.

More importantly, however, we need to tell the Dynamic Data Framework that we want to use this custom Dynamic Data Field for the HireDate. Luckily for us, there is a special attribute for just these times, called RenderHint. We create a partial class of Employee, separate from the one defined in the LINQ To SQL Model, and add the RenderHint Attribute to it that specifies the HireDate Property needs to be rendered with the CalendarDateTime Field:

 

[RenderHint("HireDate","CalendarDateTime")]
public partial class Employee
{
}

 

You have to love the simplicity of the attributes used for metadata. Note, however, there is no compile-time checking for spelling errors and no exceptions will be thrown at runtime if you mis-type the name of the field or UserControl as well. It just won't have an effect :(

 

Creating the Custom CalendarDateTime Dynamic Data Field

For simplicity, we are going to use the CalendarExtender in the AJAX Control Toolkit to display a calendar for date input as soon as the HireDate receives focus. All I did was add the CalendarExtender into CalendarDateTime_Edit and accepted most of the defaults:

 

<ajaxtoolkit:calendarextender
    ID="Calendar"
    TargetControlID="TextBox1"
    Format="MMMM d, yyyy"
    CssClass="yui"
    runat="server" />

 

TextBox1 is the textbox that will display the HireDate in this case. As soon as it gets focus, the calendar displays:

 

Custom Dynamic Data Field Calendar

 

Modifying Default Dynamic Data Fields

It is probably obvious, but if you find that you will want a calendar for date input by default for all date fields, you don't have to use the RenderHint Attribute or create a custom CalendarDateTime Dynamic Data Field. Just modify the default template for editing a date, DateTime_Edit, and all date fields will have a calendar for date input.

 

Conclusion

The idea of having Dynamic Data Fields as well as the ability to specify the rendering of Custom Dynamic Data Fields is a brilliant move of extensibility by the team at Microsoft. Well done.

 

Site: http://www.davidhayden.com/

Author: David Hayden ( Florida ASP.NET Developer )

Filed: ASP.NET 3.5, Code Generation

posted on Thursday, January 03, 2008 11:11 PM

My Links

Post Categories

Article Categories

Archives

Loose-Leaf Tea