This section is intended to demonstrate how to build a simple Web Form and also to explain some of how ASP.NET Web Forms work from the inside out. Along the way, you’ll be introduced to several new elements of the Visual Studio IDE.
Starting Up
Creating a new Web Forms application, as described near the beginning of this chapter, is where almost all new ASP.NET applications begin. You will learn shortly what actually happens when a new application is created, along with the uses of the myriad of files that are created.
For now, create a new Web Forms project, and call the project MyFirstWebApp instead of WebApplication1. Simply put, Visual Studio now creates a comprehensive framework for the application that can easily be built upon, along with one Web Form to start from.
Designing the Web Form
Designing Web Forms in Design view is literally as easy as drag and drop. To add controls to the form, simply drag them from the Toolbox and onto the form.
NOTE: There are two modes in which you can create Web Forms: Grid Layout mode or Flow Layout mode. The difference between the two is essentially that in Grid Layout mode, the form design is performed almost identically to form design in Visual Basic applications. When a component is dropped onto the form, it snaps to the nearest points on a grid, giving the UI designer almost 100 percent precision over the positioning of controls on the form.
Flow Layout mode follows a word processor style of design. The position of controls is relative to the other controls on the page. In this book, Flow Layout mode is used unless otherwise specified. I present instructions for modifying the layout mode of the form shortly.
You can insert all content on the form that does not need to be programmatically accessed by simply typing on the form, as you would with a word processor. However, any content that needs to be programmatically accessed must be in the form of Web or HTML Controls, which you insert by dragging and dropping from the Toolbox.
To start with your form, add one Button and one Label Web Control to the form. However, before doing this, you need to change the layout mode of the form. To do this, choose DOCUMENT in the Properties window and change the pageLayout property to FlowLayout. After you add the two controls, the Form Designer should look similar to Figure.
The Generated "HTML"
<%@ Page Language="c#" AutoEventWireup="false"<br>
Codebehind="WebForm1.aspx.cs"<br>
Inherits="MyFirstWebApp.WebForm1"%><br>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0<br>
Transitional//EN"><br>
<HTML><br>
<HEAD><br>
<title></title><br>
<meta content="Microsoft Visual Studio.NET 7.0"<br>
name="GENERATOR"><br>
<meta content="JavaScript" name="vs_defaultClientScript"><br>
<meta content=http://schemas.microsoft.com/intellisense/ie5<br>
name="vs_targetSchema"><br>
</HEAD><br>
<body><br>
<form id="Form1" method="post" runat="server"><br>
<asp:Button id="Button1" runat="server" Text="Button"></asp:Button><br>
<asp:Label id="Label1" runat="server">Label</asp:Label><br>
</form><br>
</body><br>
</HTML><br>
There are three points to note about this "HTML" code that has been generated. The first is the runat attribute of the form element. The HTML standard does not include a runat attribute for the form element, but because this file is going to be processed before it is actually sent to the client browser, ASP.NET files can contain syntax that is not strictly HTML. In this case, the runat attribute exists so that
ASP.NET knows to process this form for things that need to happen on the server side before the file is sent to the client.
The second snippet of note is the <asp:button> "element." Again, HTML does not contain such an element. This is actually the ASP.NET UI syntax for a Web Control, and it signals for ASP.NET to process this element on the server side. Note that this "element" also contains a runat attribute.
Third is the <asp:label> element. Identical to the previous point, this is the syntax used in ASP.NET to denote a Web Control—this time, a label.
Starting Up
Creating a new Web Forms application, as described near the beginning of this chapter, is where almost all new ASP.NET applications begin. You will learn shortly what actually happens when a new application is created, along with the uses of the myriad of files that are created.
For now, create a new Web Forms project, and call the project MyFirstWebApp instead of WebApplication1. Simply put, Visual Studio now creates a comprehensive framework for the application that can easily be built upon, along with one Web Form to start from.
Designing the Web Form
Designing Web Forms in Design view is literally as easy as drag and drop. To add controls to the form, simply drag them from the Toolbox and onto the form.
NOTE: There are two modes in which you can create Web Forms: Grid Layout mode or Flow Layout mode. The difference between the two is essentially that in Grid Layout mode, the form design is performed almost identically to form design in Visual Basic applications. When a component is dropped onto the form, it snaps to the nearest points on a grid, giving the UI designer almost 100 percent precision over the positioning of controls on the form.
Flow Layout mode follows a word processor style of design. The position of controls is relative to the other controls on the page. In this book, Flow Layout mode is used unless otherwise specified. I present instructions for modifying the layout mode of the form shortly.
You can insert all content on the form that does not need to be programmatically accessed by simply typing on the form, as you would with a word processor. However, any content that needs to be programmatically accessed must be in the form of Web or HTML Controls, which you insert by dragging and dropping from the Toolbox.
To start with your form, add one Button and one Label Web Control to the form. However, before doing this, you need to change the layout mode of the form. To do this, choose DOCUMENT in the Properties window and change the pageLayout property to FlowLayout. After you add the two controls, the Form Designer should look similar to Figure.
The Generated "HTML"
<%@ Page Language="c#" AutoEventWireup="false"<br>
Codebehind="WebForm1.aspx.cs"<br>
Inherits="MyFirstWebApp.WebForm1"%><br>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0<br>
Transitional//EN"><br>
<HTML><br>
<HEAD><br>
<title></title><br>
<meta content="Microsoft Visual Studio.NET 7.0"<br>
name="GENERATOR"><br>
<meta content="JavaScript" name="vs_defaultClientScript"><br>
<meta content=http://schemas.microsoft.com/intellisense/ie5<br>
name="vs_targetSchema"><br>
</HEAD><br>
<body><br>
<form id="Form1" method="post" runat="server"><br>
<asp:Button id="Button1" runat="server" Text="Button"></asp:Button><br>
<asp:Label id="Label1" runat="server">Label</asp:Label><br>
</form><br>
</body><br>
</HTML><br>
There are three points to note about this "HTML" code that has been generated. The first is the runat attribute of the form element. The HTML standard does not include a runat attribute for the form element, but because this file is going to be processed before it is actually sent to the client browser, ASP.NET files can contain syntax that is not strictly HTML. In this case, the runat attribute exists so that
ASP.NET knows to process this form for things that need to happen on the server side before the file is sent to the client.
The second snippet of note is the <asp:button> "element." Again, HTML does not contain such an element. This is actually the ASP.NET UI syntax for a Web Control, and it signals for ASP.NET to process this element on the server side. Note that this "element" also contains a runat attribute.
Third is the <asp:label> element. Identical to the previous point, this is the syntax used in ASP.NET to denote a Web Control—this time, a label.
No comments:
Post a Comment