| By Alex Homer, Dave Sussman | Article Rating: |
|
| July 31, 2006 02:30 PM EDT | Reads: |
19,354 |
ASP.NET 2.0 contains a raft of new features that reduce the code you need to write and save you time and effort when building dynamic and interactive Web pages and applications. To illustrate this, and so that you get a better feel for the way all these features combine to provide the overall ASP.NET 2.0 development experience, this excerpt presents a scenario-based demonstration focused on a day in the life of a developer who is in the process of fulfilling the requirements of a fictional customer. Although this may seem a contrived approach, it actually follows the general process of evolving your applications to meet the needs of the users. More than that, it shows you how all the various features in ASP.NET 2.0 fit together and interact to give you improved productivity and a simpler development process. Along the way, you will see the process steps required for:
Using a data source control and GridView to display data
- Enabling sorting and paging for the rows
- Providing a row editing feature
- Adding filtering to select specific sets of rows
- Displaying single rows in a form for editing
- Working with data exposed through a business object
- Caching the data to reduce database access
- Using a master page to give a consistent look and feel
- Adding a menu and other navigation features
It's nine-thirty in the morning, and your second cup of coffee is just starting to take effect when the phone rings. At the other end is Margaret, the CEO of AdventureWorks Trading Inc., and she is in no mood for light conversation. It seems that, although they love the new Web site you created for them, they just discovered that there is no page for their staff to view lists of products. So you commit to provide one, drain the remnants of the now cold coffee, and fire up Visual Studio 2005.
Using a Data Source Control and GridView to Display Data
To build almost all types of data access pages, you need to be able to get the data from the database and display it in a Web page. In previous versions of ASP and ASP.NET, you would already be thinking about creating a connection to the database, building a Recordset or filling a DataSet, and then either iterating through the rows to create an HTML table (in ASP 3.0) or taking advantage of server-side data binding in ASP.NET 1.x. However, in ASP.NET 2.0, the process is much easier. You start by using the Server Explorer window (or the Database Explorer window in Visual Web Developer) to create a connection to the database (see Figure 1).
Now that you have access to the database, you need a new Web page. This will be part of the existing AdventureWorks Web site that you have already built, and so you must first open this site. Visual Studio 2005 and Visual Web Developer allow you to open an existing site using a range of techniques, including directly from the file system, from the local IIS folders via HTTP, or from a remote site via FTP or the Microsoft FrontPage Extensions (see Figure 2). Next, you create a new Web Form, switch to Design view, and drag the Product table from the Server/Database Explorer window onto the new Web Form. This adds a SqlDataSource and a GridView control to the page and you can run the page to see the results. Okay, so it isn't very pretty and probably contains columns that you don't want to display, but it really does save you time in getting the basics of the page up and running--and you haven't written any code at all! (see Figure 3).
You can now fine-tune the page to provide just the features you want by removing columns, adding formatting to the values, and applying one of the predefined (Auto Format) styles to the GridView. The Visual Studio 2005 and Visual Web Developer page designers provide a "tasks" pane for many of the rich controls such as the GridView that makes it easy to complete all these tasks. The tasks pane appears when you first add a control to the page. You can also open it by clicking the small arrow icon that appears when you move the mouse over the control (see Figure 4).
The tasks panes contain a set of links that open dialogs or start Wizards, depending on the control type. For the GridView control, as you can see in Figure 4, the tasks include applying an Auto Format, selecting the appropriate data source control, enabling various features directly supported by the new GridView control in ASP.NET 2.0, and modifying the columns displayed by the GridView control. You only want to display the six most useful columns, so you can remove the rest from the list. Moreover, you want the StandardCost and ListPrice columns to display as currency values, so you can specify this in the DataFormatString property for these columns (see Figure 5).
Enabling Sorting and Paging for the Rows
The GridView control now displays the required columns from the database table, but it is not very easy for the user to find the rows they want to view. All the rows appear in one long list sorted by product number. It would be helpful if users could sort the rows in a different order (perhaps by name when they don't know the product number), and it would also be nice to be able to limit the display to a specific number of rows and provide navigation controls so that they can see separate "pages" of rows.
Prior to ASP.NET 2.0, you would now be writing code to sort the source rowset into the required order, and then connecting this code up to controls in the page. In ASP.NET 2.0, it is all automatic. You just turn on sorting and paging with the checkboxes in the tasks pane (see Figure 6). The column headings become hyperlinks, and the paging controls appear at the foot of the grid. Then you can make the page look nicer by selecting an appropriate Auto Format option from the list that appears when you click the link in the tasks pane, and the page is complete (see Figure 7). You run the page to see the results. Clicking any one of the column heading hyperlinks sorts the rows in ascending order by that column value. Another click on the heading changes the sort order to descending. You've created an extremely useful and usable page, and you have not written any code at all.
Providing a Row Editing Feature
While you have the tasks pane open for the GridView control, you might as well take advantage of some of the other features it offers. How about allowing users to edit the rows? This used to involve a lot of work writing code to handle the edit/update/cancel options that are part of the process for editing rows in a Web page, even in ASP.NET 1.x, and you still had to figure out how to push the changes back into the database by executing SQL UPDATE statements.
In ASP.NET 2.0, all of this goes away if you are happy to use the default parameterized SQL statement approach to updating the database table. You just select the Enable Editing and Enable Deleting options in the tasks pane for the GridView control. You will see the Edit and Delete links appear at the left-hand side of the grid (see Figure 8). Now users can edit any of the column values in individual rows (except for the primary key column) and persist these changes back to the database while you still have not written a single line of code!
Adding Filtering to Select Specific Sets of Rows
Just when you think you've satisfied Margaret the CEO at AdventureWorks Trading Inc. with a shiny new Web page for displaying product information, the phone rings again. It's Mike, the AdventureWorks sales manager, who says that his sales people from different divisions of the company will want to be able to filter the list by category, rather than just getting a list of all of the products. He would also like this implemented as soon as possible.
Thoughts of a nice long lunch break evaporate, and back you go to Visual Studio. You will need some kind of control where users can select the category they want to view, and the obvious one is a drop-down list box (a DropDownList control). You will also need some way of populating this drop-down list with the available categories, taken from the database rows in the Products table. Therefore, step one is to drag another SqlDataSource control onto the page and click the Configure Data Source link in the tasks pane to start the Configure Data Source Wizard.
Published July 31, 2006 Reads 19,354
Copyright © 2006 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
About Alex Homer
Alex Homer is a computer geek and Web developer with a passion for ASP.NET, who doubles as a consultant, trainer, and speaker.
About Dave Sussman
Dave Sussman speaks frequently at Microsoft development conferences and has been writing about ASP since its earliest release.
![]() |
SYS-CON Brazil News Desk 07/31/06 02:47:40 PM EDT | |||
ASP.NET 2.0 contains a raft of new features that reduce the code you need to write and save you time and effort when building dynamic and interactive Web pages and applications. To illustrate this, and so that you get a better feel for the way all these features combine to provide the overall ASP.NET 2.0 development experience, this excerpt presents a scenario-based demonstration focused on a day in the life of a developer who is in the process of fulfilling the requirements of a fictional customer. Although this may seem a contrived approach, it actually follows the general process of evolving your applications to meet the needs of the users. |
||||
![]() |
.NET News Desk 07/31/06 01:53:57 PM EDT | |||
ASP.NET 2.0 contains a raft of new features that reduce the code you need to write and save you time and effort when building dynamic and interactive Web pages and applications. To illustrate this, and so that you get a better feel for the way all these features combine to provide the overall ASP.NET 2.0 development experience, this excerpt presents a scenario-based demonstration focused on a day in the life of a developer who is in the process of fulfilling the requirements of a fictional customer. Although this may seem a contrived approach, it actually follows the general process of evolving your applications to meet the needs of the users. |
||||
- AJAX World RIA Conference & Expo Kicks Off in New York City
- Ulitzer’s Amazing First 30 Days in Public Beta
- SYS-CON Announces Government IT Conference & Expo
- RIAs for Web 3.0 Using the Microsoft Platform
- "Government IT Expo" to Highlight Cloud Computing and SOA
- Building a Composite Application Using Multiple Web Services
- Amazon, Google, Microsoft - Big Three Cloud Providers Examined
- Will Ulitzer Dominate News Content on The Web? -Gartner
- Windows 7 To Launch Publicly May 5
- Cisco Needs to Buy EMC to Own VMware
- AJAX World RIA Conference & Expo Kicks Off in New York City
- Ulitzer’s Amazing First 30 Days in Public Beta
- SYS-CON Announces Government IT Conference & Expo
- RIAs for Web 3.0 Using the Microsoft Platform
- How Did We Get to Windows 7?
- "Government IT Expo" to Highlight Cloud Computing and SOA
- Building a Composite Application Using Multiple Web Services
- Amazon, Google, Microsoft - Big Three Cloud Providers Examined
- Will Ulitzer Dominate News Content on The Web? -Gartner
- Micro Focus Offers Micro Focus COBOL for Eclipse
- Google Maps and ASP.NET
- Crystal Reports XI & How It Has Changed
- Creating Controls for.NET Compact Framework in Visual Studio 2005
- Converting VB6 to VB.NET, Part I
- How to Write High-Performance C# Code
- AJAX World RIA Conference & Expo Kicks Off in New York City
- Implementing Tab Navigation with ASP.NET 2.0
- i-Technology Photo Exclusive: Bill Gates & Steve Jobs In "Nerds"
- .NET Archives: Getting Reacquainted with the Father of C#
- i-Technology Viewpoint: "SOA Sucks"








































