Walkthrough: Creating a Basic Web Page with Code Separation in Visual Web Developer

  • Article

When you create ASP.NET Web pages and write code in them, you can choose from two models for how to manage the visible elements (controls, text) and your programming code. In the single-file model, the visible elements and code are kept together in the same file. In the alternative model, called "code separation," the visible elements are in one file and the code is in another file, referred to as the "code-behind" file. This walkthrough introduces you to Web pages that use code separation.

The single-file model is introduced in Walkthrough: Creating a Basic Web Page in Visual Web Developer. The walkthrough you are reading now shows you how to create a Web page with the same functionality as the page in the single-file walkthrough, but with a focus on using code separation.

The choice between using single-file pages and pages with code separation is primarily one of convenience and personal preference. Working with both models in Microsoft Visual Web Developer is similar; both models have approximately equal support in the editor. Both models have equivalent performance when the page runs. The page with code separation makes it more practical to let a Web designer work on the layout of a page while a programmer creates the code for the page, because the two pages can be edited separately.

Tasks illustrated in this walkthrough include:

  • Using Visual Web Developer to create an ASP.NET page with code separation.

  • Adding controls.

  • Adding event handlers.

  • Running pages with the ASP.NET Development Server.

Prerequisites

In order to complete this walkthrough, you will need:

  • Visual Web Developer and the .NET Framework.

Creating a Web Site and Page

In this part of the walkthrough, you will create a Web site and add a new page to it. You will also add HTML text and run the page in your Web browser.

