Data to Web in Five Minutes with Visual Web Developer 2005

by Mike Gunderloy

See how you can quickly get your data to the web using part of the new wave of 'Express' products that Microsoft is introducing for the Visual Studio 2005 product cycle.

OK, so I'm cheating a bit; that five minute figure doesn't include the time that it will take you to install Visual Web Developer 2005 (I'll just call it VWD from here on out). But Microsoft has done a superb job of making data-backed Web applications easy with VWD. Before I get to building a Web page, though, let's take a brief look at the tool and where to get it.

Introducing Visual Web Developer 2005

Visual Web Developer 2005 Express Edition is part of a new wave of "Express" products that Microsoft is introducing for the Visual Studio 2005 product cycle. The Express products are aimed at beginning developers, hobbyists, and others who won't care to buy the full product. VWD aims at the particular market segment of Web developers; its goal is to provide easy to use tools for building ASP.NET 2.0 applications.

Final pricing hasn't yet been announced, but it should be in the tens of dollars. Meanwhile, you can download the beta version for free from the Visual Web Developer beta page. There are actually three different choices for getting a copy:

  • Click the Download Now link to launch a Web-based installation package. This option requires you to stay connected while the installation is proceeding.
  • Click the Manual Installation link to download the entire setup to your own computer, where you can run it without being connected.
  • Order a CD-ROM for delivery if you can't manage to download a large product (with the SQL Server Express bits and the .NET Framework 2.0 you're looking at about 100 MB here).

Getting Started

When you first launch VWD, you'll be faced with an IDE that looks very much like Visual Studio .NET 2003. Oh, sure, some of the styling and shading is different, but the basic windows and layout are the same. To get started, select New Web Site from the File menu. You'll discover that you can create a variety of types of sites (ASP.NET sites, empty sites, Web services, and so on) and choose from Visual Basic, Visual C#, and Visual J# for a coding language. You'll also see that (in a departure from previous versions of Visual Studio) you can put the Web site anywhere you like on your hard drive. That's because VWD comes with its own Web server, and doesn't require you to use IIS. I chose an ASP.NET site with Visual Basic to get going.

The new Web site opens with a single page, Default.aspx. Switch the page to design view (it defaults to HTML view) and open the Data tab in the toolbox. Then drag a SqlDataSource component from the toolbox and drop it anywhere on the form. Figure 1 shows the result of this operation.

Click here for a larger image.

To the right of the control is one of the innovations of the new IDE: each control you drop gets its own menu of common tasks, which flies out from the little arrow. Click on Configure Data Source to launch a wizard that does just that, which walks you through these steps:

  • Select or create a data connection. I created a new connection to a copy of the Northwind sample database on a SQL Server on my network.
  • Save the connection string to the application's configuration file. This is optional, but it makes it easier to change connections when you switch from a test server to a production server.
  • Configure a SELECT statement. I chose to use a few of the columns from the Customers table.
  • Test the data source
    • Displaying the Data

      At this point, the form is connected to the data, but doesn't yet display any of it. That's easily remedied. Drag a GridView control from the toolbox to the form. The common tasks menu of the GridView lets you choose a data source; choose the SqlDataSource that you just created. While you're in the common tasks menu, check the Enable Paging and Enable Sorting boxes. You might also like to select the Auto Format link and choose a color scheme for the GridView.

      Now press Ctrl+F5 to launch the application. Figure 2 shows the result. The column headers are clickable to sort the data. The numbers at the bottom of the grid allow moving from page to page. And you got all of this functionality without writing any code!

      Click here for a larger image.

      While the application is running, check out the task bar. You'll find an icon for Visual Web Developer Web Server, which runs your project on an arbitrary random port. You can use this built-in Web server for all of your development and testing and then deploy seamlessly to an IIS server when you're ready to roll the project out.

Next steps

VWD offers you quite a bit of flexibility in both getting the data to the Web page and in the way that you display it. On the presentation side, the Data tab of the toolbox includes five different controls:

  • GridView, which you've already see (this control replaces the DataGrid from earlier versions of Visual Studio .NET).
  • DataList, which drops all of the records on the page in one long list.
  • DetailsView, which provides a tabular, pageable view of the data.
  • FormView, shown in Figure 3, which also gives you a view oriented towards one record at a time.
  • Repeater, which lets you create your own templates to display the data any way that you'd like.
Data in a FormView control

The toolbox also contains multiple controls to let you grab different types of data and make them available to Web pages:

  • SqlDataSource, for SQL Server data.
  • AccessDataSource, for Microsoft Access data.
  • ObjectDataSource, which can use a business object as the source of data.
  • DataSetDataSource, for data that's already been pulled into a DataSet.
  • XmlDataSource, for data in XML files.
  • SiteMapDataSource, which is specialized for building navigation controls.

To investigate further, I suggest you dig into the ObjectDataSource. Many Web developers consider it poor form to link the data directly to the Web pages that present it in any but the smallest and most trivial of applications. What the ObjectDataSource lets you do is configure your Web page to draw its data from business objects, so you get a true data layer in between the database and the application. In this beta, you still have to write a fair amount of code to build those business objects, so I can't get them done in the five minutes allotted. Perhaps in the final release, Microsoft will manage to get all of the plumbing in place for an even more compelling release!

Meanwhile, this first beta is pretty darned amazing. Remember, though, that it is beta software. Don't put it on a machine that you can't afford to seriously damage, and don't try to use it for anything that you plan to actually release. Testing with VMware or Virtual PC is the ideal way to go if you don't have a spare computer hanging around for the testing. Have fun!

Mike Gunderloy is the author of over 20 books and numerous articles on development topics, and the lead developer for Larkware. Check out his latest book, Coder to Developer from Sybex. When he's not writing code, Mike putters in the garden on his farm in eastern Washington state.

This article was originally published on Tuesday Jul 20th 2004
Mobile Site | Full Site