Since last week I wanna share about this. My hand is itchy want to blog, but what can I say, busy busy busy day :)
Back to the time when I and Reza delivered a talk in MSDN Day | VS2008 Deep Dive (Nov 2, 2007), I asked the audiences "How long you need to develop a page that contains a GridView displaying data from a table that has some references to other tables (off course you want to render the foreign key column as a text of selected column of foreign tables instead of the id/key value), complete with DetailView (displayed when one row of GridView is selected), also completed with edit & delete feature (the form need to render a DropDownList for foreign key column)? Everything need to build from scratch". Some audience say two hours, some say one hour, and even 30 minutes..Wow, that's fast. And then I came up with surprising answer, "5 minutes, maximum". How is that possible? This is why...
As you might know, ASP.NET team has released an extension to ASP.NET 3.5 called ASP.NET 3.5 Extensions CTP. It was previously called ASP.NET Futures (last time I know, it's July 2007 release). I won't say much about it. Just go to http://asp.net/downloads/3.5-extensions/ to get quick reading about it. There is a good quick start at http://quickstarts.asp.net/3-5-extensions. ScottGu has a nice blog about its introduction: http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-3-5-extensions-ctp-preview-released.aspx. Right now, I will say quite much about one of delivered features, called ASP.NET Dynamic Data Support.
For you who have been playing around with ASP.NET Futures, you might already know about Dynamic Data Support. It's a cool feature that allow us to quickly develop data-driven web site without having to create any pages (for basic usage). I repeat in other words, NOT A SINGLE PAGE has to be created to create a complete data-driven web site. Can you imagine that...I don't believe my self. Unlike other scaffolding framework that has some generators to generate pages, Dynamic Data doesn't need any generators.
Last time I presented about it in MSDN Day, many audiences think I was joking at that time. They think I've prepared the aspx pages before to build such a web site. When I showed them the files inside my VS solution, they finally believed that I didn't create any pages to get a web site run. A girl in the first row of seats even said: "males banget...". Does it mean we'll be lazier to develop ASP.NET web app? I don't know :)
In fact, what I've shown to them is only Dynamic Data of ASP.NET Futures (July). In this ASP.NET 3.5 Extensions release, it brings even more. One thing that I like the most of this release is that now it's more customizable. Previously, you won't be able to change the web control used for inserting/editing a column value. Now, you can use a user control (ascx file) for that purpose. The page templates used to generate pages are now exposed to us. The great thing among other things is Dynamic Data doesn't access tables directly using ADO.NET provider, now it uses LINQ to SQL (and in the future LINQ to Entities) to work with tables and views. Further input validations are now possible at model (LINQ model) level.
OK, enough for some "basa basi busuk" :), it's time to get started.
Preparation
1. Download
ASP.NET 3.5 Extensions CTP is not included by default in .NET 3.5 SDK or VS 2008. You need to download it first at http://asp.net/downloads/3.5-extensions. Click Download the ASP.NET 3.5 Extensions Preview link and you'll be brought to the download page. Click download button and ASPNetExt.exe file will be downloaded.
2. Installation
After the file downloaded, install it. The installation should be easy.
If you use AVG Free anti virus, during installation you might be prompted following dialog. Just Ignore it. It's caused by *.html.js file naming in Silverlight. Some smart people at Microsoft should fix this.
Installation should be finished successfully. Now you're ready to get started with Dynamic Data Support in ASP.NET 3.5.
First Dynamic Data WebSite
1. Open your holly Visual Studio 2008 :)
2. Create a new Dynamic Data WebSite
If previous installation is successfully, you'll see a new WebSite template is installed for you, that is Dynamic Data WebSite. Specify the location of new website, choose language (I prefer Visual C# :P), then OK.
If everything ok, following files are generated for you in your solution. I think you are familiar with all the files/folders, except (maybe) the App_Shared folder. if you look into App_Shared folder, it contains some page templates, user controls, and images those are shared across the Dynamic Data website.
3. Add database to manage
I'll add a very known database, Northwind. Right click to solution name and click Add Existing Item. Then find database MDF file. It should be MDF file, means SQL Server database file. Did I mention that Dynamic Data currently only SQL Server? If I haven't, yes it is. If in the future, it supports LINQ to Entities, maybe other databases are supported.
After you choose Northwind database file, you'll have:
Double click to NORTHWND.MDF file, you'll get Server Explorer window. Drill down to Tables node to view tables.
4. Add new LINQ to SQL Classes
Right click to solution name and click Add New Item. Then at Add New Item dialog, choose LINQ to SQL Classes, name it Northwind.dbml, and click OK.
You'll be prompted to place the dbml file to App_Code, just click Yes. Now, you'll have Northwind.dbml file inside App_Code special folder. Double click to it and dbml designer will be opened.
5. Generate LINQ to SQL Classes from database tables
Back to tables list in Server Explorer window. Select all tables then drag them to dbml designer. After some moments to extract tables info, you'll get LINQ to SQL Classes generated for you, like following picture.
6. One last thing, you can optionally view and edit some tags in web.config.
Find following part:
<dynamicData dataContextType="" enableTemplates="false">
<mappings queryStringKeyPrefix="" pattern="~/{table}/{viewName}.aspx">
<add actions="list,details" viewName="ListDetails" templateFile="ListDetailsTemplate.aspx"/>
<!--
<add actions="list" viewName="List" templateFile="ListTemplate.aspx" />
<add actions="details" viewName="Details" templateFile="DetailsTemplate.aspx" />
-->
<!--
Special overriding cases
<add actions="list,details" tables="Products,Categories" viewName="SpecialName" templateFile="ListTemplate.aspx"/>
<add actions="list" tables="Products" templateFile="DetailsTemplate.aspx" path="~/customPath.aspx"/>
<add actions="list" tables="Orders" viewName="MyListViewName"/>
-->
</mappings>
</dynamicData>
Change enableTemplates attribute value to "true".
7. Now you're ready to view the website in browser. Right click to solution name and click View In Browser, or you can press ctrl+F5.
Eng...ing...eng...without create any ASP.NET pages, you'll get the default/home page like this.
As you might notice, this default page show the list of tables those you have added to dbml designer before.
Playing around
Click to one table name link, for example Products. You'll have this page:
As you see, the page display a GridView displaying paged records of Products table, complete with Filter controls (to filter displayed rows), column sorting, row editing/deletion/selection, paging controls, and even DetailView at the bottom. You might also notice that instead of rendering Category ID value for Category column, it renders the name value of Category. It also happens for Supplier and Order_Details. Discontinued column that has boolean type is rendered as checkbox. Such a amazing result considering not much we haven't do so far. Did I mention it is already AJAX-based? Yes it is. If you click, lets say sorting link of a column, the rows will be sorted without refreshing the whole page.
By clicking a Category link, such as Condiments, you'll get Category table page like this. Please notice at DetailView, Condiments category is automatically selected. Nice...
At the GridView, click View Products link for Dairy Products category, and you'll be back to Products page with Category filter automatically selected fro Dairy Products. So, displayed record will be filtered for Dairy Products category. Nice...
Now, click Edit button on a row, and you'll see columns are rendered as input fields. Lets say, you empty ProductName value and move to other field, you'll get:
That means some validations have been made for you. For above example, required validator has been applied to ProductName column since the column is mandatory (not null) in the Products table of Northwind database.
You can play more since many features those I can't explain all here.
Now, what about if I want to customize, lets say customize displayed columns in the GridView or add custom validation. Just wait for my next blog. Right now, I need to sleep :)