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

we learned how to create an Asp.net Dynamic Data web application project using Visual Studio 2010 and utilize it's power to generate a CRUD application for all tables in a database. In this post we would try to understand the Dynamic Data application project structure and its internal building blocks, which would help us to customize the application later, to suit the requirement of a real world application.

When a Dynamic Data application porject is being opened in the Visual Studio 2010, it will be shown as follows in the solution explorer:

Figure : Dynamic Data application project in Solution Explorer

Except the Model1.edmx (Which has been added later as Entity data model), all other files and folders are initially created by the Visual Studio. Let's try to understand the project structure and the files/folders in this solution.

Global.asax

The Global.asax file contains the initialization codes for the Dynamic Data application and the codes are executed when the Application starts. Basically, it initializes the Data model for the application (The Entity data model in this case) using the following piece of code:

?

1 2	DefaultModel.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() { ScaffoldAllTables <b>= </b>false });

The Entity context class name is to be provided in place of YourDataContextType (In our example, which would be DynamicDataEntities) and the ScaffoldAllTables = true has to be set in order to make sure that the Dynamic Data engine generates CRUD functionality for all tables in the Entity context. It is however possible to specify not to sfaffold all tables by keeping ScaffoldAlltables = false and doing customization so that sfaffolding applies on individual table levels only. But, for now, let's keept it simple as the customization options will be discussed in the next part of the posts.

Along with Scaffolding, the routing rule is configured in Global.asax as follows:

?

1 2 3 4 5

