An ASP.NET Web Application in Action - The aspx code for the Order form
(Page 2 of 5 )
To give you some idea of how aspx code works, figure 1-10 shows some of the aspx code for the Order form. All of this code is generated by Visual Studio as you use the Web Forms Designer to design a form, so you don’t have to code it. But you still should have a general understanding of how this code works.
The first set of tags for each web form defines a page directive that provides four attributes. Here, the Language attribute says that the language is Visual Basic, the CodeFile attribute says that the code-behind file is named Order.aspx.vb, and the Inherits attribute specifies the class named Order. In figure 1-12, you’ll see how the Order.aspx class inherits the Order class.
The second set of tags defines a DOCTYPE declaration, which tells the browser what version of HTML the HTML document uses. You can ignore this declaration for now, because you’ll learn more about it in chapter 5.
The Html tags mark the beginning and end of the HTML document, and the Head tags define the heading for the document. Here, the Title tags define the title that is displayed in the title bar of the browser when the page is run. In addition, the Style tags define the styles used by the page. As you’ll learn in chapter 5, this is just one way to define styles.
The content of the web page itself is defined within the Div tags, which are within the Body and Form tags. Notice that the first Form tag includes a Runat attribute that’s assigned a value of “server.” That indicates that the form will be processed on the server by ASP.NET. This attribute is required for all ASP.NET web forms and all ASP.NET server controls.
The asp tags within the Div tags define the server controls that appear on the page. For example, the asp:Image tags define an Image control, the asp:Label tags define a label control, the asp:DropDownList tags define a drop-down list, and the asp:Button tags define a button. Since these controls include the Runat attribute with a value of “server,” they will be processed on the server by ASP.NET. The last phase of this processing is rendering the controls, which means that the asp code is converted to standard HTML so the page can be displayed by a browser.
If you look at the asp code for the drop-down list, you can see that the AutoPostBack attribute has been set to True. That means that a postback will occur whenever the user selects an item from that list. Note that a postback will also occur whenever the user clicks the Add to Cart button. However, the AutoPostBack attribute isn’t required for this control because performing a postback is the default operation of a button.
Another attribute that you should notice is the PostBackUrl attribute for the last button in the aspx code. This attribute provides the path for the Cart.aspx file, which means that the Cart form will be requested when this button is clicked. That’s one way to switch from one form to another as an application is run, and you’ll see another in the next figure.
Although this has been a quick introduction to the aspx code for a web form, you should begin to see how this code defines a web page. In the next two chapters, though, you’ll learn more about this code. And just in case you need it, chapter 5 presents a complete crash course in HTML.
The aspx file for the Order form (Order.aspx)
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Order.aspx.vb"
Inherits="Order" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Chapter 3: Shopping Cart</title>
<style type="text/css">
.style1
{
width: 250px;
}
.style2
{
width: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server"
ImageUrl="~/Images/banner.jpg"
/><br /><br />
<asp:Label ID="Label1" runat="server"
Text="Please select a product:"></asp:Label>
<:asp:DropDownList ID="ddlProducts" runat="server"
DataSourceID="AccessDataSource1" DataTextField="Name"
DataValueField="ProductID" Width="150px" AutoPostBack="True">
</asp:DropDownList>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/Halloween.mdb"
SelectCommand="SELECT [ProductID], [Name], [ShortDescription],
[LongDescription], [ImageFile], [UnitPrice]
FROM [Products] ORDER BY [Name]">
</asp:AccessDataSource><br />
<table>
<tr>
<td class="style1"><asp:Label ID="lblName" runat="server"
style="font-weight: 700; font-size: larger"></asp:Label>
</td>
<td class="style2" rowspan="4"></td>
<td rowspan="4" valign="top">
<asp:Image ID="imgProduct" runat="server" Height="200px" />
</td>
</tr>
.
. (Code for 3 more rows of a table)
.
</table><br />
<asp:Label ID="Label3" runat="server" Text="Quantity:"
Width="80px"></asp:Label>
<asp:TextBox ID="txtQuantity" runat="server" Width="80px"></asp:TextBox>
<asp:Button ID="btnAdd" runat="server" Text="Add to Cart" />
<asp:Button ID="btnCart" runat="server" CausesValidation="False"
PostBackUrl="~/Cart.aspx" Text="Go to Cart" />
</div>
</form>
</body>
</html>
Figure 1-10 The aspx code for the Order form
Next: The Visual Basic code for the Order form >>
More ASP.NET Articles
More By Murach Publishing
|
 This article is an excerpt from chapter one of Murach's ASP.NET 3.5 Web Programming with VB 2008, written by Anne Boehm (Murach, 2008; ISBN: 1890774472). Check it out today at your favorite bookstore. Buy this book now.
|
|
