Dynamic Data in Asp.net 4.0. Part3 : Customizing Dynamic Data application

This is the 3rd and last part of the article on Asp.net Dynamic Data and in this part we are going to learn how to customize a Dynamic Data application.

Dynamic Data in Asp.net 4.0. Part2 :Understanding the Application project and its internal building blocks

Dynamic Data in Asp.net 4.0. Part1 : Introduction

 explains the details of a Dynamic Data application and introduces it's building blocks. Once you go through that post, you will understand how a Dynamic Data application works and this is important to learn how to customize it.

Dynamic Data lets you quickly build a data driven Asp.net application that lets you perform the CRUD functionality along with the listing and details pages without writing almost a single line of code! But, in a real worl'ds application, the CRUD (Plus listing and details pages) functionality is not enough, and, most of the cases you would need to build custom-designed pages with many other customized functionality.

One of the cool features of Dynamic Data is, it lets you easily customize the functionality at each granular level, and, there is no alien codes to customize (Unlike most other code generation framework). Customizing a Dynamic Data application is too easy once you understand how it works.

Lets start customizing it!

Scaffolding only particular tables instead of all

Find the following piece of codes in the Global.asax

1 2	DefaultModel.RegisterContext(typeof(DynamicDataEntities),                 new ContextConfiguration() { ScaffoldAllTables = true });

Specifying ScaffoldAlltables = true  in the above code instructs the Dynamic Data engine to generate codes for all tables in the data source (Be it an Entity framework data source or a Linq data source). Most of the cases this is not desired and we need some mechanism to scaffold only the tables we woul like.

To do this, perform the following steps:

Specify ScaffoldAllTables = false (Which is the default).

Let's assume the following three tables are included in the Entity (Or Linq) data context and we would like only to scaffold Employee and Address tables.

Figure : Entity Model

Add a cs file (Say, Entity.cs) in the Dynamic Data project, write two partial classes for the Employee and Address table and specify the ScaffoldTable(true) attribute for each of the classes as follows:

1 2 3 4 5 6 7 8 9

[ScaffoldTable(true)] public partial class Address { }   [ScaffoldTable(true)] public partial class Employee { }

Build and run the project. You would see that, only Employee and Address table has been included now in the Dynamic Data application and the other (Department) table is ignored:

Figure : Output after scaffolding only selected tables

Customizing display for individual fields

As you may already know, the "FieldTemplates" folder contains templates (In the form of User Controls) for most common data types. So, customizing these templates would result in a global change for the corresponding data types.

For example, the Text.ascx contains the following markup for displaying a text field:

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

If you want to display all the text fields in Green color, you can replace the above markup with the following (Assuming that you added a css class "GreenText" in the Site.css and set color : Green):

1	<asp:Label runat="server" ID="Literal1" Text="<%# FieldValueString %>" CssClass="GreenText"/>

After doing the change, browse the application and go to the listing page of any table. You would see the text fields all turned into green:

Figure : Customizing text field display

If you go to any other page, you would see the text color turned into green. That's some power! So now you have the field templates, and you know how to customize those to make any global change in your application. Its all yours!

Customizing display for a table data

The "EntityTemplates" folder contains the following three templates (In the form of User Controls) which determine how to display each column value of data for a particular table in Display, Edit and Insert mode.

Figure : EntityTemplates

So, changing the templates inside this folder results in changing the display of the column values for a particular table.

As an experiment, lets do a little change in the \EntityTemplates\Default.ascx like the following (Add the class="LightGrayBackground", along with adding the class LightGrayBackground in the Site.css with setting a light gray background-color):

Figure : Customizing Entity template

After doing so, run the aplication and go to the View Details page for a particular data of a table. You would see that, the background color of each cell is changed:

Figure : Output of a change in EntityTemplates

Similarly, you can customize the Default_Edit.aspx and Default_Insert.aspx to customize the layout and functionality of Edit and Insert view for the column values. Like the FieldTemplates, customizeing the EntityTemplates lets you make global changes from a single point.

