Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

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

 

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.

Comments

Onur VAROL said:

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

# July 5, 2011 8:30 AM

nikolaosk said:

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

# July 12, 2011 3:59 PM

Adam said:

Great post. Works perfectly. Thank you.

# July 27, 2011 9:22 AM

John said:

Thanks - works great. :-)

# August 3, 2011 1:21 AM

Eld said:

I'm having problems understanding the '.ClientID' in the '$('#<%=TextBox1.ClientID %>').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?

# September 14, 2011 12:44 PM

WombatEd said:

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?

# November 7, 2011 10:59 PM

graham_jarvis_fgt said:

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

Cheers

# February 24, 2012 11:22 PM

Jena said:

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

# March 6, 2012 3:44 PM

Vinod T Abraham said:

This  tutorial  helped  me  to  learn dynamic  data

in asp.net .Can you please  send the  Source Code

# April 2, 2012 2:32 AM

karadous said:

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

# May 9, 2012 4:15 PM

karadous said:

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

# May 10, 2012 3:27 AM

Abhishek said:

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

{

   [ScaffoldTable(true)]

   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.

# June 27, 2012 4:28 AM

Cracci said:

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.

# June 28, 2012 6:50 AM

Ashish said:

This tutorial is good but my question is what should be the ideal scenario where i can implement this type of project

# July 4, 2012 3:55 AM

Q said:

This is not working if EnablePartialRendering is true

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

how do you fix it?

# July 11, 2012 8:53 AM

Nav said:

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?

# October 4, 2012 7:05 AM

Billy said:

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

andrei_bogshot@yahoo.com

# November 18, 2012 7:51 PM

mr41971 said:

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.

# January 2, 2013 12:58 AM

Hafizullah Mahmudi said:

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

thanks

# February 15, 2013 2:03 AM

Douglass said:

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!

# February 22, 2013 4:03 PM

Rizzo said:

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.

# February 26, 2013 3:05 AM

Mathew P said:

Pls send the code

Thanks for your work

# March 2, 2013 3:34 AM

saki said:

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

# March 8, 2013 4:31 AM

mr41971 said:

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

# April 21, 2013 12:22 PM