ASP.Net Dynamic Data is used to develop data driven web applications using dynamic page and field templates. In this article we will see how to customize our ASP.Net Dynamic Data web application.
Customization in ASP.Net Dynamic Data
ASP.Net Dynamic Data is used to develop data driven web applications using dynamic page and field templates. We discussed about the ASP.Net Dynamic Data in the first article and discussed about the routing in the second article. In this article we will discuss how to customize our ASP.Net Dynamic Data web application.
Structure of ASP.Net Dynamic Data Solution
Let us look into the structure of an ASP.Net Dynamic Data web application.
In this article, we will look into the PageTemplates, FieldTemplates, Filters and Content.
Page templates are used to form various web pages at runtime. We have total 5 page templates.
- Details.aspx: for displaying the details of record
- Edit.aspx: for editing a particular record
- Insert.aspx: for inserting new record
- List.aspx: for displaying the entire table in a gridview with sorting, paging and filtering support
- ListDetails.aspx: for displaying the entire table in gridview with Inline editing and CRUD operations.
All the selected tables are using the same templates for doing the CRUD operation. This will allow us to maintain consistency in web pages. For example, if we have a special effect in the Edit.aspx template, it will appear for all tables. We will discuss about how to create table specific forms in next article.
Normal List.aspx page will look like
After customization, it looks like
Here, we added just another style for the alternate rows using <AlternatingRowDtyle> tag.
Customization applied to one page template will be used for all tables and maintained the consistency across application.
We have two field templates for most of the types, as shown below. Few types like Url, EmailAddress, etc contains only one template and which uses the Text_Edit template for editing the values.
For creating our sample, I am using the DateTime_Edit.ascx template. By default, when you edit a DateTime field, the date will display in a TextBox.
After the customization of the DateTime_Edit.ascx template, when you edit a DateTime field, data will be displayed in a disabled textbox with one cross button.
When you click on the button, it opens the Calendar control to select the date.
Once you select a date from the calendar, it assigns the value to the textbox and closes.
The Code modified in DateTime_Edit.ascx file
<asp:TextBox ID="TextBox1" runat="server" CssClass="DDTextBox" Text='<%# FieldValueEditString %>' Columns="20"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="X" />
<asp:Calendar ID="Calendar1" runat="server"
Code added to the DateTime_Edit.ascx file
protected void Button1_Click(object sender, EventArgs e)
Calendar1.Visible = true;
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
Calendar1.Visible = false;
TextBox1.Text = Calendar1.SelectedDate.ToString();
There are three filters supported in ASP.Net Dyanmic Data. You can filter using Boolean fileds, Enumerable fields and Foreignkey fields.
You can add customization on the values displayed and on look and feel of the filters. These filters are appearing on top of your table display in List view and in ListDetails view.
In product table, we have a foreign key Category and one Boolean field called Discontinued. These two fields will appear as filters on top of the Product table display.
Content folder contains the Pager template used in all gridviews and also the images used in different templates of the ASP.Net Dynamic Data.
Pager template can be modified for a different look and feel for the pages displayed as part of the grid view.
ASP.Net dynamic data has a very good support for customization. Template customization removes the need for replicating the same code or customization in multiple places. We will look more on validations and business logic implementation in next article.