Customizing pages

The "PageTemplates" folder contains the page templates, which are as follows:

Figure : Page Templates

As you know already, doing any change in any of these page templates (And their corresponding code behind classes) would result in change of display and functions in the corresponding pages.

For demonstration, just do a minor change in the Details.aspx as follows (Append the text in Red border):

Figure : Customize Details.aspx PageTemplate

Run the application and as you expected, when the details page is viewd for a particular data in a Table, the output would be now changed as follows :

Figure : Change in output after customizing Details.aspx

Like the FieldTemplates and EntityTemplates, doing any change in the PageTemplates also results in a global change for all tables in the application.

Using a customized page for a particular table

The aspx files in the PageTemplates folder are globally used by all tables. For example, the PageTemplates\Details.aspx is used to show the details page for a particular data for all of the tables. So, any customization done in these aspx files result in the corresponding change getting effected for all tables. This might not be desirable in case we need to have a specialized page for a particular table.

Fortunately, it is very easy to create a specific customized page for any particular table in Dynamic Data application. All you need is to create a folder within the "CustomPages" folder and name the folder same as the target Table name.

For example, if we want to create a customized details page for Address data, we would need to create the Details.aspx within the "Addresses" folder inside "CustomPages" folder as follows:

Figure : Customized details page for Addresses table

For simplicy, lets copy the contents of aspx markup and codes from code behind class from PageTemplates\Details.aspx and paste onto CustomPages\Addresses\details.aspx and customize the markup of CustomPages\Addresses\details.aspx as follows:

Figure : Customize Details.aspx for Addresses table

Build and run the application and go to the details page of a data in Addresses table. You would see an output like the following:

Figure : Custmized details page output for a specific table

Similarly, you can customize the other pages also for a particular table (Say, Insert.aspx, List.aspx, Edit.aspx etc) using the same approach.

Using a customized EntityTemplate (Details view) for a specific table

Like the custom pages, it is possible to define customized EntityTemplates for a particular table to display column values for a particular table. For this, you need to create templates (In the form of user controls) within the EntityTemplates folder as follows:

Figure : Customized EntityTemplate files for Addresses table

That is, you need to copy the existing EntityTemplate files and replace the word "Default" with the corresponding table name (In this cases, Addresses). Once done, customize the files as you like and see the outputs in Details/Edit and Insert views.

Using a customized field output for a particular table

Most of the cases, you would want to have the same look & feel and functionality for particular data types in your application. But, in some particular case, you might want to have customized look & feel or functionality for a particular data type for a particular table. For example, you may want to display textual field values with a border when the data in Addresses table is viewed. You need to perform the following steps to do this:

1. Copy the Text.ascx and create a new user control (Say, Address.ascx) and customize the User Control's markup as follows:

?

1 2 3 4

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Address.ascx.cs" Inherits="WebApplication2.DynamicData.FieldTemplates.Address" %> <asp:Label runat="server" ID="Literal1" Text="<%# FieldValueString %>" style="border:1px solid black" />

2. Create a partial class for Addresses table (If it is not there already) with a MetaData class and specify the UIHint attribute as follows:

?

1 2 3 4 5 6 7 8 9 10 11

[ScaffoldTable(true)] [MetadataType(typeof(AddressMetadata))] public partial class Address { }   public partial class AddressMetadata {     [UIHint("Address")] //UIHint(User Control's name)     public string AddressName; }

After doing the above, build the application and you will see a border around the Address data as follows:

Figure : Customize field output for table

Notice that, the borders are displayed only when the "Addresses" pages are being viewed. for any other tables, no border is going to be displayed.

Well, these are the basic customizations you might want to know about a Dynamic Data application. While building a real world application, you might learn and discover newer customzation needs and once you are used to the basic stuffs, it won't be hard for you to do those customizations. Feel free to explore the customizations and enjoy Dynamic Data.