Introducing Web Forms

  What is ASP.NET Web Forms?
  Writing Your First Web Forms Page
  Using ASP <%%> Render Blocks
  Introduction to Server Controls
  Handling Server Control Events
  Using Custom Server Controls
  Lists, Data, and Databinding
  Form Validation Controls
  Code-Behind Web Forms
  Section Summary

This section of the QuickStart provides a high-level code walkthrough of some key ASP.NET Web Forms features. Subsequent sections of the QuickStart drill down into more specific details.

Writing Your First Web Forms Page

ASP.NET Web Forms pages are text files with an .aspx file name extension. They can be deployed throughout an IIS virtual root directory tree. When a browser client requests .aspx resources, the ASP.NET runtime parses and compiles the target file into a .NET Framework class. This class can then be used to dynamically process incoming requests. (Note that the .aspx file is compiled only the first time it is accessed; the compiled type instance is then reused across multiple requests).

An ASP.NET page can be created simply by taking an existing HTML file and changing its file name extension to .aspx (no modification of code is required). For example, the following sample demonstrates a simple HTML page that collects a user's name and category preference and then performs a form postback to the originating page when a button is clicked:

VB Intro1.aspx [Run Sample] | [View Source]

Important: Note that nothing happens yet when you click the Lookup button. This is because the .aspx file contains only static HTML (no dynamic content). Thus, the same HTML is sent back to the client on each trip to the page, which results in a loss of the contents of the form fields (the text box and drop-down list) between requests.

Using ASP <% %> Render Blocks

ASP.NET provides syntax compatibility with existing ASP pages. This includes support for <% %> code render blocks that can be intermixed with HTML content within an .aspx file. These code blocks execute in a top-down manner at page render time.

The below example demonstrates how <% %> render blocks can be used to loop over an HTML block (increasing the font size each time):

VB Intro2.aspx [Run Sample] | [View Source]

Important: Unlike with ASP, the code used within the above <% %> blocks is actually compiled--not interpreted using a script engine. This results in improved runtime execution performance.

ASP.NET page developers can utilize <% %> code blocks to dynamically modify HTML output much as they can today with ASP. For example, the following sample demonstrates how <% %> code blocks can be used to interpret results posted back from a client.

VB Intro3.aspx [Run Sample] | [View Source]

Important: While <% %> code blocks provide a powerful way to custom manipulate the text output returned from an ASP.NET page, they do not provide a clean HTML programming model. As the sample above illustrates, developers using only <% %> code blocks must custom manage page state between round trips and custom interpret posted values.

Introduction to ASP.NET Server Controls

In addition to (or instead of) using <% %> code blocks to program dynamic content, ASP.NET page developers can use ASP.NET server controls to program Web pages. Server controls are declared within an .aspx file using custom tags or intrinsic HTML tags that contain a runat="server" attribute value. Intrinsic HTML tags are handled by one of the controls in the System.Web.UI.HtmlControls namespace. Any tag that doesn't explicitly map to one of the controls is assigned the type of System.Web.UI.HtmlControls.HtmlGenericControl.

The following sample uses four server controls: <form runat=server>, <asp:textbox runat=server>, <asp:dropdownlist runat=server>, and <asp:button runat=server>. At run time these server controls automatically generate HTML content.

VB Intro4.aspx [Run Sample] | [View Source]

Important: Note that these server controls automatically maintain any client-entered values between round trips to the server. This control state is not stored on the server (it is instead stored within an <input type="hidden"> form field that is round-tripped between requests). Note also that no client-side script is required.

In addition to supporting standard HTML input controls, ASP.NET enables developers to utilize richer custom controls on their pages. For example, the following sample demonstrates how the <asp:adrotator> control can be used to dynamically display rotating ads on a page.

VB Intro5.aspx [Run Sample] | [View Source]

Important: A detailed listing of all built-in server controls can be found in the Web Forms Control Reference section of this QuickStart.

Handling Server Control Events

Each ASP.NET server control is capable of exposing an object model containing properties, methods, and events. ASP.NET developers can use this object model to cleanly modify and interact with the page.

The following example demonstrates how an ASP.NET page developer can handle the OnClick event from the <asp:button runat=server> control to manipulate the Text property of the <asp:label runat=server> control.

VB Intro6.aspx [Run Sample] | [View Source]

This simple sample is functionally equivalent to the "Intro3" sample demonstrated earlier in this section. Note, however, how much cleaner and easier the code is in this new server-control-based version.

Using Custom Server Controls

