What is postback?

When the ASP.NET server takes your .aspx page and builds HTML, this HTML gets sent to the browser. If you're building an interactive sight, the HTML will likely include buttons and other controls. When the user clicks a button, the information he or she entered into the controls gets sent back to the server. What happens then?

In the ASP.NET world, the server re-processes the same .aspx page and recreates another set of HTML. This might sound strange at first, but it allows you to include postback code. During this second run of the page, your page is running in a mode called postback. Your code can detect postback and act accordingly.

In the preceding example, you placed a TextBox and Button control on the page. When a browser requests this page, the server runs through your code, and generates appropriate HTML, which gets sent down to the browser.

When you interact with the browser and type your name and click the button, the data you entered gets sent back to the web server along with a request for the same page.

The web server re-processes your page. But in the server-side code you typed in the previous example, you checked if we're in this second processing, postback mode by using an if statement. Here's the code you typed:

<%
    if (this.IsPostBack) {
        Response.Write("<br>Welcome, ");
        Response.Write(TextBox1.Text);
        Response.Write("<br>");
    }
%>

This code ran both times the page was requested. The first time, the this.IsPostBack member returns false, and so the code inside the if block gets skipped.

The second time, however, we're in postback mode, and the IsPostBack member is true. Thus the code inside the if block runs this time.

This code inside the if block writes HTML to the output, which makes its way back to the browser. Thus, the first time you open the page, you don't see the Welcome text. When you type your name and click the button, the page refreshes, but this time the Welcome message is showing.

Your code can do more than just use the Reponse.Write call, however. You can manipulate the properties of other server-side controls. Let's try that.

In Visual Web Developer, still in the second page you created, switch to Design view by clicking the Design button as the bottom of the editor.

Position the blinking cursor to the right of the button and press Enter.

Then drag a Label control from the Toolbox onto your page, underneith the TextBox control, like so:

A Label control doesn't do much other than write out text into the HTML file. However, you can use it programmatically as you'll see here.

Right now, the Label control has a thick border around it and three little square handles, which means the control is selected. (If you un-selected it, single-click on it in your page.) Go over to the Properties window in the lower-right of the window. The top of the Properties window will say Label1 so you know which control you're setting properties for. (If it doesn't, you can click the dropdown in the Properties window and choose Label1.)

Still in the Properties window, scroll down, and in the section called Appearance, find the property called Text, as shown here:

Click in the area to the right of the word Text, and highlight and delete the word Label, like so:

This is the text that appears in the label. One the first viewing of the page, we want nothing to appear at all, so we're blanking it out.

Now, in the editor, click the Source button to return to source view. Timing is everything here, and we want our server-side code to run before the ASP.NET server generates the HTML for the Label control. So with the mouse, grab the line starting with <asp:Label and cut and paste it so it's after your C# code. Then replace the C# code with this code shown in blue bold. (Notice also where the <asp:Label line is now.)

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

Save the file. Right-click in the editor and choose View in Browser. The result will be the same as the last time; you can type your name, click the button, and see a friendly message.

Notice what the code does: It builds a string that includes the value of the TextBox1.Text property, and saves the string in the Label1 control's Text property. Then when the ASP.NET server generates the HTML, the label will display the text you provided.

Remember the two times the page was processed. The first time, the label's Text value will retain the value you gave it in the Properties window (in this case, just a blank string). During postback, your code runs, which places some different text in the Label control. And that's exactly what you saw happen when you viewed the page in the browser.

Next Time

Next time, we'll continue our exploration and add some database access. The server-side controls make database access incredibly easy. See you then!