In this post I would like to talk about ASP.Net Dynamic Data. ASP.Net Dynamic Data is a feature that has been released in ASP.Net 3.5.I know a lot of ASP.Net developers that have never used it. Well, one thing I can say is that it can save us a lot of time.

We, developers, have a really bad reputation for being lazy....Well, I do not see any problem with that if the end product and the quality of code is first class.

99% of the applications I develop are data-driven. One can use ASP.Net Dynamic Data to create data-driven applications without writing a lot of code. I am huge fan of LINQ to SQL and Entity framework ORM and ASP.Net Dynamic Data besides being fully customizable can levarage those ORM technologies.I use Entity Framework because this is what Microsoft suggests is the data access technology it heavily invests.So some knowledge of Entity Framework is required.

The key features of ASP.Net Dynamic Data are

• Automatic Validation based on constraints defined in the data model
• Support for control for the markup that is generated by some controls
• Support for many to many relationships
  
• Data filtering

I will demonstrate the various features of ASP.Net Dynamic Data with hands on examples.

I assume that you have access to a version of SQL Server and AdventureWorkLT database.

If you do not, you can download and install the free SQL Server Express edition from here. If you need the installation scripts for the sample AdventureWorkLT database, click here

1) Launch Visual Studio 2010 (express edition will work fine). Create an empty ASP.Net web site from the available templates (ASP.Net Dynamic Data Entities Web Site) and choose a suitable name for it. Choose C# as the development language.Choose the file system as the Web location.

2) Have a close look at the files and folders generated.Have a look at the FieldTemplates folder and the PageTemplates folder. All pages inside there are fully customisable.It would take us a lot of time to write this amount of code. It is handy to have all this code out of the box.

3) Now we need to create our model.As I said previously I will use Entity Framework. I will use the database first paradigm. That means I will create the model from an existing database(AdventureWorksLT). If you do not know how to do that, have a look at this post of mine.Follow steps 4 to 9.Make sure you include all the tables in your model.

4) Then we need to register our model.We need to go to Global.asax file. Make a note that there are many comments in this file.

I am going to present here the comments as well,

   // Uncomment this line to register an ADO.NET Entity Framework model for ASP.NET Dynamic Data.
   // Set ScaffoldAllTables = true only if you are sure that you want all tables in the
   // data model to support a scaffold (i.e. templates) view. To control scaffolding for
   // individual tables, create a partial class for the table and apply the
   // [ScaffoldTable(true)] attribute to the partial class.
   // Note: Make sure that you change "YourDataContextType" to the name of the data context
   // class in your application.

You must find and uncomment this line of code

DefaultModel.RegisterContext(typeof(YourDataContextType), 

new ContextConfiguration() { ScaffoldAllTables = false });

In my case the code looks like this

 DefaultModel.RegisterContext(typeof

(AdventureWorksLTModel.AdventureWorksLTEntities),

 new ContextConfiguration() { ScaffoldAllTables = true });

 I set ScaffoldAllTables = true because I want all the tables in my model to scaffold.

 5) Run your application and have a close look at the many features I have out of the box. You will see that you have a webpage for each table and you can insert new items, select items,delete items,edit items. Have a look at the pics below

 6) Now we want to have only one table appearing (e.g Customers) in our scaffolding model. We must set ScaffoldAllTables = false

Then we need to go and apply the [ScaffoldAllTable(true)] attribute to the partial class that we will create for that table. So we add a new item , a class file , and I name it Customer.cs

The code for my partial class should look like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
 
namespace AdventureWorksLTModel
{
 
    [ScaffoldTable(true)]
    public partial class Customer
    {
    
    }
 
}

Build and run your application.You will see only the Customers table appearing the website.

7) Remember that we can change everything inside the ASP.Net Dynamic Data website.You can change the master page and the css files.

I will show you now how to modify data fields.First set ScaffoldAllTables = true.

Run your application again and select the Products table and click Edit in the first row. In the you will see a value for the  SellStartDate field of 01/06/1998 00:00:00

We want to modify the data field in use so the user will not have to write on his own the date.We want to have a Date Picker component instead of the simple textbox.

So we go back to our project and select FieldTemplates and then DateTime_Edit.ascx which is a user control.This is what is used any time a datetime field is rendered.

8) I am going to use JQuery Library to achieve this functionality. You can navigate to the JQuery website and download the latest version of JQuery. Place it in the Scripts folder.

Now I need is to get the DatePicker functionality.We can see the DatePicker functionality if we click here .Now you can download everything if you click here.

You will have a jquery-ui-1.8.14.custom.zip file. Extract the files and folders from the .zip file.Add a new folder in your website. Name it NewStyles.

Inside there place the "ui-lightness" folder that you extracted from the .zip file. Also place in the Scripts folder the jquery-ui-1.8.14.custom.min.js file , that you will also find from the .zip file.

 9) Go to the master page and add the recently download .js file and the .css file from the "ui-lightness" folder  .In my case the code inside the head section of the Site.master file looks like this

<link href="~/Site.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<link href="~/NewStyles/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet"
 type="text/css" />

 10) Now we need to add some code to the DateTime_Edit.ascx user control.

  Add this bit of javascript code in the top of the DateTime_Edit.ascx file.

  <script type="text/javascript">
    $(document).ready(function () {
        $('#<%=TextBox1.ClientID %>').datepicker();
    });
 
  </script>

First we want to know when the DOM is loaded or ready. Have a look the ready function here

With this line of code, we find the textbox (by using ID selectors) and add a datepicker functionality to it. We use the Textbox1.ClientID to make it possible to find the Client ID of the Textbox control.

$('#<%=TextBox1.ClientID %>').datepicker();

 11) Run your application and then select a table-page that has datetime fields. Click on one of them. Note the DatePicker control popping up.Have a look at the pic below

Hope it helps!!!!Email me if you need the source code.