Lab 4: Working With ASP .NET Web Form Objectives After

Lab 4: Working with ASP .
NET Web Form
Objectives
After completing this lab, you will be able to:
• Convert an HTML Page to a Web Form
• Adding controls to the Web Form
• Convert HTML controls to Web Form controls
Lab 4.1: Converting an HTML Page to a Web Form
Open an existing Visual Studio .NET solution

Open the solution LabSessions that you have created during Lab 2.
Add a new project file for this lab activity

1. On the File menu, point to Add New Project, and then click New Project.
2. In the New Project dialog box, on the Project Types list, click Visual Basic Projects
3. In the Templates list, click ASP.NET Web Application.
4. Set the Location to http://localhost/LabSessions/Lab-04.
5. Right-click the project Lab-04 and click on Set as StartUp Project.
Create a new HTML Page

1. On the Project menu, click Add HTML Page.
2. In the Add New Item dialog box, change the default name to
ConvertPage.htm, and click Open.
3. On the View menu click on HTML Source or press CTRL+PgDn
4. Change the code so it looks as follows
<html>
<head>
<title>ConvertPage</title>
</head>
<body>
<h1>Welcome to my WebSite</h1>
<P><FONT color="blue"><b>This is a page that I will convert
from HTML to WebForm... </b></FONT></P>
<form>
<INPUT type="text" ID="Text1" NAME="Text1">
<INPUT type="button" value="Click Me" ID="Button1"
NAME="Button1">
</form>
</body>
</html>
The HTML Page should look as follows

1. In Solution Explorer, right-click ConvertPage.htm and then click Rename.
Change the .htm extension of the page to .aspx, click Yes when asked if you
are sure, and then click Yes again when you are asked to create a new class
file.
2. In the Solution Explorer, double click on ConvertPage.aspx to open it in the
Design View. On the View menu click on HTML Source or press
CTRL+PgDn. Notice that a @Page directive is added to the page.
The code will now look as follows :

<%@ Page CodeBehind="ConvertPage.aspx.vb" Language="vb" AutoEventWireup="false"
Inherits="Lab_03.ConvertPage" %>
<HTML>
<HEAD>
<title>ConvertPage</title>
</HEAD>
<body>
<h1>Welcome to my WebSite</h1>
<P><FONT color="blue"><b>This is a page that I will convert from HTML
to WebForm...</b></FONT></P>
<form>
<INPUT type="text" ID="Text1" NAME="Text1"> <INPUT
type="button" value="Click Me" ID="Button1" NAME="Button1">
</form>
</body>
</HTML>
3. Click Show All Files in Solution Explorer to see the code-behind page that is
created.
4. Click Save All to save the project.
5. Right-click ConvertPage.aspx in Solution Explorer, then click Build and
Browse to build the project and view the page in the Visual Studio .NET
browser. You must build the project because Visual Studio .NET needs to
compile the new code-behind page.
Lab 4.2 Adding Controls to a Web Form
Create a new Web Form

1. On the Project menu, click Add Web Form.
2. In the Add New Item dialog box, change the default name to
MyWebControls.aspx, and click Open.
Adding simple Web server controls

1. Open the MyWebControls.aspx page in the Lab-04 Web Application project in
Design View.
2. From the ToolBox, under Web Form Tab, add a TextBox, a Button, and a
Label Web Form control to the MyWebControls.aspx page.
3. Using the Properties window, set the ID and Text properties of the controls
to the values in the following table:
Control Property Value
Button ID cmdSubmit
Text Submit
Label1 ID lblMessage
Text Message
TextBox ID txtName
Text Name
4. View the page in HTML view. Notice that the Web Form was created with the
runat="server" attribute, and that style attributes were added to the
controls to place them on the Web Form in GridLayout mode. Also, notice
how the ID and Text properties are implemented in HTML for the different
controls.
5. Build and browse MyWebControls.aspx.
6. Enter some text in the text box and then click Submit
7. View the source of the page. Notice that the positioning of the controls is
done by using DHTML.
8. Close the source view of the page.
Change the target browser
1. Right-click the form in Design view and then click Properties.

