Dynamic data site

hi guys! To all that attended WebRampup today, I send my heartfelt thanks. Here is a step by step guide to create a dynamic data site. Here you will see where the demo went wrong, please add a comment to this blog if you find the reason (I found where I went wrong a few minutes after the demo hahaha!)

Dynamic Data

Dynamic Data is a quick and easy way to build DataDriven websites using scaffolding. Pages can be customized into templates and modification of the pages will happen only on one place.

This also works with the several ORM models already existing like LinQ to SQL and the Entity Framework. For this exercise we will use the Entity Framework.

Tools

Visual Studio 2008 with SP1

Northwind.MDF

Let’s get started.

We will now create a simple data driven Dynamic Data website. To do this, you simply click File-New WebSite from Visual Studio and since we are going to use the Entity Framework, we choose a DynamicData Entities Web Site.

clip_image002

This is going to be a data driven website so we will need a database. Add the NorthWind.mdf file in the App_Data folder by either clicking Add Existing item or dragging and dropping the file to the App_Data folder from Windows Explorer.

You should have something like this:

clip_image004

Next we add and EntityFramework Data model.

clip_image006

We follow the wizard and select the MDF file we added earlier..

clip_image008

Then it will ask you which objects from the database you want to be added. We choose the tables by ticking the checkbox that corresponds to the tables.

Now we have a datamodel that we can use for our website.

Next we will “introduce” this data model to the website by modifying a pre-commented out line in our Global.Asax file from this:

clip_image010

To this:

clip_image012

What we have done here is registered the datamodel with the registercontext method and set the ScaffoldAllTables property to true. Run the application and you should have something like this:

clip_image014

As you can see, we already have a running data driven website with all the tables in the database. All these entries can already be clicked (I know you tried). And if you didn’t try, I suggest you run the website again and see the cool features that you have already created like

The ability to drill in to a table and display the data with Filters!

clip_image016

The ability to go to the categories table from the Products table view

clip_image018

So in its primary form, you already have a robust data driven application created by..

1. Creating a DynamicData website

2. Creating a data model

3. Registering your data model to your view.

Three steps.

I would like you to amaze yourself now by running the website again. Clicking on the Edit link on any of the products and try to Edit the data displayed.

You should now notice that there are also already embedded validation for your data entry screen!

Here I try to enter the letter “e” into the Units In Stock textbox and it is validated as a wrong entry. This is based on the datatype that the data model was able to read from the databse.

clip_image020

But I know that creating a fully functional, validating, drill deep into data, kick-ass data driven website is not enough for you.

The look and feel of the site of course is too standard. So the question arises

“How do I edit the site?”

This actually comes real easy because everything has been done in templates. So we just find the template for what we need to edit and go ahead and edit it.

What I do is I go to the templates folder and edit the template that I want.

clip_image022

From this:

<%@ Control Language="C#" CodeFile="Text.ascx.cs" Inherits="TextField" %>

<asp:Literal runat="server" ID="Literal1" Text="<%# FieldValueString %>" />

To this:

<%@ Control Language="C#" CodeFile="Text.ascx.cs" Inherits="TextField" %>

Hello <asp:Literal runat="server" ID="Literal1" Text="<%# FieldValueString %>" /> World

And you guessed it right, now when I run the application, all textboxes will have the text “Hello” and “World” added at its left and right side.

clip_image024

Now what if we want to change a bigger part, say.. we want to show the details of a product not on a separate page but on the same page as the Products table?

We do this by changing the routing. By default, the Edit link will route the data to another page. What we need to do is to route it on the same page. To accomplish this, we edit the routing configuration in the Global.Asax file.

If you scroll to the middle of the Global.Asax file, you will see this:

// The following statements support combined-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using the same page. To enable this mode, uncomment the

// following routes and comment out the route definition in the separate-page mode section above.

//routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") {

// Action = PageAction.List,

// ViewName = "ListDetails",

// Model = model

//});

//routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") {

// Action = PageAction.Details,

// ViewName = "ListDetails",

// Model = model

//});

Read on to the comments and see that this part handles or supports combined-page modes and to enable it, we just follow the instructions by editing it to look like this:

// The following statements support combined-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using the same page. To enable this mode, uncomment the

// following routes and comment out the route definition in the separate-page mode section above.

routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx")

{

Action = PageAction.List,

ViewName = "ListDetails",

Model = model

});

I also commented out the separate-page mode of routing.

// The following statement supports separate-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using separate pages. To enable this mode, uncomment the following

// route definition, and comment out the route definitions in the combined-page mode section that follows.

//routes.Add(new DynamicDataRoute("{table}/{action}.aspx") {

// Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }),

// Model = model

//});

Then we run the application again and we have this..

clip_image026

Notice how the details view changes when we click a different product or any other object in the database. Customers, Persons etc are now all displayed in the combined page mode.

Now what if you want to change the routing just for the Products table? To do this, we must again enable the separate-page for the entire site and specify the single-page mode for the products table only.

You will also need to move the routing for the Products table above the Separate-Page routing so it will take effect before the separate-page routing.

Your Global.Asax should look like this:

model.RegisterContext(typeof(NORTHWNDModel.NORTHWNDEntities), new ContextConfiguration() { ScaffoldAllTables = true });

routes.Add(new DynamicDataRoute("Products/ListDetails.aspx")

{

Action = PageAction.List,

ViewName = "ListDetails",

Model = model,

Table = "Products"

});

// The following statement supports separate-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using separate pages. To enable this mode, uncomment the following

// route definition, and comment out the route definitions in the combined-page mode section that follows.

routes.Add(new DynamicDataRoute("{table}/{action}.aspx")

{

Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }),

Model = model

});

Run the application and see the changes.

What we have seen and learned here is that with DynamicData, it is both fast and easy to create a data driven website with more than just the basic CRUD (Create Read Update Delete) operations but also with filters and sorting.

We have also learned how highly customizable the resulting site is because it comes as templates.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s