Walkthrough: Creating a Basic Web Forms Page

This walkthrough illustrates how to create a Web Forms page. You will see how to add controls to the page and create code for them that will run on the server. Tasks illustrated in this walkthrough include:

• Creating a new Web Forms page.
• Adding controls and static HTML text to the page.
• Creating an event handler for the control.
• Building and running the Web Forms page.

When you are finished, your Web Forms page will look something like the following:

Creating the Project and Form

The first step is to create a Web application and a Web Forms page.

To create the project and form

1. On the File menu, point to New, then click Project.
2. In the New Project dialog box, do the following:
   1. In the Project Types pane, choose either Visual Basic Projects or Visual C# Projects.
   2. In the Templates pane, choose ASP.NET Web Application.
   3. In the Location box, enter the complete URL for your application, including http://, the name of the server, and the name of your project. The Web server must have IIS version 5 or later and the .NET Framework installed on it. If you have IIS on your computer, you can specify http://localhost for the server. (If you normally use a proxy server to access the Internet, you might need to configure Internet Explorer to bypass the proxy server in order to use localhost.)

      Tip   If you already have a solution open, choose Close Solution so that your new Web Forms project will be part of its own solution.

   When you click OK, a new Web Forms project is created at the root of the Web server you specified. In addition, a new Web Forms page called WebForm1.aspx is displayed in the Web Forms Designer in Design view.

Examining Web Forms Structure

Take a moment to see how Web Forms pages are structured and how the Web Forms Designer is laid out. The Web Forms Designer is open with a file called WebForm1.aspx. A Web Forms page consists of two separate files:

• The .aspx file contains the HTML text and the controls that make up the user interface of the page.
• A separate file, called WebForm1.aspx.vb or WebForm1.aspx.cs (depending on what language you specified for your project), contains the page's code — that is, it is the page's class file. It is sometimes referred to as the "code-behind" file. By default, Solution Explorer does not display the page's class file.

To see a page's class file in Solution Explorer

• Click the Show All Files button in the toolbar of Solution Explorer, then expand the node for WebForm1.aspx.

At the bottom of the Web Forms Designer are two tabs, Design and HTML, which show you different views of the .aspx file you are working with:

• Design view provides you with a WYSIWYG view where you can drag controls and use the Properties window to configure them.
• HTML view shows you the same information, but in the "raw" format of an HTML file. As in HTML files, the Web Forms Designer supports Intellisense for elements in HTML view.

You can work in either view. When you switch between them, each view is updated with changes you made in the other. As you will see later, you use the code editor to write code for the page's class file (.aspx.vb or .aspx.cs).

Adding Controls and Text

You can now add controls and text to the page.

Grid or Flow Mode

By default, the Web Forms page you are working with is in grid layout mode. In this mode, you can drag controls around the page and position them using absolute (x and y) coordinates. (For downlevel browsers, the controls are positioned using tables.)

If you prefer, you can work in flow layout mode, which is like a traditional HTML page — items are positioned from top to bottom. Each view has advantages: grid mode makes it easy to position items. In flow mode, it is easier to add static text. For details, see Positioning HTML Elements in Design View.

For this walkthrough, you will work in grid mode. You will learn how to position static text in this mode.

Adding Controls To Your Web Forms Page

Web Forms controls are called "server controls" because when the page runs, the controls are instantiated in server code as part of the page class. When users interact with the controls — for example, when users click a Web Forms button control — the code associated with the control runs on the server after the page is posted. In server code, you can write event handlers for server controls, set their properties, and so on.

Not every element on the Web Forms page is a server control. For example, by default, static HTML text is not a server control, and you cannot control it from server code. Even standard HTML controls (for example, an HTML submit button) are not server controls by default — they are not visible as first-class controls in server code. (HTML elements are programmable in client script, as in any HTML page.)

Therefore, to work with controls on a Web Forms page, you need to add them as server controls. Server controls come in two types:

• HTML server controls   These are HTML elements that are marked (that you convert) to be programmable in server code. Typically, you convert HTML elements to HTML server controls only if you have some reason to want to program them from server code.
• Web server controls   These are controls specific to Web Forms that provide more features than HTML server controls and do not map directly to HTML elements.

For more details about these controls, see Introduction to ASP.NET Server Controls.

In this section, you will add one of each type control.

To add an HTML server control to your Web Forms page

1. Click the Design tab at the bottom to switch to Design view.
2. From the HTML tab of the Toolbox, drag a Text Field element onto the page.

   Switch to HTML view to see that your action has added a tag similar to the following:

   <INPUT type="text">
   

