Pro ASP.NET Web Forms Techniques
Alex Homer (alex@stonebroom.com)
ASP.NET makes it easy to create interactive and intuitive interfaces for Web applications, and attractive and exciting Web pages. The server-based post-back architecture, combined with the comprehensive array of server controls that are provided as part of the .NET Framework, allow developers to quickly build browser-based interfaces for Web sites and Web applications - using much the same event-driven approach as in "traditional" executable programs developed in languages like Visual Basic, Delphi and C++.
This is a completely new and different way of working from previous versions of ASP, and the underlying principles and workings of server-based events, which occur in response to actions made by the user in the page, can prove to be difficult to grasp in its entirety. However, constructing ASP.NET pages, especially with some of the tools that are available or under development now, is very much easier and often less error-prone than in classic ASP.
However, a completely server-based approach to user interaction does have its downsides. In high-latency scenarios, or over slow network connections, the need to hit the server every time that the page content needs to be modified can intrude on the working of an application, or reduce the perceived responsiveness of a Web site.
Although the ASP.NET philosophy tends to engender a server-based mechanism, where post-backs to the server are used to generate and update the pages, some of the server controls (notably the Validation controls) also encompass client-side interactivity through JScript that is sent to the client for execution there. And there is no reason why a developer cannot add to this functionality for other controls by handling client-side events in the same way as has become the norm in most Web sites and Web applications today.
So, based on the title and the preamble above, you can safely assume that this book is aiming to examine the possibilities for developing user interfaces that are driven by ASP.NET. It attempts to discuss and explore a range of techniques and approaches predominantly for creating Web sites and Web pages that are:
* Intuitive and easy to use
* Attractive and full-featured
* Interactive where this is appropriate
* Based (loosely) on a real-world scenario
* Fulfill a predefined set of design requirements
* Are fun, memorable, and provide user satisfaction
The pages we build are, for the most part, elements of an overall application that - while being somewhat optimistic as regards consumer buying patterns - does form the basis for the kind of Web site/application that is becoming one of the basic ingredients of the World Wide Web today. We'll be building a site that allows the user to choose, customize and purchase a new car or truck from the world-famous "Wrox Car Company".
To do so, we'll focus on the steps of requirements-analysis and design (though not in extreme detail), followed by planning and mapping out the site. While this seems like the natural way to get started, it's often skimped or even omitted, allowing the site to develop in a haphazard and unpredictable way. While this is not always categorically wrong, it does make development and maintenance that much more difficult. Even the most simplistic "starting plan" can reduce development and maintenance time, as well as avoiding many common frustrations that result from the "no plan" approach.
Once the basic design in is place we'll look at the development of the various resources that make up the complete site. Of course, repetition is commonplace in a Web site, and so to make the book as useful as possible we've taken some liberties to try and cover as many useful topics as possible. It means that we can look at a range of things such as:
* A central "Home page" that makes navigation of the whole site easy
* Displaying data about the products available from the site from a backend database
* Interactive content that driven by either or both server-side and client-side code
* Creating graphics on the fly, and other animations to liven up the site
* A "login" feature that recognizes users and provides optional personalization
* An online order facility with order tracking and status reports via email
* Some ASP.NET development tools that are available now, or are on the way
What we won't be doing is concentrating on the backend data processing tasks in any more detail than we need to in order to get the site running. In a sister publication, "ASP.NET Distributed Data Applications" (Wrox ISBN: 1-861004-92-3), we covered the whole reasoning behind, and implementation of n-tier architectures and componentized design. In that book, however, we steered clear of as much complexity in the client as possible, in order to concentrate on the data processing aspects.
On the grounds that we don't have 1500 pages available here, this book does the reverse by concentrating on the user interfaces, and using fairly simple data access techniques. Of course, that doesn't mean we won't be doing it "properly", it just means that you won't see detailed discussions of the workings of all of the .NET data access classes, or the long diatribes on catching and reporting concurrency errors.
All ASP.NET the code you see listed in the book, with the exception of simple abstract snippets that demonstrate a specific principle or just show the syntax, is available in both VB.NET and C#. The listings you see in the book are mostly written using VB.NET syntax, but avoiding and language-specific features wherever possible, so that it can easily be converted to other languages by any reasonably capable developer who prefers to work in a different language. Where there is an obvious difference between VB.NET and C# in the way that a specific feature is implemented, we show the C# version as well. Meanwhile, the client-side code is predominantly written in JavaScript/JScript.
You can download all the code for this book
from: http://www.wrox.com/. You can also run many of the examples online on our server. For
details go to: http://www.daveandal.net/books/7868/
If you worked with ASP 2.0 and/or 3.0,
and read either of the previous Wrox "ASP Webmaster" books, you'll
find that this book is somewhat similar to those in both the kinds of topics it
covers, and the approach to these topics that it takes. But, of course, now
we're talking about ASP.NET - and so the range of possibilities and the
fundamental implementation are very different.
As is becoming clear, ASP.NET and the accompanying .NET Framework class library are far more comprehensive - and complex - than anything we used in ASP 3.0 or earlier (or, in fact, in other environments like PHP and JSP). The result is that it's not possible for every ASP.NET book to cover an introduction or brief tutorial to ASP.NET as well as the more advanced content that forms the core of the book.
Mind you - this is a good thing from your point of view, as you don't want to pay for material that covers topics you are already familiar with. What is does mean is that you do need to be familiar with ASP.NET and, to some extent, the .NET Framework classes to be able to use this book successfully. We assume that you have already installed and are using ASP.NET to build pages, perhaps using a text editor or with Visual Studio .NET or another development tool.
We also assume that you have a reasonable grasp of using a database to drive a Web site. We'll explain the data access code we use, how it works, and discuss alternatives where appropriate. But we won’t be covering the basic techniques for setting up and administering your database.
* It's not a dry reference book on any particular area of the technologies.
* It's not an academic text that follows every thread or aspect of any one technology.
* It's not about hardware performance or software configuration for ASP.NET.
* It's not about SQL programming, server optimization or data access theory.
* It's not aimed at system or database administrators - it's aimed at developers.
* It is a practical approach aimed at achieving useful goals without drowning in complexity.
* It is a guide to many of the useful and powerful interface-oriented features of ASP.NET.
* It is an exploration of a process for designing and building an interactive Web site.
* It is a useful introduction to many peripheral techniques, such as drawing and email.
* It is a demonstration of how easy ASP.NET makes building great Web sites.
* It is, hopefully, informative, useful, and fun to read.
Providing that your level of experience and knowledge meets the not excessive requirements of the earlier sections, the only other things you need are:
* A development environment. At minimum your favorite text editor, or perhaps Visual Studio .NET, Microsoft ASP.NET Web Matrix, or any other suitable tool from a third party manufacturer.
* Internet Information Server and the .NET Framework installed and configured on a server that you can access. Alternatively, if you are using Matrix, you can take advantage of its built-in Web server. We also recommend that you install the complete version of the .NET SDK that includes all the reference material, as it makes it easy to look up specific items when you aren't using Visual Studio .NET.
* A database such as Microsoft SQL Server or MSDE, although you can use any other SQL database system - or even a desktop database such as Microsoft Access - as long as there is a .NET Data Provider available so that it an be accessed via ASP.NET.
For development and experimentation you can run the database, IIS and .NET and your chosen development environment on the same machine. This often makes debugging easier as well.
· Why ASP.NET?
· A Note on Terminology
· Is It a Bird? ... Is It a Plane? ... No, it's a Wapplisite!
· ASP.NET Fundamentals
· Event-Driven Applications
· Programming Dynamic Pages On The Web
· Event-Driven Programming On The Web
· The ASP.NET Page as a Compiled Class
· The ASP.NET Postback Architecture
· Posting To The Same Page
· Server-side ASP.NET Forms
· Emulating Individual Control Events
· Server-side and Client-side Event Handling
· Control Values and ViewState
· Using Viewstate as a Storage Medium
· Disabling Viewstate
· Preventing a Page Reload
· ASP.NET Server Controls
· Server-side Data Binding
· Other Useful ASP.NET Features
· ASP.NET Sessions
· ASP.NET Caching
· ASP.NET Authentication and Authorization
· Designing an Interactive Web Site
· The Overall Site Design
· Requirements Analysis
· The Basic Site Structure
· The Wrox Car Company
· The Data Source
· Client-side Processing
· The Home Page
· The Ingredients for the Home Page
· The Car Model Details Page
· The Color Options Section
· Using a Frameset
· Other Approaches
· The Ingredients for the Color Options Section
· The Engine Options Section
· The Ingredients for the Engine Options Section
· The Optional Extras Section
· The Ingredients for the Optional Extras Section
· The Model Details Section
· The Ingredients for the Model Details Section
· The Finance Options Section
· The Ingredients for the Finance Options Section
· The Compare Features Page
· The Ingredients for the Compare Features Page
· The Order Pages
· Other "Peripheral" Pages
· Is It All Actually Achievable?
· Summary
· Built-in Intelligence
· A Test Application
· Use A Selection of Browsers
· Viewing the Test Pages
· The Hyperlink Server Control
· But Navigator Understands the Style Attribute!
· The Calendar Control
· Specifying Up-level or Down-level Clients
· The Definition of "Up-level" and "Down-level"
· List Control Formatting and Templates
· The Output from the DataList Control
· Adding Templates to the DataList Control
· More Complexity - the DataGrid Control
· Specifying Column Information in a DataGrid Control
· Formatting Within a TemplateColumn in a DataGrid Control
· What If There's No Client-side Script Support?
· Example: A LinkButton in Amaya
· Solving the "No Script" Problem
· When Scripting is Supported but Disabled
· The ASP.NET Validation Controls
· The Validation Controls in Down-level Clients
· The ASP.NET Panel Control
· The Panel Control in Down-level Clients
· Don't Get Caught Out by Output Caching
· Caching by Browser Version
· Caching by Client Target
· Summary
· Obtaining the Example Files
· Installing the Wrox Car Company Site
· Wrox Cars Client-side Technical Requirements
· What "Standards" Do We Support or Require?
· ASP.NET Sessions
· Requirements for Session Support
· Cookies, Cookie-less Sessions and URL Munging
· The Session ID and Session Timeout
· Session Support Across Multiple Servers
· Using the ASP.NET State Service
· Using SQL Server for Session Support
· Maximizing Performance When Using Sessions
· Client-side Scripting
· Users and User IDs in the Wrox Car Company Site
· Checking for Sessions and Scripting Support
· Client Capabilities and User ID Detection
· The Code in default.aspx
· The HTML and Content in default.aspx
· The no-script.htm Page
· Enabling and Disabling Client-side Scripting
· The Detection Code in home.aspx
· The no-sessions.htm Page
· Cookie Based or Cookie-less Sessions?
· Enabling and Disabling Cookie Support
· Cross-Browser Compatibility Issues
· Browsers for Testing Your Pages
· Other User Agents
· Solving Browser Compatibility Issues
· Techniques For Maximizing Compatibility
· Declaring and Linking to CSS Style Sheets
· Font Styles, Types and Sizes
· Using Pre-defined Font Sizes
· Font Names and Colors
· ASP.NET Server Controls and the CssClass Property
· Layout of Page Sections and Individual Elements
· Different Screen Resolutions and Text Sizes
· Removing Excess White Space in Page Margins
· Removing Excess White Space from Text in Block Elements
· Script-driven Animations and Other "Actions"
· Client-side Browser Feature Detection
· Coping with Navigator/Communicator 4.x.
· Making Sites Accessible to All Visitors
· Why Provide Universal Accessibility?
· A Summary of Techniques for Accessibility
· Assisting Navigation
· Identifying Elements
· General Recommendations
· Summary
· The Overall Page Structure
· Creating the Page Structure
· The HTML Table for the Outline Structure
· The <form> Section
· The <body> Element as a Server Control
· The HtmlGenericControl Class
· Setting the Styles for the Page
· Specifying the CSS Style Sheet
· The Standard Style Sheet
· The Netscape/Mozilla Style Sheet
· Detecting the Client Type
· Linking to the Correct Style Sheet
· Providing Accessibility Navigation Aids
· Implementing "Skip To" Links
· The Source Code for the "Skip To" Links
· Hiding "Skip To" Links in Graphical Browsers
· Remember those "title" and "alt" Attributes
· The Links to Other Pages
· The ASP.NET Hyperlink Control
· Setting the "title" and "alt" Attributes
· The "News and Special Offers" Section
· The Data Access Code for the "News" List
· The GetNewsList Stored Procedure
· The GetNewsListDR Function
· The CommandBehavior Parameter for the ExecuteReader Method
· Data Binding the Repeater Control
· Choosing the Appropriate ASP.NET "List" Control
· The Static Section of the "News" List
· The ASP.NET Repeater Control for the "News" List
· Data Binding Syntax in a List Control Template
· The List of Car Models
· Choosing the Appropriate List Control
· Changing the Behavior for Script-Enabled Clients
· The Data Access Code for the "Car Models" List
· The GetModelList Stored Procedure
· The GetModelListDR Function
· Data Binding the DataGrid Control
· The DataGrid Control for the "Car Models" List
· Specifying Styles and Templates
· Specifying Column Information in a DataGrid Template
· The Graphic Image and Price Column
· The Name and Description Column
· Handling the ItemDataBound Event for a DataGrid
· The SetNavigateUrl Event Handler
· Session IDs for Cookie-less Sessions
· Summary
· About ASP.NET User Controls
· Reusable Code and Content
· Building a User Control
· The Contents of a User Control
· Exposing Properties from a User Control
· Using a User Control in an ASP.NET Page
· Setting Properties
· The Animated Page Banner
· Building the Animated Banner Control
· The Structure of the "Page Banner" User Control
· The ASP.NET Literal Control
· The Properties of our User Control
· The Page_Load Event Handler
· Selecting the Content Block to Send to the Client
· The Animation Content for CSS-Enabled Clients
· Animating the Banner
· Moving the Images
· The Animation Content for Internet Explorer 4.x and above
· The Animation Content for Netscape 4.x only
· Moving the Layer Elements
· Using the Animated Banner Control
· Setting the Banner Control Properties
· The Page Footer Section
· Dynamic Hyperlinks in the Footer
· Building the Page Footer Control
· The HtmlAnchor Control
· The Code for the Page Footer Control
· Using the Page Footer Control
· Adding Users to the Mailing List
· The Controls to Submit an Email Address
· ASP.NET Form Controls and the <form> Element
· ASP.NET Validation Controls
· The Validation Control Members
· The Validation Controls in the "Home" Page
· Displaying the Validation Control Content
· The Validation Summary Control in the "Home" Page
· Online Server Controls Examples
· The Code to Handle Email Addresses
· Using the Page.IsValid Property
· The UpdateMailingList Function
· Executing the AddMailingListAddress Stored Procedure
· The SendEmailConfirmation Routine
· Creating a MailMessage Object
· Using the SmtpMail Class to Send the Message
· Configuration Issues for Sending Mail from ASP.NET
· Summary
· The Ancillary Pages
· The Structure of the Ancillary Pages
· The Overall Layout
· "Terms & Conditions" and "Contact" Pages
· The HTML Table for the Ancillary Pages Structure
· The Code for the Ancillary Pages
· Redirection When No Session Is Available