You are on page 1of 16

Module 3

Creating a Microsoft ASP.NET Web Form

Module Overview
Creating Web Forms Adding and Configuring Server Controls in a Web Form

Lesson 1: Creating Web Forms


What Is a Web Form? How to Create a Web Form

What Is a Web Form?


Web Forms are containers for the text and controls that you want to display in the browser Page directive and attributes
<%@ Page Title="" AutoEventWireup="true" Language="C#" CodeFile="Default.aspx.cs" Inherits="Default" %> <html> <body> <form id="form1" runat="server"> </form>

C# Web Form named Default.aspx HTML element Body element

Form element and attributes

</body>
</html>

How to Create a Web Form

Creating a new Web application or Web site

Use either the New Project or New Web Site dialog box

Adding additional Web Forms to an existing application

Use the Add New Item dialog box

Lesson 2: Adding and Configuring Server Controls in a Web Form


What Is a Server Control? Types of Server Controls

Saving View State


Adding and Configuring HTML Server Controls Adding and Configuring Web Server Controls

Discussion: Selecting the Appropriate Server Control

What Is a Server Control?


Server controls run on the server and encapsulate user interface

Server Controls: Contain the runat="server" attribute Include buttons, text boxes, and lists

Save state to View state


Provide built-in functionality Use a common object model Create browser-specific HTML
The following is a code example of a Button Web server control
<asp:Button ID="Button1" runat="server" Text="Submit"/> ...renders as... <input id="Button1" type="submit" value="Submit" />

Types of Server Controls

HTML server controls

Web server controls

One-to-one mapping to rendered HTML elements

Standard controls Intrinsic controls Complex controls Data controls Data-bound controls Data source controls Validation controls Login controls Navigation controls

Saving View State


View state is a hidden control that records the state of the controls on the Web Form. The ASP.NET page framework uses View state to preserve page and control values between round trips. The following code shows how to implement View state

<asp:ListBox ID="ListBox1" EnableViewState="true" runat="server"> </asp:ListBox>

You can use View state: To persist application data that is specific to a single page To know how many times a user postbacks the same page in sequence to the server

Adding and Configuring HTML Server Controls


To add the HTML server controls to the Web Form: Use the drag and drop operation to add the control from the Toolbox To configure the control: Set the properties by using the Properties window

The following code displays how to add and configure the HTML server control

<input type="text" id="Text1" runat="server" />

Adding the runat="server" attribute converts the control to an HTML server control that is processed on the server side by ASP.NET

Adding and Configuring Web Server Controls

To add and configure Web server controls:


1. In Solution Explorer, open the Default Web Form in Design view 2. Add the TextBox control to the Web Form

3. Change the ID property of the TextBox control to SampleTextBox


4. Set the Text property of the TextBox control to Sample

Discussion: Selecting the Appropriate Server Control

Which server control is appropriate for your Web Form

HTML server control or Web server control?


Is it appropriate to use HTML server controls instead of Web server controls? What are the situations in which you might use HTML server controls or Web server controls?

Lab: Creating a Microsoft ASP.NET Web Form


Exercise 1: Creating a Web Form Exercise 2: Adding and Configuring Server Controls in a

Web Form

Logon information

Virtual machine User name

10267A-GEN-DEV Student

Password

Pa$$w0rd

Estimated time: 60 minutes

Lab Scenario

Lab Review
Review Questions
What are the advantages of Web Form controls? What type of Web server controls are used in the lab?

Module Review and Takeaways


Review Questions Real-World Issues and Scenarios

Best Practices