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. 2. 3. 4. 5.

On the File menu, point to Add New Project, and then click New Project. In the New Project dialog box, on the Project Types list, click Visual Basic Projects In the Templates list, click ASP.NET Web Application. Set the Location to http://localhost/LabSessions/Lab-04. 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 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

name

to

<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. 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.

2.

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 MyWebControls.aspx, and click Open.

the

default

name

to

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 Button Label1 TextBox Property ID Text ID Text ID Text Value cmdSubmit Submit lblMessage Message txtName 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. 5. Close the source view of the page. 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 2.
GridLayout) in the Page Layout field, and then click OK. The grid disappears. 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. 3. Close the source view of the page. 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 Button TextBox Property name value name value Value cmdSubmit Submit txtName 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 6.
different tag style and code compared to Web Form controls 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 3. 4. 5.
6. demonstration, in HTML view, and then add a runat="server" attribute to the text box, select, and submit controls. Click Save All to save the project. 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. View the source of the page to show the changes that were made. Notice that a name attribute was added to each server control. Close the view of the HTML source code in the browser.

Sign up to vote on this title
UsefulNot useful