A second example: Server-side Controls

Writing HTML from the server side is easy, but for complex tasks, you can make use of server-side controls that do a lot of work behind the scenes.

In Visual Studio or Visual Web Developer, add a new web page to your site by clicking File⇒New File.

In the Add New Item dialog box, choose Web Form. (A Web Form is a standard ASP.NET web page.) Pick any name you want for the file, but make sure it has a .aspx extension. Choose Visual C# for the language. Leave the two checkboxes unclicked as they are. Then click Add.

In the code editor window, note the two tab buttons at the bottom labeled Design and Source, as shown in the figure to the right. Click the Design button.

Now your editor is in Design mode, where you can create your page in a WYSIWYG manner. You can type text and format it with the toolbar at the top. And you can also drop server-side controls on the page.

In the editor, type the following:

What is your name?

Then press Enter to move to a new line.

In the Toolbox (found on the loeft side of the window), under the section called Standard, find the TextBox control. With the mouse, click on the TextBox control and drag it onto your form, dropping it just below the text you typed. Your form will look like the following:

Now in the toolbox find the Button control. Drag it onto your form and place it to the right of the TextBox control. Your form will now look like this:

Switch back to Source view by clicking the Source button at the bottom of the code window. Look at the code that you now have in between the div tags:

<div>
    What is your name?<br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" /></div>

The text you typed is there, and now two server-side controls are present. (The sever-side controls show up as tags that start with asp:.)

Add a carriage return before the </div> line to move it to the next line. Now let's add some C# code that will detect a postback, which I'll explain shortly. Add the following code shown in blue bold:

<div>
What is your name?<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<%
    if (this.IsPostBack) {
        Response.Write("<br>Welcome, ");
        Response.Write(TextBox1.Text);
        Response.Write("<br>");
    }
%>
</div>

Now run the page by right-clicking in the code editor and in the popup menu clicking View in Browser.

The page will open in the browser, looking like this:

Type something into the text box and click the button. You'll then see a message appear like so:

Before moving to the third example, let me explain briefly what happened, as this is important to understanding how ASP.NET pages work. We used a process called postback. I discuss this on the next page of this article.