ASP.NET Dynamic Data: Customizing the UI

  • Article

In my last post on Dynamic Data, I showed what Dynamic Data adds to the current ASP.NET data story.  In this post I show how to customize the UI with Metadata, field templates, and page templates. 

I start off by showing off the Dynamic Data Wizard.

File\New WebSite

image

Create a new connection, in this case using SqlExpress

image

It may take a minute, but the wizard will load the database metadata.. let's select just a few tables for this demo

image

The next step is customizing the project that gets generated.  For this demo, we will Add All.

image

Next, we can do some further customization of the end application..

image

The resulting application looks great.  Notice the automatic filtering, navigation between tables, editing and validation.

image

Custom Metadata

Dynamic Data works off the metadata in the data model.  As you see from above there is already a lot of this in the database.  But we can customize it and add more.

In NorthwindDataContextPartialClass.cs,

We customize the error message to be more friendly..

 [Required(ErrorMessage="Please fill in the product name")]
public object ProductName {

 

Set a maximize string length

 [StringLength (20)]
public object QuantityPerUnit {

image

And customize formatting

 [DisplayFormat(DataFormatString="{0:C}")]
public object UnitPrice {

 

image

There are many other customization, and it is an extensible system, so you can add your own!

 

Custom Field Templates

In the DynamicData\FieldTempates directory you will find some default field templates.  Dynamic Data uses these to render values based on their type.   As an example, change the Text template as such:

String(

<asp:Literal runat="server" ID="Literal1" Text="<%# FieldValueString %>" />

)

image

Now, clearly this particular modification is not that useful.... But for example if you wanted to change the check box rendering to say "True" or "False".  That is easily done by editing the boolean template as such:

 <asp:Label runat="server" ID="label"></asp:Label>

 

 public partial class BooleanField : System.Web.DynamicData.FieldTemplateUserControl {
    protected override void OnDataBinding(EventArgs e) {
        base.OnDataBinding(e);

        label.Text = "False";
        object val = FieldValue;
        if (val != null && Convert.ToBoolean(FieldValue))
            label.Text = "True";
           
    }

    public override Control DataControl {
        get {
            return label;
        }
    }
}

Now, that readers as:

image

 

There are a bunch of other things you can do... Use third party controls, etc.

 

Custom Page Templates

In the DynamicData\PageTemplates directory you will find the default rendering for all the kinds of pages.  Changing these templates changes how all "Lists" or "ListDetails" are rendered. 

image

From the URL, you can see that the table in we are using is "Products" and we are using the "List" view.   Change the List.aspx template as follows:

     <h2>My Customization: <%= table.DisplayName%></h2>

 

image image

But notice, Categories does not have this customization. 

That is because we have defined a further customization just for the Categories table.  Look in DynamicPages\CustomPages\Categories\List.aspx

image

 

 

In this post I show how to customize the UI with Metadata, field templates, and page templates.  You can get the final project here.

Enjoy!