Generate Data-Based Web Sites With Blinq

Blinq 1.0 is a prototype of an extension to DLinq (now called LINQ to SQL) that auto-generates a complete data-entry and editing ASP.NET 2.0 Web site. See how to create a 25-page Web site from the Northwind sample database in less than a minute.

Visual Studio's propensity to auto-generate Visual Basic or C# code is a controversial topic. You might—like Charles Petzold—consider .NET code generation by VS to be a pernicious compulsion/obsession. Many developers believe it's a beneficial or even indispensable VS feature. Regardless of your position on the desirability or quality of VS's auto-generated code, it's a reasonably sure bet that Orcas—the code name for VS v.Next—will generate much more code for (or against) you than VS 2005.

For example, running the SqlMetal.exe utility under Orcas to generate LINQ to SQL (formerly DLinq) object-relational mapping (ORM) code for a simple, eight-table Northwind database adds 2,089 lines (including empty lines) to the Northwind partial class and expands Northwind.vb to 61K (see Resources). Of course, LINQ to SQL ORM code pales in comparison to that for a typed Northwind DataSet, which weighs in at 9,204 VB 2005 lines (551K), and might become even larger in Orcas.

The ASP.NET v.Next team's first entry in the "Orcas Code Generator Sweepstakes" is the new Blinq 1.0 prototype that went public on June 13, 2006. Scott Guthrie gave the first Blinq demonstration to developers in his June 15 "ASP.NET: End-to-End—Building a Complete Web Application Using ASP.NET 2.0, Visual Studio 2005, and IIS 7" Tech•Ed 2006 presentation. According to Blinq's developer, Polita Paulus, "Blinq prototypes functionality we are building into our next version of ASP.NET." Paulus, by the way, wrote the ASP.NET 2.0 GridView, DetailsView, and FormView controls.

Blinq.exe is a deceptively simple command-line tool—similar to SqlMetal.exe for LINQ to SQL—that auto-generates a complete, fully navigable Web site for viewing, editing, adding, or deleting data in a SQL Server database. First, I'll describe how to use the Blinq 1.0 prototype bits to create a 25-page ASP.NET 2.0 Web site from the Northwind sample database in less than a minute. The site's total size is slightly more than 1.0 MB, of which 115K is auto-generated; LINQ and Blinq assemblies copied to the …\bin folder contribute 889K. Next, I'll show you how to navigate the site and perform typical data-entry and editing operations in GridView and DetailsView controls. Finally, I'll briefly describe the basics of customizing master-page and homepage layout to make more efficient use of display real estate.

Blinq 1.0 requires VS 2005 Standard Edition or higher, or Visual Web Developer 2005 Express, and SQL Server 2000 SP4, 2005 SP1, or Express SP1. You must install the LINQ May 2006 Community Technical Preview before running the BlinqSetup.msi. The installer creates a \Program Files\Microsoft ASP.NET\Blinq folder, which contains DLLs for the project's \bin folder, and adds BrowserFiles and ThemeFiles subfolders. IIS 5.0+ on the test machine is optional.

Before running this article's sample code, execute the InstNwnd.sql sample script to install the Northwind database in a SQL Server instance. Prevent bloating the app with 12 pages that have minimal or no significance by deleting the CustomerCustomerDemo, CustomerDemographics, Employee Territories, Territories, and Region tables before running Blinq.exe.

Run Blinq.exe to Create the Northwind Site
Even if you don't anticipate the need for a Blinq-style data-entry and editing site, it's worth a test drive to become more familiar with the use of ASP.NET 2.0 master pages, SiteMaps, and GridView and DetailsView controls bound to business objects tied to database tables. Generate a test VB Web site in the \Blinq\BlinqVB folder from the Northwind database on localhost by running Blinq.exe from the \Program Files\Microsoft ASP.NET\Blinq folder with this command-line syntax:

Blinq.exe /t:c:\Blinq\BlinqVB /database:Northwind 
    /vDir:BlinqVB /l:vb

The /t: argument sets the new Web site folder. /vDir: configures an optional IIS BlinqVB virtual directory, builds the site, and opens its home page in Internet Explorer. The optional /l:vb switch specifies VB code; /l:cs or omitting the switch delivers C#. Use this command to generate a C# version that works with SQL Server Express and uses the Cassini development Web server only:

Blinq.exe /t:c:\Blinq\BlinqCS /server:.\SQLEXPRESS 

The sample code includes BAT files for VB and C# sites from Northwind running on SQL Server 2005 and a C# site for SQL Express. Table 1 contains the complete syntax for executing Blinq.exe.

