Gary Pretty’s Blog

ASP.NET 3.5 Dynamic Data Tutorial Series – Part 1 – What is Dynamic Data and creating a basic dynamic data web site.

May 7th, 2008 Posted in .Net, Tutorials

Last week I attended the MSDN Roadshow 2008 (you can read my write up of the event along with some useful links here), and one of the topics presented on the day were the upcoming ASP.NET 3.5 Extensions.  Mike Ormond did an excellent presentation on the upcoming release including a hands on demo using some of the preview releases currently available.

In this tutorial series I am going to focus on the Dynamic Data controls within the extensions and try and give some guidance on what Dynamic Data is, what it can do for you and how to do it.

In this post, Part 1, I am going to discuss what Dynamic Data is and how you can very quickly create something functional.  In future posts I will look at some of the more advanced topics and techniques available.

This is my first tutorial series, so please do post any comments you have (good or bad )!

What is Dynamic Data?

Dynamic Data is extremely cool.  In short, it allows a developer to create a data driven web application that allows you view data within a database, insert, update and delete records, all rounded off with automated validation to go with it.  “Great…but I can already do that”, I hear you say, well that’s the best bit, the whole process of getting a web application, with master / detail web forms and full editing capabilities, up and running only takes a couple of minutes!

Once created, the resulting application can be customised very easily in order to display data to suit your needs, modify the way in which input occurs , for example, wherever the user inserts or edits a date field, you might want to have a Microsoft .Net Calendar Control instead of having them type the date in manually. You can also set logic on your database fields from within the application.  For example, you might want to add a range to an integer field or check for a pattern within a string using regular expressions.  Again, this is all possibly and relatively simple to accomplish.

Ok, so you know what Dynamic Data is now, so lets have a look at what you need to create a Dynamic Data web site and follow this tutorial.

 

Downloading the preview and getting the right tools

Firstly, for this tutorial you are going to need a copy of either Visual Studio 2008, or Visual Web Developer Express 2008.  Visual Studio Web Developer Express 2008 is a free IDE from Microsoft for developers to use, if you don’t have a copy of Visual Studio then I would definitely suggest checking out the Express edition web site here.

Next you need to download and install the ASP.NET 3.5 Extensions from here.  This package contains different parts that make up the extensions, so of which are now outdated, so you will also need to download the latest release of the ASP.NET Dynamic Data controls from here.

Of course, as we are going to create a data driven web site, you need a database. If you don’t already have it, go and download a copy of SQL Server 2005 Express Edition from here.  You can use any database with this tutorial, but I am using the Adventure Works sample database for SQL Server 2005 available from here (it is the top link that you will need, AdventureWorksDb.msi).

I won’t go into setting up your sample database here, or installing / configuring SQL Server and Visual Studio.  If you need any help though, the web is awash with assistance, just do a Google search and you’re sure to find a tutorial / tips site to help you.  Obviously, there is supporting documentation for everything as well.

 

Building your first Dynamic Data Web Site

1.  Open Visual Studio / Visual Web Developer.  By now you should have all of the necessary preview extensions & controls installed.  Select File -> New Web Site.  Now that you have installed the Dynamic Data preview installed you will notice that there is now a couple of new project templates available for you to use and for this example we are going to use the Dynamic Data Web Application template as shown below.

 

2.  Now we need to establish a connection to the database.  To do this, click on View -> Server Explorer. Once the Server Explorer tab is open, right click within it and select New Connection.

You should then see a connection settings window shown to the right.

Enter your database server details here and select the database you wish to work with.

 

 

 

 

 

 

 

3.  Now that we have configured our database connection, we should now be able to see our database listed within the server explorer and you should have a tree view of your database where you can see your tables, views, stored procs etc.Now, we have to define our data model.  Sound scary? Well don’t worry, because this is painfully easy as well.Within your Solution Explorer, right click on the project name and select Add New Item…

You will notice that you will now be able to select a “LINQ to SQL Classes” item.  

Add one of these items and you will be asked if you want to create an APP_CODE folder, say YES to this as this is required for your data model.

 

4.  Once Visual Studio / Visual Web Developer has finished creating the new LINQ to SQL Classes item, you will be presented with a blank window for the new item (.dbml file).  To create your model, simply drag the tables you want in your web site from your database in Server Explorer into this window like below.  You will notice that will even persist the table relationships already setup with your database.

I have chosen to drag the tables associated with Person information into my model.When you are happy with your selection, save this dbml file.

 

5.  The one last thing we need to do before our new data driven web application will work is to edit a line in our configuration file.  The security minded people at Microsoft have switched off the automatic creation of all table ’scaffolding’ by default and we need to enable it.  We are going to enable it for all tables in the model, but in a real world situation you would enable it only for tables you actually wanted to expose though this method.Open your Web.Config file and amend the following line to read as true like below.

<dynamicData dataContextType=“” enableTemplates=“true”>

6.  Now run your web application and hopefully, you should have a functional web application that allows you to View, Insert, Edit and Delete information within your database, like the one below.

 

What’s Next

Now that you have your working application, have a good look around.  In the next part of this series, we will look at the application itself and what you have got right out of the box and point out a few things that you might not have noticed.

Tags: .net 3.5, Dynamic Data, sql server