Minggu, 23 Januari 2011

ASP.NET Dynamic Data: Customizing the UI


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!

Tidak ada komentar: