1. ASP.NET Forms

2. Learning Outcomes Creating and running a simple Web-Form example.
Understanding the structure of an ASPX File.
Understanding asp.net Web form.
Understanding the relationship between an ASPX file and a
code behind file.
Understanding how the code in an asp.net Web page executes.
Building an asp.net Web application.

3. Introduction ASP.NET 2.0 and Web Forms and Controls
Web application development with Microsoft’s ASP.NET 2.0 technology
Web Form files have the filename extension .aspx and contain the Web page’s GUI
Every ASPX file created in Visual Studio has a corresponding class written in a .NET language, such as Visual Basic, C#
Contains event handlers, initialization code, utility methods and other supporting code
Called the code-behind file
Provides the ASPX file’s programmatic implementation

4. Examining an ASPX File Examining an ASPX File
ASP.NET comments begin with <%-- and terminate with --%>
Page directive
Specifies the language of the code-behind file
AutoEventWireup attribute
Determines how Web Form events are handle
Inherits attribute
Specifies the class in the code-behind file from which this ASP.NET class inherits
ASP.NET markup is not case-sensitive, so using a different case is not problematic

5. Examining an ASPX File asp: tag prefix in a control declaration
runat attribute
Indicates that when a client requests this ASPX file:
Process the head element and its nested elements on the server and generate the corresponding XHTML sent to the client
asp: tag prefix in a control declaration
Indicates that it is an ASP.NET Web control
Each Web control maps to a corresponding XHTML element
When processing a Web control, ASP.NET generates XHTML markup that will be sent to the client to represent that control in a Web browser

6. Fig. 1| ASPX file that displays the web server’s time. (Part 1 of 2. )
Outline
Visual Web Developer generates the markup shown in Fig. 1 when you create the GUI.
WebTime.aspx
( 1 of 2 )
ASP.NET comments begin with <%-- and terminate with --%>, and can span multiple lines.
The Page directive specifies information needed by ASP.NET to process this file.
The document type declaration, which specifies the document element name and the PUBLIC URI for the DTD that defines the XHTML vocabulary.
XHTML documents have the root element html and markup information about the document in the head element.
The form that contains our XHTML text and controls is set to execute on the server, which generates equivalent XHTML.
The body contains the main content that the browser displays.
Fig. 1| ASPX file that displays the web server’s time. (Part 1 of 2. )

7. In an ASPX file a directive is delimited by <%@ and %>.
Outline
WebTime.aspx
( 2 of 2 )
Markup for a label web control.
The asp: tag prefix indicates that the label is an ASP.NET web control, not an XHTML element.
In an ASPX file a directive is delimited by and %>.
Fig. 1 | ASPX file that displays the web server’s time. (Part 2 of 2. )

8. Examining an ASPX File
The asp:Label control is written as an XHTML span element.
A span element contains text with formatting styles.
This control is processed on the server so that the server can translate the control into XHTML.
If this is not supported, the asp:Label element is written as text to the client.

9. Figure 2 presents the code-behind file.
Outline
Figure 2 presents the code-behind file.
WebTime.aspx.cs
(1 of 2 )
The Page_Init method handles the page’s Init event, which indicates that the page is ready to be initialized.
Retrieve the current time and formats it as hh:mm:ss.
Fig. 2 | Code-behind file for a page that displays the web server’s time. (Part 1 of 2.)

10. Outline
WebTime.aspx.cs
(2 of 2 )
Fig. 2 | Code-behind file for a page that displays the web server’s time. (Part 2 of 2.)
The Page_Init method handles the page’s Init event, which indicates that the page is ready to be initialized.

11. Relationship Between an ASPX File and a Code-Behind File
ASP.NET creates two Partial classes behind the scenes
A class defined in the code-behind file
A class based on the markup in the ASPX file
Defines the page’s visual representation
Web controls
System.Web.UI.WebControls
Derive from class WebControl

12. How the Code in an ASP.NET Web Page Executes
When an instance of a page is created
PreInit event occurs, invoking method Page_PreInit
Init event invokes method Page_Init
Used to initalize objects and other aspects of the page
Load event occurs and the Page_Load event handler executes
Inherited from class Page
The page processes any events raised by the page’s controls after Page_Load finishes executing
Unload event occurs when a Web Form object is ready for garbage collection
Event handler Page_Unload
Contains any code that releases resources

13. Examining the XHTML Generated by an ASP.NET Application
XHTML forms can contain visual and nonvisual components
Attribute method
Specifies the method by which the Web browser submits the form to the server
Attribute action
Identifies the name and location of the resource that will be requested when this form is submitted
The runat attribute is removed when the form is processed on the server
The method and action attributes are added
The resulting XHTML form is sent to the client browser

14. Outline
Figure 3 shows the XHTML generated by ASP.NET when a web browser requests WebTime.aspx (Fig. 22.4).
WebTime.html
( 1 of 2 )
Attribute method of the form element specifies the request method (usually get or post). The action attribute identifies the resource that will be requested when a form is submitted.
Nonvisual form components, called hidden inputs, store data that the user doesn’t need to see.
Fig. 3 | XHTML response when the browser requests WebTime.aspx. (Part 1 of 2. )