ASP.NET ships with 45 built-in server controls that can be used out of the box (for details, see Web Forms Controls Reference). In addition to using the built-in ASP.NET controls, developers also can use controls developed by third-party vendors.

The following sample shows a simple calendar control. The Calendar control is declared within the page using an <acme:calendar runat=server> tag. Note that the <% Register %> directive at the top of the page is responsible for registering the "Acme" XML tag prefix with the "Acme" code namespace of the control implementation. The ASP.NET page parser will then utilize this namespace to load the Calendar control class instance at run time.

VB Intro7.aspx [Run Sample] | [View Source]

The Calendar control in this sample has been designed to perform "uplevel-like" processing on Internet Explorer 5.5 and "downlevel" processing on all other browsers. This browser sniffing is nowhere near as complex as that provided by the ASP.NET built-in server controls. For Internet Explorer 5.5 browsers it generates DHTML output. This DHTML output does not require round trips back to the server when doing day selections and month navigations. For all other browsers the control generates standard HTML 3.2. This HTML 3.2 does require round trips back to the server to handle client-side user interactions.

Important: The code that a page developer writes is identical regardless of whether an "uplevel" or "downlevel" browser is used to access the page. The Calendar control itself encapsulates all of the logic required to handle the two scenarios.

Lists, Data, and Data Binding

ASP.NET ships with a built-in set of data grid and list controls. These can be used to provide custom UI driven from queries against a database or other data source. For example, the following sample demonstrates how a <asp:datagrid runat=server> control can be used to databind book information collected using a SQL database query.

VB Intro8.aspx [Run Sample] | [View Source]

The <asp:datagrid runat=server> DataGrid control provides an easy way to quickly display data results using a traditional grid-control UI. Alternatively, ASP.NET developers can use the <asp:DataList runat=server> DataList control and a custom ItemTemplate template to customize data information, as in the following sample.

VB Intro9.aspx [Run Sample] | [View Source]

Note that the <asp:datalist runat=server> control enables end users to exactly control the structure and layout of each item within the list (using the ItemTemplate template property). The control also automatically handles the two-column wrapping of content (users can control the number of columns using the RepeatColumns property on the data list).

The following sample provides an alternate view of the <asp:datalist runat=server> control.

VB Intro10.aspx [Run Sample] | [View Source]

Note that the control, data model, and page user in this example are exactly the same as those in the previous sample. The only difference is that, here, alternative templates are declaratively supplied to the code.

Form Validation Controls

The ASP.NET Web Forms page framework provides a set of validation server controls that provide an easy-to-use but powerful way to check input forms for errors, and, if necessary, display messages to the user.

Validation controls are added to an ASP.NET page like other server controls. There are controls for specific types of validation, such as range checking or pattern matching, plus a RequiredFieldValidator that ensures that a user does not skip an entry field.

The following example demonstrates how to use two <asp:requiredfieldvalidator runat=server> controls on a page to validate the contents of the TextBox and DropDownList controls.

VB Intro11.aspx [Run Sample] | [View Source]

Note that the validation controls have both uplevel and downlevel client support. Uplevel browsers perform validation on the client (using JavaScript and DHTML) and on the server. Downlevel browsers perform the validation only on the server. The programming model for the two scenarios is identical.

Note that ASP.NET page developers can optionally check the Page.IsValid property at run time to determine whether all validation server controls on a page are currently valid. This provides a simple way to determine whether or not to proceed with business logic. For example, the following sample performs a Page.IsValid check before executing a database lookup on the specified category.

VB Intro12.aspx [Run Sample] | [View Source]

Code-Behind Web Forms

ASP.NET supports two methods of authoring dynamic pages. The first is the method shown in the preceding samples, where the page code is physically declared within the originating .aspx file. An alternative approach--known as the code-behind method--enables the page code to be more cleanly separated from the HTML content into an entirely separate file.

The following sample demonstrates the use of the code-behind method of writing ASP.NET page code.

VB Intro13.aspx [Run Sample] | [View Source]

Section Summary

1. ASP.NET Web Forms provide an easy and powerful way to build dynamic Web UI.
2. ASP.NET Web Forms pages can target any browser client (there are no script library or cookie requirements).
3. ASP.NET Web Forms pages provide syntax compatibility with existing ASP pages.
4. ASP.NET server controls provide an easy way to encapsulate common functionality.
5. ASP.NET ships with 45 built-in server controls. Developers can also use controls built by third parties.
6. ASP.NET server controls can automatically project both uplevel and downlevel HTML.
7. ASP.NET templates provide an easy way to customize the look and feel of list server controls.
8. ASP.NET validation controls provide an easy way to do declarative client or server data validation.