3. Switch to Design view.
4. Convert the HTML text element to a server control by right-clicking it and choosing Run As Server Control.

   A glyph () appears in the upper-left corner of the control to indicate that the control is a server control. Converting an HTML element makes it into an HtmlInputText server control.

   Two attributes are added to the HTML element as part of this conversion:

   • The id attribute identifies the control in your code. For the HtmlInputText server control, this attribute is set by default to the name Text1.
   • The runat attribute is set to server. This marks the element as a server control and makes it visible to the Web Forms server code as a programmable element.

To add a Web server control to your Web Forms page

• From the Web Forms tab of the Toolbox (not the HTML tab), drag a Button Web server control onto the page.

  Tip   The Web Forms tab is only available when the designer is in Design view.

  This step creates a Web server control element in the designer rather than an HTML button. If you switch to HTML view, you will see the following:

  <asp:Button id="Button1" runat="server"></asp:Button>
  

  This element does not correspond directly to an HTML element. Instead, when the page runs, an instance of the Button Web server control is created and processed. During page processing, the control outputs some HTML elements into the page (in this case, an HTML <input type=submit> element).

Adding HTML Text to the Page

In grid layout mode, it is easy to position controls. But what about static HTML text? Because all the elements on the page are positioned with x and y coordinates, you cannot just type text into the page where you want it to appear, as you can in flow layout mode.

The solution is to add an HTML Label control in which you can add the static text. You can then position this label (essentially a <DIV> element) anywhere on the page.

To add static text in grid layout mode

1. From the HTML tab of the Toolbox, drag a Label control onto the page. Position it and size it for the text you want to enter.
2. Click the label to select it, and then click it again. (Do this slowly enough that you are not double-clicking the element.)

   The label is put into text-edit mode, which is marked by a shaded border.

3. Type the static text that you want. For example, type "Sample Web Forms Page".
4. Select the text and then use the tools on the Formatting toolbar to set the text's block format, font, size, and so on.
5. Click away from the label to leave text-edit mode.

Creating an Event Handler

Server controls on Web Forms pages can raise various events. Many events are triggered by something the user does in the browser. For example, a Button Web server control can raise a Click event when a user clicks a button on your page.

The code to handle the raised event is executed on the server. When the user clicks a button, the page is posted back to the server. The ASP.NET page framework parses the event information, and if you have an event handler corresponding to the event, your code is called automatically. When your code finishes, the page is sent back to the browser with any changes as a result of the event handler code.

To create an event handler for the Button Web server control

1. Double-click the Button Web server control.

   The designer opens the class file for the current form and creates a skeleton event handler for the button control's Click event. The code will look like this:

   ' Visual Basic
   Private Sub Button1_Click(ByVal sender as System.Object, ByVal e as System.EventArgs) Handles Button1.Click
   
   End Sub
   
   // C#
   private void Button1_Click(object sender, System.EventArgs e)
   {
   
   }
   

2. Write code in the method to display a message in the HtmlInputText server control by setting its Value property. For example:
   ' Visual Basic
   Private Sub Button1_Click(ByVal sender as System.Object, ByVal e as System.EventArgs) Handles Button1.Click
      Text1.Value = "Hello, Web Forms!"
   End Sub
   
   // C#
   private void Button1_Click(object sender, System.EventArgs e)
   {
         Text1.Value = "Hello, Web Forms!";
   }
   

Building and Running the Web Forms Page

Before you run your Web Forms page, you must compile the page's class file. You can then view the page in any browser.

To build and run the page

1. In Solution Explorer, right-click the WebForm1.aspx page, and then select View in Browser.

   Visual Studio compiles the page and displays it in the Browse tab.

2. Click the button on your Web Forms page.

   The text "Hello, Web Forms!" appears in the text box.

3. To stop running the form and return to design mode, close the Browse tab.

Next Steps

This is a simple Web Forms page, but it illustrates the fundamental steps that you use to create and edit Web Forms. From this start, you can begin to explore the tools provided in Visual Studio to help you create sophisticated Web applications. Suggestions for more exploration include:

• Investigate the types of controls you can use on Web Forms pages. For details, see Introduction to ASP.NET Server Controls.
• Experiment with working in flow layout mode instead of grid layout mode. For details, see Positioning HTML Elements in Design View.
• Check user input into your Web Forms page using validation controls. For details, see Introduction to Validating User Input in Web Forms.
• Explore the use of more complex controls such as the Calendar Web server control. For details, see Calendar Web Server Control.
• Learn about the security issues associated with Web Forms. For details, see Overview of Web Application Security Threats.
• Bind the form to a data source and display data in individual controls or in complex controls on the form. For more information, see Data Access in Web Forms Pages. Controls such as the DataList and the DataGrid are provided to ease the implementation of including data-driven user interfaces. For more information, see Introduction to the DataList Web Server Control and Introduction to the DataGrid Web Server Control.

See Also

Introduction to Web Forms Pages | Creating and Managing Web Forms Pages | ASP.NET Server Controls | Button Web Server Controls