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.
