A simple tutorial on ASP.Net Dynamic Data with Visual Studio 2010 and JQuery

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
Using ASP.Net Dynamic Data, I can modify & customise the master page and the css file. I can customise how pages are rendered and also customise page routes and fields.

The main concept behind ASP.Net Dynamic Data is Scaffolding. Scaffolding generates elements for each table in the database. It can do so by reading metadata from the Entity Framework Data model.It also provides CRUD operations for each table in the auto-generated Web pages. It consists of page templates,field page templates and filter templates.

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


new ContextConfiguration() { ScaffoldAllTables = false });


In my case the code looks like this

 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
    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();

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.


  • hi im student,im from Turkey/─░stanbul and i need this tutorial. can you send me source code. i will be happy.

  • ok, i will send you the source code. send me your email

  • Great post. Works perfectly. Thank you.

  • Thanks - works great. :-)

  • I'm having problems understanding the '.ClientID' in the '$('#').datepicker();' within the DateTime_Edit.ascx file.

    How do I know what is correct to replace .CientID with in my dynamic data site? Will I have to have to change it to something that can use datepicker functionality for any datefield within site or have a line of code for each page's datefields?

  • I have two databases, one on my private development server, and one on a public-facing demo site. Can you help me figure out what to change in my web.config (or whereever) so that I can redefine the connection when I Publish or Install?

  • I have tried to replicate this project but using my own tables (4) from another database. When I try and run the the app I get an error "Object doesn't support property or method 'datepicker'. Both columns are set as datetime (null) in the database the same as the Customer table in AdventureWorksLT.Can you please advise.

    Can you also send me a copy of the project...

    One last question, where do I change the display properties of dropdown lists? I wish to combine 2 columns in the display


  • I don't see the frame of the calendar, I'm using IE8.
    What do I need to do to get the same look of your calendar?
    Prev Next show next to each other, basically no style is being applied.

    Thanks for any help

  • This tutorial helped me to learn dynamic data
    in asp.net .Can you please send the Source Code

  • It doesn't work for me. No jQuery action works. Any body can help?

  • I'm using jquery-ui-1.8.20.custom. It doesn't work.

  • Sir, i have read your tutorial. My problem is when you create a class customer like:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.ComponentModel.DataAnnotations;

    namespace AdventureWorksLTModel

    public partial class Customer


    after a run, it shows me an error that no entity model is register with the default page and please make scaffoladalltable to true.

  • Hi,
    I have a problem with the templates binding. I would like to ask you how i can change the binding of a combobox that has been automatically generated in a linq web application.
    For instance, if I have a combobox in the Insert page of a table and this combo is showing the description while it will insert the ID of the value represented, le't suppose that that description is not the correct one (the automatic generation takes the first text field in the table) because I would like to have the second text field binded. How can i change the field that is shown in the combo? So finally, i would like to change the binding of a combo that has been automatically generated through the use of the page templates.

  • This is not working if EnablePartialRendering is true

    how do you fix it?

  • I did exactly the same steps you have mentioned. but when i click on edit page it gave me object expected error.
    what am i missing?

  • Can you also send me the source code please? It will be a great help. Thanks.


  • An excellent tutorial. One question though How do I change the field names like from lastname to Last Name and secondly how do I manage images?

    I thank you for you Kind assistance. Have a prosperous year.

  • Please send me a copy of the source code to ms4hafiz@live.com


  • Hi there fantastic website! Does running a blog like this take a
    lot of work? I've absolutely no understanding of coding however I was hoping to start my own blog soon. Anyway, should you have any ideas or techniques for new blog owners please share. I know this is off subject however I just had to ask. Appreciate it!

  • You made some decent points there. I checked on the internet to find out more about the
    issue and found most people will go along with your
    views on this site.

  • Pls send the code

    Thanks for your work

  • hi sir, thanks for giving great post. I need source code for this.........

  • It did not work. Please send source code to tenransome@gmail.com. Thank you.

Comments have been disabled for this content.