15. Outline
WebTime.html
( 2 of 2 )
The form contains a span element to represent the text in the label. Formatting properties of timeLabel are converted into the style attribute of the span element.
Fig. 3 | XHTML response when the browser requests WebTime.aspx. (Part 2 of 2. )

16. Source File
To view this XHTML, select View Source from the Page menu ( ) in Internet Explorer (or View > Page Source if you are using Firefox).
Nonvisual form components, called hidden inputs, store data that the user doesn’t need to see.
Attribute method of the form element specifies the request method (usually get or post). The action attribute identifies the resource that will be requested when a form is submitted.

17. Creating and Running a Simple Web-Form Example (Cont.)
When the form is processed on the server, the runat attribute is removed.
Only those elements marked in the ASPX file with runat="server" are modified or replaced in the generated XHTML.

18. Windows Firewall Settings
For security reasons, Windows Firewall does not allow remote access to a web server on your local computer by default.
You can change this using the Windows Firewall utility in the Windows Control Panel.

19. Building an ASP.NET Web Application
To build the WebTime application, perform the following steps in Visual Web Developer:
Step 1: Creating the Web Application Project
Select File > New Web Site... and choose ASP.NET Web Site in the Templates pane.
Select File System from the drop-down list closest to Location.
Set the Language drop-down list to Visual C#, and click OK.

20. Building an ASP.NET Web Application
Fig. 4 | Creating an ASP.NET Web Site in Visual Web Developer.

21. Fig. 5 | Solution Explorer window for project WebTime.
Step 2: Examining the Solution Explorer of the Newly Created Project
The Solution Explorer is shown in Fig. 5.
Nest Related Files
View Code
View Designer
Copy Web Site
Refresh
Properties
ASP.NET Configuration
Data files folder
ASPX file
Code-behind file
Website configuration file
Fig. 5 | Solution Explorer window for project WebTime.

22. Creating and Running a Simple Web-Form Example (Cont.)
An ASPX file (i.e., Web Form) named Default.aspx is created for each new project.
Visual Web Developer creates a code-behind file named Default.aspx.cs.
The View Designer button opens the Web Form in Design mode.
The Copy Web Site button allows you to copy the project’s files to another location, such as a remote web server.
Finally, the ASP.NET Configuration button takes you to the Web Site Administration Tool.

23. Creating and Running a Simple Web-Form Example (Cont.)
Step 3: Examining the Toolbox in Visual Web Developer
Figure 6 shows the Toolbox displayed in the IDE when the project loads.

24. Toolbox in Visual Web Developer
Figure 6 (a) displays the beginning of the Standard list of web controls.
Figure 6 (b) displays the remaining web controls, as well as the list of Data controls used in ASP.NET.
Fig. 6 | Toolbox in Visual Web Developer.

25. Fig. 7| Source mode of the Web Forms Designer.
Step 4: Examining the Web Forms Designer
Figure 7 shows the Web Forms Designer in Source mode, which appears in the center of the IDE.
Source
mode button
Source
mode button
Split mode button
Design
mode button
Fig. 7| Source mode of the Web Forms Designer.

26. Web Forms Designer
When the project loads for the first time, the Web Forms Designer displays the autogenerated ASPX file in Source mode.

27. Web Forms Designers (Cont.)
Clicking the Design button in the lower-left corner of the Web Forms Designer switches to Design mode (Fig. 8).
Cursor
Cursor’s current location
Fig. 8| Design mode of the Web Forms Designer.
Design mode indicates the XHTML element where the cursor is currently located.

28. Web Forms Designers (Cont.)
You can also view both the markup and the web-page design at the same time by using Split mode, as shown in Fig. 9.
Fig. 9| Split mode of Web Forms Designer.

29. Code Behind File Step 5: Examining the Code-Behind File in the IDE
The next figure (Fig. 10) displays the code-behind file generated by Visual Web Developer for Default.aspx.
Fig. 10| Code-behind file for Default.aspx generated by Visual Web Developer
Right click the ASPX file in the Solution Explorer and select View Code to open the code-behind file.

30. Renaming the ASPX File Step 6: Renaming the ASPX File
Right click the ASPX file in the Solution Explorer and select Rename.
Enter the new file name WebTime.aspx and press Enter. Both the ASPX file and the code-behind file are updated.

31. Updating ASPX File
Step 7: Renaming the Class in the Code-Behind File and Updating the ASPX File
Visual Studio’s refactoring tool, which automatically updates the existing references to this class in the rest of the project to reflect this change.
Right click the class name in the partial class’s declaration and select Refactor > Rename… to open the Rename dialog (Fig. 11).

32. Specify WebTime as the new class name and click OK.
Fig. 11| Rename dialog.
Specify WebTime as the new class name and click OK.

33. Title of the Page Step 8: Changing the Title of the Page
We change the page’s title from the default Untitled Page to A Simple Web Form Example.
Open the ASPX file in Source mode and modify the text between the <title> tags.
Alternatively, you can modify the Web Form’s Title property in the Properties window.
To view the Web Form’s properties, select DOCUMENT from the drop-down list in the Properties window.