ASP.NET 3.5 Extensions Preview: Dynamic Data Websites Part 1, Engineering Data Centric Web Application from End-to-End

I hope you have gone through my last post that lists all pre-requisites for this tutorial and have prepared the development environment, on how to get hands on with these tutorials and walkthroughs on the newly added features in ASP.NET 3.5 Extensions Preview.

Here comes the very first tutorial in the series that’s on the Dynamic Data Websites. The reason for starting the ASP.NET 3.5 Extensions Preview tutorial series with this Dynamic Data Websites feature is to demonstrate how quickly you can engineer a data centric web application with the newly added features of ASP.NET 3.5 Extensions Preview. You will learn that the overall code required to be written by the end developer is reduced to the extent that one merely needs to write a few lines for any custom business rules or any customized view of the data which one may require as per the custom needs.

The pre-requisite, the portion I will not be covering in this tutorial for engineering a data centric web application from end-to-end is the designing of the database. I will assume that you have your database designed, tables and relationships with Primary and Foreign Keys created. The database I will be using for my tutorials as stated in the last post is the well known, Microsoft provided “Northwind” database.

So let’s start with the step by step walkthrough, in this part of Dynamic Data Website walkthrough I will be covering on how to engineer a web application with the built-in templates and features as provided by Microsoft in the ASP.NET 3.5 Extensions Preview. In the next post I will demonstrate on how to customize the generated web application by incorporating custom business rules and designing custom views as per the custom needs of your business. So, let’s get started with the step by step procedure.

1. Create a new website, by clicking the “New Web Site” item in the “File” Menu. A dialog box titled “New Web Site” appears. Select the “Dynamic Data Website” from that “New Web Site” dialog box and set the location for that new Dynamic Data Website. Here I name the website “DDWDemo” i.e. Dynamic Data Website Demo.
   
   


2. A new website containing the files/structure as shown below is created.
   
   


3. Now we need to add database to our web application, for that I create the App_Data folder in my web application and drag n drop the mdf file of the “Northwind” database to it.
   
   


4. Now we have our database added to our web application. I will start with generating the Business Entities for my Northwind database, so that I map my data in the Relational World to my Object Oriented World, and doing so is facilitated by the “LINQ to SQL Classes” feature of the ASP.NET 3.5 Extensions Preview. I will create a new LINQ to SQL Classes instance, which are internally mapped to relational objects, by right clicking on my website and selecting Add New Item. I select the LINQ to SQL Classes template and name it SCM.dbml (here SCM stands for Supply Chain Management and not the Software Configuration Management) and click Add. A prompt appears asking me to automatically put the files in the App_Code folder; I click on ‘Yes’ for it, and my LINQ to SQL Classes files is added in my project. This file provides me an Object Relational Designer through which I can easily generate my DataContext Class as well as the ADO.NET Entity Classes.
   
   
   


5. Now what we do is that I double click on my Northwind database in the App_Data folder, it will open the database in the Database Explorer. I expand all the tables under it, select all the tables and drag and drop them on the left pane of the SCM.dbml file, that’s the object relational designer surface to auto generate my Data Classes for all the tables I have dropped on it. It will also automatically create the relationships among the generated classes by improvising them form Primary / Foreign Key Relationships in the Database. You can view the code generated by this action by expanding the SCM.dbml file and browsing the SCM.designer.cs file. The SCM.designer.cs file will contain the definition of SCMDataContext that allows access to all tables and handles the CRUD operations on the Business Entities through LINQ queries, moreover the SCM.designer.cs file contains definition of all the business entities, which are actually the ADO.NET Entities. One thing to note about them is that these generated business entities are defined as partial classes and also provides some extensibility methods (we will learn using them in part 2 of this tutorial).
   
   
6. So, by now we have our Business Entities defined which are directly mapped to the Tables. Now we need to present them in a good way to the user so that User can perform the CRUD (Create, Read, Update and Delete) operations on these. This is facilitated by the use of templates defined in the Dynamic Data Website template. What we need to do is to set the enableTemplates attribute of the dynamicData section in web.config file to true. I can also optionally set the dataContextType attribute of dynamicData to SCMDataContext. So here, what I have done is that I have enabled the templates for the List and Details view of all the Business Entities defined in the SCMDataContext. By default it will use the ListDetailsTemplate.aspx for all the business entities. The ListDetailsTemplates.aspx is defined in the subfolder App_Shared/DynamicDataPages so that I can customize it to give a personalized look and feel. This template uses the master page defined in the website as MasterPage.master which I can customize too for the personalized look and feel; here I customize the main heading of the website to be ‘Supply Chain Management’ instead of dynamic data controls site. Just a food for thought that the ListDetailsTemplates.aspx uses the newly introduced Dynamic Data Controls and I would recommend having a look at these templates to get some idea on how it’s utilizing the features of ASP.NET 3.5 Dynamic Data Controls behind the scenes.
   
   


7. Now, start the web application by clicking on the Start Debugging button in the toolbar of Visual Web Developer 2008. A prompt stating the Debugging isn’t enabled, simply click OK button on it to enable debugging and a web application with the default templates appears in front of you.
   
   

So, here in this tutorial, we have learnt on how to generate a Data Centric Web Application using ASP.NET 3.5 Extensions Preview, in a few clicks. In the second part of this tutorial which I will be posting in a day or two, I will demonstrate on how you can customize the Views for some of the entities, use some other template for some other entities as well as enforcing you custom business rules in the Business Entities.

You can download the complete source code of this walkthrough as a single package from here.