Selected ASP.NET Programming Topics

This section builds on the preceding one and adds more details that highlight Web programming issues conceptually. In particular, you will learn about the Design and HTML views for managing the layout of controls on a form. This section also examines the Page class and discusses selected properties and methods that can help you manage the behavior of your forms on a Web page. The section concludes with a brief summary of the types of controls available for populating a form as well as a contrasting of techniques for adding controls to a page.

Web Forms and Their Views

When you create an ASP.NET Web application, it opens to a blank Web form with the name WebForm1.aspx. (See Figure 10-1.) The Starting the WebPageSamples Project section in this chapter demonstrates step-by-step instructions for opening an ASP.NET Web application. This Web form shows the Design view of the page. You can add controls and text to the page from the Design view. In Solution Explorer, you can see that the Web page has the name WebForm1.aspx. You can rename the page by right-clicking it in Solution Explorer, choosing Rename, and entering a new name with an .aspx extension.

Figure 10-1: The default Web form that appears when you create an ASP.NET Web application

The default settings for WebForm1 are the GridLayout pageLayout property setting with a showGrid property setting of True . This pageLayout property setting is convenient for laying out controls on a form in the same style that you use with a Windows form. By right-clicking inside the WebForm1.aspx document and choosing Properties, you can open the DOCUMENT Property Pages dialog box. This dialog box permits you to set the pageLayout property for the document in WebForm1.aspx. Instead of using the default GridLayout setting, you can choose a FlowLayout setting.

With a FlowLayout setting, you can add text without controls to a Web page as you would by using a word processor, and Visual Studio .NET manages the layout of controls in a document by using traditional HTML flow control layout rules that resemble those for a word processor. You can also set the target schema for a Web page so that it is compatible with various styles of browsers from the DOCUMENT Property Pages dialog box. The DOCUMENT Property Pages dialog box conveniently groups a set of related page properties, but you can access these properties along with other page properties directly from the Properties window after clicking any blank area in the page to select the HTML Document object.

Note  

Use the DOCUMENT Property Pages dialog box to optimize an ASP.NET Web page for varied scenarios. The Internet Explorer 5.0 setting for Target Schema with a GridLayout setting for Page Layout is convenient when you are writing an application that mandates access via Internet Explorer version 5 or later and you want to take advantage of Windows Forms “style layout features for controls. The Navigator 4.0 Target Schema with a FlowLayout Page Layout setting is appropriate when you have an application in which you cannot dictate the browser for an application and your page has a lot of text that needs editing.

The two tabs to the lower left of the page in Figure 10-1 permit you to toggle the view of a page between Design view and HTML view. A Web page is a collection of HTML elements (or tags). You can add controls to a Web page and edit their properties graphically in Design view or directly with HTML elements in HTML view. If you have a working knowledge of HTML, you might find it instructive to view Web pages in HTML view to see how Visual Studio .NET interprets your graphical layout operations into HTML elements. The following excerpt from the HTML view for the Web page in Figure 10-1 shows that the body of the document consists of an empty HTML form tag. The tag has an id attribute setting equal to Form1 . The id attribute corresponds to the ID property for a Control object. You can use the ID property to identify a control programmatically. As you add content to the page, the Web Forms Designer will populate the body block with additional HTML tags. The HTML and Design views of a Web page are flip sides of the content on a Web page.

 <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat ="server"> </form> </body> 

Another view of a Web page is the Code view. You can expose this view of a Web page by right-clicking a blank area in either the Design or HTML views and choosing View Code. Choosing this menu item opens a new tab in the Web Forms Designer named WebForm1.aspx.vb. This view enables you to add Visual Basic .NET code to control the behavior of a Web page. The code in this view runs on the server. Choosing View Code for the blank page in Figure 10-1 opens the Code view window to the shell for a Page_Load event procedure. The WebForm1.aspx.vb and WebForm1.aspx files are separate files that work together to enable one page class. Although you can intersperse server scripts in the HTML for a Web page, that practice defeats one of the major advantages of ASP.NET ”isolating the Visual Basic .NET code controlling the behavior of a page from the HTML elements controlling the page s design and content.