The Default.aspx home page opens a few seconds after you execute Blinq.exe with the /vDir: argument. A SiteMap Menu control on the left has buttons that open paged GridViews of each table. The unmodified page's bulleted list in the main content area to the right duplicates the SiteMap items (see Figure 1). A master page (MasterPage.master) and default stylesheet (…\App_Themes\Default\DefaultStyles.css) unify the entire site's look and feel. Minor modifications to DefaultStyles.css and MenuStyles.css, which I'll describe later, minimize data display area and align the tops of the menu and content regions.

Each table generates a TableName.aspx page with a paged GridView control, TableNameDetails.aspx page with a DetailsView control, and a NewTableName.aspx page with a DetailsView that defaults to Insert mode. Users navigate the site with SiteMap buttons and breadcrumbs, as well as HyperLinkField objects in GridView and DetailsView controls.

  • Click one of the table buttons to open an editable, paged GridView for the table's data. You can sort the data by clicking any column header.
  • Scroll the GridView to the right to expose HyperLinkFields that open a GridView for a child table, such as Orders for the Customers table, and a DetailsView of the selected record (see Figure 2).
  • The DetailsView contains a View TableName link that opens a GridView of the child records for the selection, such as Orders for CustomerID 'ALFKI' (see Figure 3).
  • In GridViews with foreign key columns, such as Orders.CustomerID or Orders.EmployeeID, click the cell value to open a DetailsView of the record in the related table. Follow the breadcrumbs at the top of the page to display the GridView for the related table or return to the default page.
  • To add a new record to any table, select the table in the SiteMap menu and click the New TableName button or open a NewObjectName.aspx page's DetailsView control in Insert mode. Alternatively, click the Create New ObjectName button at the bottom of the GridView page (see Figure 4).

You can delete a record from a GridView or DetailsView if the record has no dependent records or if you've specified cascading deletions for the SQL Server table. Otherwise an untrapped exception occurs when you invoke the db.SubmitChanges() instruction of the ObjectName class's Delete method in the StaticMethods.vb or .cs file. (If you execute Blinq.exe with the /pageDataSource switch, the exception occurs in the PageName.aspx.vb or .cs code-behind file.) Future Blinq previews might add a standard Try ... Catch block.

Customize the Master and Default Pages
It's probably possible to use an out-of-the-box Web site that you create with Blinq 1.0 for simple data-entry and editing chores, but most ASP.NET developers undoubtedly will want to customize site design and navigation. Removing excessive whitespace from the layout, aligning the tops of the SiteMap Menu control and the mainContentPlaceholder, and reducing the menu's width requires only minor surgery to the DefaultStyles.css and MenuStyles.css stylesheets (see Figure 5).

Changing the SiteMap Menu control's width from 160px to 100px requires changing only these two styles in MenuStyles.css:

.PrettyMenu ul.AspNet-Menu, 
.PrettyMenu ul.AspNet-Menu ul
       width: 100px; /* was 160px */
       font-family: Arial, sans-serif;
       font-size: 1em;
       border-bottom:1px solid #B2D0DF;

.PrettyMenu ul.AspNet-Menu ul
     left: 99px; /* was 159px */
     top: 0px;    /* was 3px */

Aligning the tops of the menu and main content elements requires these two changes to DefaultStyles.css:

#menu {
       top:2px;      /* was 55px */
       width:120px; /* was 180px */

Finally, replace the Default.aspx page's asp:BulletedList control with an asp:Label control that contains ordinary text and a <ul> element (see Listing 1), delete from DefaultStyles.css the four existing styles for the asp:BulletedList, and add this style for the new <li> text elements:

/* Added style for the text-based li */
#maincontent ul li {margin: 10px 20px 10px 20px; 
       list-style-type: disc; }

Install the LINQ May 2006 CTP bits, if you haven't already done so, download and run the Blinq 1.0 installer, and then get and unzip this article's sample VB code to a \Blinq\BlinqVB site on your development machine. After you've explored the 25 auto-generated pages, you'll undoubtedly be impressed with the quality of the auto-generated code, especially for version 1.0 of a complex tool. (Disregard the 100+ IntelliSense errors for the VB code; they're related to dynamic references and don't affect compilation. C# examples show no errors after the first compilation.)

Blinq should cause doubters to change their view of the purported evils of VS code generation. You might even be tempted to put a customized Blinq-generated Web site into production. Don't do it—there's no go-live license yet for Blinq 1.0 or the LINQ May 2006 CTP.

About the Author

Roger Jennings is an independent XML Web services and database developer and writer. His latest books include "Special Edition Using Microsoft Office Access 2007" (QUE Books, 2007) and "Expert One-on-One Visual Basic 2005 Database Programming" (WROX/Wiley, 2005). He’s also a VSM contributing editor and online columnist and manages the OakLeaf Systems blog. Jennings’ Code of Federal Regulations Web services won Microsoft’s 2002 .NET Best Horizontal Solution Award. Reach him at

comments powered by Disqus
Upcoming Events

.NET Insight

Sign up for our newsletter.

I agree to this site's Privacy Policy.