Creating a Simple Page | Beginning Visual C#supAND#174;/sup 2005

In the following Try It Out, you create a simple Web page. In the sample application dealt with in this and the next chapter, a simple Event Web site will be created where attendees can register for events.

Try It Out – Create a Simple Web Page

Create a new Web site by selecting File New Web Site with Visual Studio, as shown in Figure 18-2. Select Visual C# as the programming language, and set the Location combo box to File System. With the location, selecting HTTP means the IIS is used and a virtual directory is created. Name the Web site EventRegistrationWeb.

Figure 18-2
After having created the Web site, the file default.aspx is opened in the editor. Switch to the design view by clicking the Design button in the lower-left corner of the editor.
To arrange the controls a table is useful. Add a table by selecting the menu Layout Insert Table. In the Insert Table dialog, set five rows and two columns, as shown in Figure 18-3.

Figure 18-3
Add four Labels, three TextBoxes, a DropDownList, and a Button to the table, as shown in Figure 18-4.

Figure 18-4

Set the properties of the controls as shown in the following table.

Control Type	Name	Text
Label	labelEvent	Event:
Label	labelFirstname	Firstname:
Label	labelLastname	Lastname:
Label	labelEmail	Email:
DropDownList	dropDownListEvents
TextBox	textFirstname
TextBox	textLastname
TextBox	textEmail
Button	buttonSubmit	Submit

In the DropDownList, select the Items property in the Properties window, and enter the strings SQL Server 2005 and XML, Office 2003 and XML, and Introduction to ASP.NET in the ListItem Collection Editor, as shown in Figure 18-5.

Figure 18-5

Switch the editor to the Source view and verify that the generated code looks similar to this:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"  Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form  runat="server"> <div> <table> <tr> <td style="width: 100px"> <asp:Label  Runat="server" Text="Event:"></asp:Label> </td> <td style="width: 100px"> <asp:DropDownList  Runat="server"> <asp:ListItem>SQL Server 2005 and XML</asp:ListItem> <asp:ListItem>Office 2003 and XML</asp:ListItem> <asp:ListItem>Introduction to ASP.NET</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td style="width: 100px"> <asp:Label  Runat="server"  Text="Firstname:"></asp:Label> </td> <td style="width: 100px"> <asp:TextBox  Runat="server"></asp:TextBox> </td> </tr> <tr> <td style="width: 100px"> <asp:Label  Runat="server"  Text="Lastname:"></asp:Label> </td> <td style="width: 100px"> <asp:TextBox  Runat="server"></asp:TextBox> </td> </tr> <tr> <td style="width: 100px"> <asp:Label  Runat="server"  Text="Email:"></asp:Label> </td> <td style="width: 100px"> <asp:TextBox  Runat="server"></asp:TextBox> </td> </tr> <tr> <td style="width: 100px"> </td> <td style="width: 100px"> <asp:Button  Runat="server" Text="Submit" /> </td> </tr> </table> </div> </form> </body> </html>

Start the Web application by selecting Debug Start Without Debugging in the Visual Studio menu. When you start the application, the Visual Web Developer Web server is automatically started. You will find an icon for the Visual Web Developer Web server in the Windows Explorer taskbar. When you double-click this icon you can see a dialog similar to that shown in Figure 18-6. This dialog shows the physical and logical paths of the Web server, and the port the Web server is listening to. This dialog can also be used to stop the Web server.

Figure 18-6

Starting the application causes Internet Explorer to show the Web page, as you see in Figure 18-7. You can view the HTML code by selecting View Source. You'll see that the server-side controls are converted to pure HTML code.

Figure 18-7

How It Works

The first line of the file default.aspx is the page directive. This directive defines the programming language and the classes that are used. The property AutoEventWireup="true" defines that event handlers for the page are automatically linked to specific method names, as will be shown later. Inherits= "Default_aspx" means that the class that is dynamically generated from the ASPX file derives from the base class Default_aspx. This base class is in the code-behind file Default.aspx.cs as defined with the CodeFile property.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

Visual Studio 2005 allows code behind with separate CS files or inline code where the C# code can be written directly into the ASPX file. When creating a new item with File New File, you can determine whether the code should be put into a separate file, as shown in Figure 18-8.

image from book
Figure 18-8

Separating the user interface and the code into ASPX and CS files allows better maintenance. The code that is generated in the file Default.aspx.cs imports some namespaces and includes a partial class: Default_aspx. The automatically generated class in the file Default.aspx derives from the class Default_aspx. Later in the chapter, you add handler code to the CS file.

using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;     public partial class _Default: System.Web.UI.Page {    // Page events are wired up automatically to methods    // with the following names:    // Page_Load, Page_AbortTransaction, Page_CommitTransaction,    // Page_DataBinding, Page_Disposed, Page_Error, Page_Init,    // Page_InitComplete, Page_Load, Page_LoadComplete, Page_PreInit,    // Page_PreLoad, Page_PreRender, Page_PreRenderComplete,    // Page_SaveStateComplete, Page_Unload        protected void Page_Load(object sender, EventArgs e)    {    } }

Note

The partial keyword, used in the preceding code, is discussed in Chapter 10.

Within the ASPX page, there's simple HTML code that is sent to the client as it is. Just the runat="server" attribute is removed from the <head> tag.

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">   <title>Untitled Page</title> </head> <body>

You will also find HTML elements with the attribute runat=server. A first example is the <form> element that includes this attribute. With the attribute runat=server, an ASP.NET server control is associated with the HTML tag. This control can be used to write server-side code. Behind the <form> element is an object of type System.Web.UI.HtmlControls.HtmlForm. The object has the variable name form1 as defined with the id attribute. form1 can be used to invoke methods and properties of the HtmlForm class.

The HtmlForm object creates a <form> tag that is sent to the client. Of course, the runat attribute is not sent to the client.

<form  runat="server">

The standard controls that you've dropped from the Toolbox to the form designer have elements that begin with <asp:. <asp:Label> and <asp:DropDownList> are server-side ASP.NET Web controls that are associated with .NET classes in the namespace System.Web.UI.WebControls. <asp:Label> is represented by the class Label, and <asp:DropDownList> is represented by the class DropDownList.

<td style="width: 100px">   <asp:Label  Runat="server" Text="Event:"></asp:Label> </td> <td style="width: 100px">   <asp:DropDownList  Runat="server">      <asp:ListItem>SQL Server 2005 and XML</asp:ListItem>      <asp:ListItem>Office 2003 and XML</asp:ListItem>      <asp:ListItem>Introduction to ASP.NET</asp:ListItem>   </asp:DropDownList> </td>

<asp:Label> doesn't send an <asp:Label> element to the client, because this is not a valid HTML element. Instead, the <asp:Label> returns a <span> tag. Similarly, the <asp:DropDownList> returns a <select> element, and the <asp:TextBox> returns the element <input type="text">.

ASP.NET has UI control classes in the namespaces System.Web.UI.HtmlControls and System.Web. UI.WebControls. Both of these namespaces have some similar controls, also known as HTML server controls and Web server controls. Examples are the HTML server control HtmlInputText and the Web server control TextBox. The HTML server controls offer methods and properties that are similar to the HTML controls, because they can be accessed from JavaScript in the HTML page on the client. The Web server controls offer methods and properties, as you know from your knowledge of Windows programming. Partly, it is a matter of taste for which control you use. However, with the Web server controls, you will find much more complex controls such as Calendar, DataGrid, and Wizard.