The Web Forms Page Class

The Page class in the System.Web.UI namespace can represent a Web page in a project. The Web page corresponding to a Page class instance appears in a browser. A Page class contains properties and methods that manage the HTML elements and Visual Basic .NET code that controls the form in an .aspx file. The ASP.NET processing model reconstructs a Page class instance on each round-trip of a page between a browser and a server. During this process, the page reacts to user input to form controls. One especially helpful feature of a Web page is that it automatically populates the controls on the forms with field values from the last browser session. Developers familiar with ASP coding practice will recall the need to manually populate values for controls on an HTML form in application code.

The Page_Load event for a Page class instance roughly corresponds to the Form_Load event for a Windows Form class. As mentioned earlier, the Code view window for a Web page opens automatically to the shell for a Page_Load event procedure. This event fires on each round-trip of an .aspx file. Your application might need to process the initial opening of a Page class instance differently from one in which a user is posting back information for a page that is already opened. The IsPostBack property of the Page class returns a value of False when the page initially opens; otherwise , it returns True . All events for controls on a Web page, such as the Click event for a Button, cause a Web page to send information about the event to the server via the HTTP post method. Notice the post method for the form tag in the preceding code listing; this method setting specifies the HTTP post technique for transferring information between a form in a browser and a Web server.

You can refer to individual controls on a Web page through a Page class instance. Use the Me keyword to refer to WebForm1 or another page name, denoting a Page class instance. For example, designate a Button control with an ID property equal to Button1 as Me.Button1 . A Web Forms instance corresponds to the HTML form tag for a Web page. (See the preceding HTML excerpt.) You can refer to a Web Forms control in an ASP.NET page through the ControlCollection class for Me . The member of the collection with a GetType.ToString return value equal to System.Web.UI.HtmlControls.HtmlForm is the control for the current Web Forms instance. For example, the control s ID property equals the id attribute setting for the form tag on the current Web page.

Controls on a Web Forms Page

To add controls to a Web page, you can drag controls from the Toolbox to the Web page. As you have learned, you have two modes for laying out controls on a Web page. The default GridLayout pageLayout setting is easiest and fastest for formatting forms. Also, the process of adding controls to a Web page has the look and feel of arranging controls on a Windows form. The optional FlowLayout pageLayout setting is compatible with a broader range of browsers that do not support Dynamic HTML (DHTML) absolute positioning syntax, such as Netscape Navigator 4.0. If you are familiar with formatting controls on a Windows form, the formatting conventions for a page with a FlowLayout pageLayout property might feel awkward and force you to align controls by positioning them within the cells of an HTML Table control on a Web page.

This section mentions three types of controls that you can add to a Web page: Web server controls, HTML server controls, and HTML controls. Add Web server controls from the Web Forms tab of the Toolbox. Add HTML server controls and HTML controls from the HTML tab of the Toolbox. Both HTML server controls and HTML controls use standard HTML tags to define controls ”especially for the most commonly used controls, such as text boxes or buttons . One key difference is the use of the runat attribute setting for the HTML server controls with a value of server . This setting lets Visual Basic .NET code manipulate the control programmatically at the server. You can add controls that will act as HTML server controls without manually adding the runat attribute. Simply add the control from the HTML tab in the Toolbox. Then, to convert the control from an HTML control to an HTML server control, right-click the HTML control on the Web form in Design view and select Run As Server Control. Web server controls automatically have their runat attribute set to server .

You can mix and match any of the three control types concurrently on the same Web page. The Web server controls have the greatest diversity, but they also depart the most from traditional HTML controls. If you have limited experience developing Web applications, the wider selection of Web server controls should more than offset any departures from traditional HTML controls. In addition, Web server controls have a richer set of properties than you can manipulate programmatically. For example, you can use the Page_Load event to set the tab order for Web server controls via their TabIndex property. HTML server controls do not offer a TabIndex property for programmatic manipulation, although you can manipulate the tab order for controls manually through the Properties window. The Web server controls include many more controls, such as Calendar and AdRotator, than the HTML server controls.