ASP.NET Web Forms

Web Forms is a mature .NET Framework technology for creating Web applications. It provides many of the standard Web controls and allows for simple development through dragging and dropping controls on the web page.

In this section we will see how to create a simple Web Forms application, featuring only a labels, textbox and two buttons. We will use this application to explain the basics of the Web Forms technology. Later, we will look at a more complex Web Forms application with a database connection.

Simple Web Forms Application

To create a new Web Forms Application, start Visual Studio, go to “File” menu and select “New” > “Project”. A new dialog window appears. Select “Web” on the left and then “ASP.NET Web Application”, type the name of the application and click “OK”:

New Project 1

In the following window, select that we want to start with an empty application and that we would like to use the “Web Forms” technology:

New Project 2

Once you click “OK” a new Web Forms application will be created.

The project does not include any web pages yet. Add a new web page by right-clicking on the project name in the Solution Explorer and selecting “Add” > “New Item…”. In the new window, select the “Web Form”, name it “Default.aspx” and click “OK”:

Create Default Web Form

This will create a default web page / web form for our application. You should now see the code as well as the design view of the new form:

Default Web Form Code And Design

The initial code specifies that:

  • This is a Web Forms Page
  • We will use C# language
  • We would like to register all page events automatically
  • There is a code behind code file available and the name of the associated class in this file

Below the page tag, you will find the usual code for an empty HTML page. Please note, that you will need to place all your controls inside the pre-generated form and that by convention, there can only be one form per page.

The form as well as its other tags can have the “runat” attribute set to “server”. This means that the form (or other tags, controls, etc.) will be processed on the server before they are sent as an HTML content to the client. Setting this attribute is crucial for all of the ASP.NET Web Forms controls as basically everything in ASP.NET Web Forms is meant to be handled on the server.

In addition to the Default.aspx code file, you should also see a “Toolbox” window on your left:

Toolbox Window

Let us now use the Toolbox window and add some controls to the page. We will need a label, textbox, two buttons and yet another label. Drag the controls to the pre-created <div> tag. You should end up with a code looking like this:

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

To promote a good coding standard, rename the controls and change their Text properties:

<asp:Label ID="NameLabel" runat="server" Text="Your name:"></asp:Label>
<asp:TextBox ID="NameTextBox" runat="server"></asp:TextBox>
<asp:Button ID="ClickMe1Button" runat="server" Text="Click me 1" />
<asp:Button ID="ClickMe2Button" runat="server" Text="Click me 2" />
<asp:Label ID="ResponseLabel" runat="server"></asp:Label>

Move the last label control to a separate line by placing it inside a new <div>. Add a new Visisble = “false” attribute to the label as we do not want it to be initially visible:

    <asp:Label ID="ResponseLabel" runat="server" Visible="false"></asp:Label>

We need to register two Click event handlers – one for each of our two buttons. The simplest way to add an event handler is to type it directly as an attribute to the button controls. Visual Studio IntelliSense will assist you with the event creation:

Click Handler

You will find the new event handlers in the code behind code file. Let us make the first button to show the greeting in the ResponseLabel:

protected void ClickMe1Button_Click(object sender, EventArgs e)
    ResponseLabel.Visible = true;
    ResponseLabel.Text = "Hi " + NameTextBox.Text + "!";

The second button will show the greeting through a message box in the user’s internet browser. We will push this to the browser through the use of JavaScript:

protected void ClickMe2Button_Click(object sender, EventArgs e)
    ScriptManager.RegisterStartupScript(this, GetType(), "alertMessage",
        "alert('Hi " + NameTextBox.Text + "!');", true);

One you have everything set up, you can run the application by pressing F5. Visual Studio will launch a new instance of IIS Express, which is a small IIS web server that will host the website on the local computer. Once the server is running, Visual Studio will also open up an internet browser and point it to the website. You should see the following:

Simple Web Forms Application - running

The port on the localhost may vary.

You can test the application by typing your name in the textbox and clicking either of the buttons. The first button will do a post back to the server and returns HTML that has the ResponseLabel visible and filled with the appropriate greeting:

Greeting 1

The second button also does a post back to the server. This time, however, the server returns a page with JavaScript to show the greeting in a message box on the page load:

Greeting 2

You can examine the HTML code returned from the server. There you will find the fore mentioned JavaScript as well as other hidden fields such as the “__VIEWSTATE” field. This field includes a string of encoded data that allows the Web Forms technology to track the state of the view on the server. Every time you do a post back to the server for example, the page retains all the data typed to the textboxes and other controls. This is managed for you automatically thanks to the ViewState.

The ViewState and other hidden fields try to make the web development experience as close as possible to the one of WinForms, WPF or any other rich client applications. In other words, the ASP.NET Web Forms technology tries to simulate a state-full environment.

The complete Simple Web Forms Application is available for download.

Advanced Web Forms Application

There are many Web Forms controls available. As these controls have various properties, events, etc., it is beyond the scope of this topic to describe them all. For more information, use MSDN documentation on specific controls.

To see how drop down list and grid views can be used, you can also examine the Advanced Web Forms Application. There you will see how you can build an application similar to the ones we have already built in the Windows Forms and Windows Presentation Foundation topics:

Advanced Web Forms Application - running

Continue to: ASP.NET MVC

Go up to: Web Applications

Should you have any questions or found a mistake that needs correcting, feel free to send an email to: info [at] mycsharp [dot] net

Advertisements :