Scribd Logo
Încărcați

Bine ați venit la Scribd!

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

    Încărcat de

    sunilchoubey
    146 vizualizări6 pagini
    ASP.NET

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    ASP.NET

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    146 vizualizări6 pagini

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

    Încărcat de

    sunilchoubey
    ASP.NET

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 6

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


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

    S-ar putea să vă placă și