If you have already created a Web site in Visual Web Developer (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and skip to "Creating a New Page" later in this walkthrough. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

  1. Open Visual Web Developer.

  2. On the File menu, click NewWeb Site.

    The New Web Site dialog box appears.

  3. Under Visual Studio installed templates, click ASP.NET Web Site.

  4. In the Location box, select File System and enter the name of the folder where you want to keep the pages of your Web site.

    For example, type the folder name C:\BasicWebSite.

  5. In the Language list, click Visual Basic or Visual C#.

    Note

    Visual Web Developer currently does not support creating code-behind pages in Visual J#.

    The programming language you choose will be the default for your Web site, but you can set the programming language for each page individually.

  6. Click OK.

    Visual Web Developer creates the folder and a new page named Default.aspx.

Creating a New Page

When you create a new Web site, Visual Web Developer adds a page named Default.aspx. By default, Visual Web Developer creates a page with code separation.

To add a page with code separation to the Web site

  1. Close the Default.aspx page. To do this, right-click the tab with the file name in it and select Close.

  2. In Solution Explorer, right-click the Web site (for example, C:\BasicWebSite) and choose Add New Item.

  3. Under Visual Studio installed templates, choose Web Form.

  4. In the Name box, type WebPageSeparated.

  5. From the Language list, choose the programming language you prefer to use (Visual Basic or C#).

  6. Verify that the Place code in separate file check box is selected.

    By default, this check box is selected.

  7. Click Add.

    Visual Web Developer creates two files. The first file, WebPageSeparated.aspx, will contain the page's text and controls, and is opened in the editor. A second file, WebPageSeparated.aspx.vb or WebPageSeparated.aspx.cs (depending on what programming language you selected), is the code file. You can see both files in Solution Explorer by clicking the plus sign () next to the WebPageSeparated.aspx file; the code file has been created but is not open. You will open it later in the walkthrough when you write code.

Adding HTML to the Page

In this part of the walkthrough, you will add some static HTML text to the WebPageSeparated.aspx page.

To add text to the page

  1. Click the Design tab at the bottom of the document window to switch to Design view.

    Design view displays the page you are working on in a WYSIWYG-like way. At this point, you do not have any text or controls on the page, so the page is blank.

  2. Place the insertion pointer in the div element that is already on the page.

  3. Type the words Welcome to Visual Web Developer Using Code Separation.

  4. Switch to Source view.

    You can see the HTML that you created by typing in Design view. At this stage, the page looks like an ordinary HTML page. The only difference is in the <%@ Page %> directive at the top of the page.

Adding and Programming Controls

In this part of the walkthrough, you will add a button, text box, and label control to the page and write code to handle the button's Click event. Server controls, which include buttons, labels, text boxes, and other familiar controls, provide typical form-processing capabilities for your ASP.NET Web pages. However, you can program the controls with code that runs on the server, not the client.

To add controls to the page

  1. Click the Design tab to switch to Design view.

  2. Place the insertion pointer after the text that you added previously.

  3. Press ENTER a few times to make some room.

  4. From the Standard tab in the Toolbox, drag three controls onto the page: a TextBox control, a Button control, and a Label control.

  5. Put the insertion pointer in front of the text box and type Enter your name:.

    This static HTML text is the caption for the TextBox control. You can mix static HTML and server controls on the same page.

Setting Control Properties

Visual Web Developer offers you various ways to set the properties of controls on the page. In this part of the walkthrough, you will work with properties in both Design view and Source view.

To set control properties

  1. Select the Button control and, in the Properties window, set its Text property to Display Name.

  2. Switch to Source view.

    Source view displays the HTML for the page, including the elements that Visual Web Developer has created for the server controls. Controls are declared using HTML-like syntax, except that the tags use the prefix asp: and include the attribute runat="server".

    Control properties are declared as attributes. For example, when you set the button's Text property in Step 1, you were actually setting the Text attribute in the control's markup.

    Note that all the controls are inside a form element that also has the attribute runat="server". The runat="server" attribute and the asp: prefix for control tags mark the controls so that they are processed by ASP.NET when the page runs.

Programming the Button Control

For this walkthrough, you will write code that reads the name that the user enters in the text box and then displays it in the Label control.

To add a default button event handler

  1. Switch to Design view

  2. Double-click the Button control.

    Visual Web Developer opens the WebPageSeparated.aspx.vb or WebPageSeparated.aspx.cs file in a separate window in the editor. The file contains a skeleton Click event handler for the button.

  3. Complete the Click event handler by adding the following highlighted code.

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
        Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

    Notice that as you type, IntelliSense helps you with context-sensitive choices. This is identical to the behavior when you are coding in a single-file page.

Examining the Page and Code File

You now have two files that make up the complete WebPageSeparated page: WebPageSeparated.aspx and WebPageSeparated.aspx.vb or WebPageSeparated.aspx.cs. In this section of the walkthrough, you will examine how these files are structured and how they relate to each other.

To examine the page and code file

  1. Click the WebPageSeparated.aspx tab at the top of the editor window to switch to the page file.

  2. Switch to Source view.

    At the top of the page is an @ page directive that binds this page to the code file. The directive looks like the following code.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>

    (The line does not wrap in the editor, and the language attribute and file name extensions will match the programming language you selected.)

    When the page runs, ASP.NET dynamically creates an instance of a class representing the page. The Inherits attribute identifies the class defined in the code-behind file from which the .aspx page is derived. By default, Visual Web Developer uses the page name as the basis for the class name in the code-behind file.

    The CodeFile attribute identifies the code file for this page. In simple terms, the code-behind file contains the event-handling code for your page.

  3. Click the WebPageSeparated.aspx.vb or WebPageSeparated.aspx.cs tab to switch to the code file.

    The code file contains code that is similar to a class definition. However, it is not a complete class definition; instead, it is a "partial class" that contains only a portion of the complete class that will make up the page. Specifically, the partial class defined in the code file contains the event handlers and other custom code that you write. At run time, ASP.NET generates another partial class containing your user code. This complete class is then used as the base class that is used to render the page. For more information, see ASP.NET Page Class Overview.

    Note

    If you are familiar with the code-behind model used in Microsoft Visual Studio .NET 2003, you will notice that in the new model, the code-behind class does not contain any generated code beyond the class definition itself. For example, the class does not contain instance variables for controls on the page. This type of generated code is no longer required.

Running the Page

You can now test the page.

To run the page

  1. Press CTRL+F5 to run the page in the browser.

    The page runs using the ASP.NET Development Server.

    Note

    If the browser displays a 502 error or an error indicating that the page cannot be displayed, you might need to configure your browser to bypass proxy servers for local requests. For details, see How to: Bypass a Proxy Server for Local Web Requests.

  2. Enter a name in the text box and click the button.

    The name you entered is displayed in the Label control.

  3. In the browser, view the source of the page you are running.

  4. Close the browser.

    The page works exactly the same as it would if it were a single-file page. (If you followed the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer to create a single-file page, you can compare the two pages to see that they are the same when running.)

Next Steps

This walkthrough has illustrated how to create and edit a Web page that uses code separation. From the perspective of creating and running the page, there is not a significant difference between a single-file page and a page with code separation.

You might want to explore other features. For example, you might want to:

See Also

Tasks

Walkthrough: Creating a Basic Web Page in Visual Web Developer

Concepts

Types of Web Sites in Visual Web Developer