2. Change the Target Schema to Internet Explorer 3.02 / Navigator 3.0,
and then click OK.
3. Save your changes and view the page in the browser again.
4. View the source of the page. Notice that now the positioning of the controls is
done by using HTML tables.
6. Right-click the form in Design view and then click Properties.
7. In the Property Pages dialog box, return the Target Schema to Internet
Explorer 5.0.
Change the page layout
1. In the Property Pages dialog box, select FlowLayout (instead of

GridLayout) in the Page Layout field, and then click OK. The grid
disappears.
2. Add a Button control to the Web form, and view the page in HTML view. The
new button does not have a style attribute.
Add a Calendar control
1. In Design view, add a Calendar Web server control onto the Web Form, and
then view the page in HTML view. Locate the HTML for the Calendar control:
<asp:Calendar id="Calendar1" runat="server"></asp:calendar>
2. Save your changes and view the page in the browser, and then view the
source of the page. Notice the entire HTML that is generated by the Calendar
control.
4. Edit the MyWebControls.aspx page and notice the properties of the Calendar
control in the Properties window.
5. Right click the Calendar control on the Web Form in Design view and select
Auto Format to show the different styles in the Calendar Auto Format
dialog box. Click Colorful 1, and then click OK.
6. Save your changes and view the page in browser again to see the new
appearance of the Calendar control.
Adding simple HTML controls

1. Open the MyWebControls.aspx page in the Mod04 Web Application project in
Design View.
2. From the ToolBox, under HTML Tab, add a TextBox, a Button, and a Label
HTML control to the MyWebControls.aspx page.
3. Using the Properties window, set the properties of the controls to the values
in the following table:
Control Property Value
Button name cmdSubmit

value Submit
TextBox name txtName

value Name
4. To change the Label text, Go to the HTML View and between the <DIV> tag
enter the text that you want to display in the Label
The Web Form should look as follows :
(The controls aligned at the top are Web Form and the below one are HTML controls)
5. View the page in HTML view. Notice that the HTML controls have created
different tag style and code compared to Web Form controls
6. Build and browse MyWebControls.aspx.
Lab 4.3 Converting HTML controls to Web Form controls
Open the existing Web Form

1. Open the MyWebControls.aspx page in the Mod04 Web Application project in
Design View.
2. View the HTMLPage.aspx page that you converted from an HTML page in the previous
demonstration, in HTML view, and then add a runat="server" attribute to the text box,
select, and submit controls.
3. Click Save All to save the project.
4. View the HTMLPage.aspx page in the browser by right-clicking the page in Solution
Explorer and then clicking View in Browser. You do not have to rebuild the project because
you did not change any code.
5. View the source of the page to show the changes that were made. Notice that a name attribute
was added to each server control.
6. Close the view of the HTML source code in the browser.

Lab 4: Working With ASP .NET Web Form Objectives After

Uploaded by

Copyright:

Available Formats

Lab 4: Working With ASP .NET Web Form Objectives After

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 4: Working With ASP .NET Web Form Objectives After

Uploaded by

Copyright:

Available Formats

Lab 4: Working with ASP .

NET Web Form

Lab 4.1: Converting an HTML Page to a Web Form

Open an existing Visual Studio .NET solution

Add a new project file for this lab activity

Create a new HTML Page

The HTML Page should look as follows

The code will now look as follows :

Create a new Web Form

Adding simple Web server controls

Control Property Value

Change the target browser

1. Right-click the form in Design view and then click Properties.

1. In the Property Pages dialog box, select FlowLayout (instead of

Add a Calendar control

Adding simple HTML controls

Control Property Value

Button name cmdSubmit

TextBox name txtName

Open the existing Web Form

You might also like