routes.Add(new DynamicDataRoute("{table}/{action}.aspx") {    Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert"}),    Model = DefaultModel });

The above code specifies that, the URL patterns for the Dynamic Data application would be of the form "{table}/{action}.aspx" (Say, Department/Edit.aspx, or, Department/Details.aspx), and, the corresponding actions would be either "List"or "Details" or "Edit" or "Insert" for the URLs. It also sets the current Data model (Model = DefaultModel) to which the routing would be applied.

Default.aspx

It is the default page which lists the tables using a GridView and renders each Table using a Hyperlink.

Figure : Table listing in Default page

Open the Default.aspx and you would see the following code:

Figure : DynamicHyperLink

As you probably figured out, in the Default.aspx, the Tables are bound to the GridView's DataSource, and, that results in displaying table names using hyperlinks, which are generated by the <asp:DynamicHyperLink/> control inside the <ItemTemplate>.

The <asp:DynamicHyperLink/> is a Server control which is used in Dynamic Data application to display links for different actions such as edit, delete, and insert. The <asp:DynamicHyperLink/> has a "Action" property which could be set either of the values "Details" or "Edit" or "Insert" or "List" and if this property value is not set, by default, "List" is assumed. So, the following URLs are rendered by the DynamicHyperLink control for the above codes in Default.aspx (Using the format {table}/{action}.aspx):

/Addresses/List.aspx

/Departments/List.aspx

/Employees/List.aspx

Just to understand a bit more, had we set Action = "Details", then the Table names would have been rendered using the following hyperlinks (Which is of course, not applicable here):

/Addresses/Details.aspx

/Departments/Details.aspx

/Employees/Details.aspx

DynamicData\PageTemplates

The "PageTemplates" folder contains the templates for the pages for the following actions:

Details (Details.aspx) : For showing details for a particular row in a table

Edit (Edit.aspx) : For showing a particular row in a table in edit mode

Insert (Insert.aspx) : For inserting a row for a table

List (List.aspx) : For listing a table data

ListDetails (ListDetails.aspx) : For listing a table data along with displaying detailed data for a particular row

Figure : PageTemplates in Dynamic Data application

Open Details.aspx and you will see that the aspx markup mainly contains following code:

Figure : Codes in Details.aspx

Notice the DynamicEntity server control. This control is a place holder control used to load a particular control from the DynamicData\EntityTemplates folder.

Note that, the DynamicData\EntityTemplates folder contains the following three user controls:

Default.ascx  : Displays the columns values for a particular row in current table

Default_Edit.ascx : Displays the columns values for a particular row in current table in Edit mode.

Default_Insert.ascx : Displays input fields for a particular row in current table.

When <asp:DynamicEntity runat="server" /> is used in the Details.aspx, it is replaced by the user control \EntityTemplates\Default.ascx at run time. Similarly, when <asp:DynamicEntity runat="server" Mode="Edit" /> is used in Edit.aspx, it is replaced by the \EntityTemplates\Default_Edit.ascx and when <asp:DynamicEntity runat="server" Mode="Edit" /> is used in Edit.aspx, it is replaced by the \EntityTemplates\Default_Insert.ascx.

So, when a particular Page template is executed, in place of the <asp:DynamicEntity/> controls, a particular EntityTemplate controls gets executed for each of the row in the current Table.

DynamicData\EntityTemplates

As said already, this folder contains three user controls to display column values for a row in a Table in three different modes : Display, Edit and Insert.

Figure : EntityTemplates in Dynamic Data application

At runtime, either of these three user control replaces the <asp:DynamicEntity/> control in the Page template depending upon the Mode property value.

Open the Default.ascx and you will see the following markup

Figure : EntityTemplate Markup

The CodeBehind of this user control populates the column values for a particular row in the current table using the following code:

?

1 2 3 4 5 6 7 8 9 10

protected override void OnLoad(EventArgs e) {     foreach (MetaColumn column in Table.GetScaffoldColumns(Mode, ContainerType))     {         currentColumn = column;         Control item = new _NamingContainer();         EntityTemplate1.ItemTemplate.InstantiateIn(item);         EntityTemplate1.Controls.Add(item);     } }

Now, while populating the column values for a particular row, it needs to render an appropriate control based upon the type of the column value (Say, if the column value is of a Boolean type, it should be rendered using a CheckBox, or, if the column value is of a Text type, it should be rendered using a TextBox). The EntityTemplate uses a specialized control <asp:DynamicControl/> (Mark in red above) to dynamically render an appropriate control based upon the column type of the table.

The <asp:DynamicControl/> control has a property "Mode" which could have either of the three values "Edit" "Insert" and "ReadOnly". In the Default.ascx, the "Mode" property value is not specified. On the other hand, in the Default_Edit.ascx, the "Mode" property value is set to "Edit" and in the Default_Insert.ascx, the "Mode" property value is set to "Insert" to insertuct the Dynamic Data runtime that the corresponding controls should be rendered in appropriate mode depending upon the Page (In Details.aspx, a text data should be displayed using a Label, and, in Edit.aspx, a text data should be displayed using a TextBox.

The good news is, you can decide what exact control to render for each particular column type in "Insert" "Edit" and "ReadOnly" mode. The user controls inside the FieldTemplates folder let you do this.

DynamicData\FieldTemplates

This folder contains some tiny user controls as templates to configure what specific control to render for each specific data type in "Insert" "Edit" and "ReadOnly" mode.

Figure : FieldTemplates in Dynamic Data application

At runtime, the <asp:DynamicControl/> controls are replaced by one of the user controls within the FieldTemplates folder and the specific user control is chosen based upon the data type of the column and the Mode property value of the <asp:DynamicControl/> control. For example:

Text.ascx : This user control template is used to replace the DynamicControl for columns of type varchar/text for readonly mode. It has the following markup:

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

Text_Edit.ascx : This user control template is used to replace the DynamicControl for columns of type varchar/text for edit mode. It has the following markup:

1 2 3 4 5 6

<asp:RequiredFieldValidator runat="server"  ID="RequiredFieldValidator1" CssClass="DDControl DDValidator"  ControlToValidate="TextBox1" Display="Static" Enabled="false" /> <asp:RegularExpressionValidator runat="server"  ID="RegularExpressionValidator1" CssClass="DDControl DDValidator"  ControlToValidate="TextBox1" Display="Static" Enabled="false" /> <asp:DynamicValidator runat="server" ID="DynamicValidator1"  CssClass="DDControl DDValidator" ControlToValidate="TextBox1"  Display="Static" />

DynamicData\Filters

There is a Filters folder which contains three user controls (Templates) for displaying filter options for each individual rows in the listing page.

Figure : Filters

If you open the List.aspx page template you would see an <asp:DynamicFilter> controls is being used there as follows:

Figure : DynamicFilter control

The <asp:DynamicFilter/> control is used in the page markup to generate the UI for filtering table rows. Dynamic Data creates the UI by using the default filter templates that are in the \DynamicData\Filters folder. These templates support foreign-key, Boolean, and enumeration column types.

When the List.aspx page is viewed for a particular table, the Filter user controls are executed to render to filter the listing data as follows:

Figure : Filtering data in List.aspx

Others

The DynamicData\Content folder contains the resources and contents that are to be used by the tamplates. Initially this folder contains a Pager template (GridViewPager.ascx) to be used as the pagination template for the GridViews in the List.aspx, and, an "image" folder containing some images.

The CustomPages folder is initially empty. This folder would contain any custom page template that we might need to create for a particular table if we want.

Hope, this post was helpful to understand the building blocks of a Dynamic Data application project, and also to learn how the application works. The next post is going to cover the customizations options that you might need to do when you would want to use Dynamic Data for your next Asp.net application project.

next artical to learn how to customize a Dynamic Data application.