Hello, world!

As usual, we will use the good old "Hello, world!" as our very first example. We will begin with the code, and then we'll do a bit of explanation afterwards. If you haven't already done so, you should create a new website project in Visual Web Developer, based on the AJAX-Enabled website template. The current code will look like ordinary ASP.NET, with a few new web controls. The markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello, world!</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel runat="server" id="HelloWorldPanel">
        <ContentTemplate>
            <asp:Button runat="server" id="SayHelloButton" text="Hello, world!" onclick="SayHelloButton_Click" />
            <br /><br />
            <asp:Label runat="server" id="HelloWorldLabel" /> 
        </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

In the CodeBehind, there's nothing new except for this event which you should add:

protected void SayHelloButton_Click(object sender, EventArgs e)
{
    HelloWorldLabel.Text = "Hello, world! A random number: " + new Random().Next().ToString();
}

Nothing fancy here, really. When we create the new website, a Default.aspx file is created for us, including the ScriptManager control. This control should be used on every page where you wish to use AJAX, since it creates basic AJAX support on your page, besides giving some more advanced possibilities, which we will look into later on. After the manager, we have one of the most used controls when working with AJAX, the UpdatePanel. This control allows you to wrap markup which you would like to allow to be partially updated, that is, updated without causing a real postback to the server. More about the UpdatePanel in a coming chapter. Besides those two controls, everything else is standard controls, with no modifications that would indicate alternate behavior.

Try running the example site, and click the button. The label will be updated with our usual Hello world text, and a random number. Try repeatedly clicking the button, and you will see the label get a new number each time. Notice the wonderful absence of a blinking window and a running status bar - everything is done without updating anything but the label! We've just created our first AJAX enabled page. If you wish to see how this page would work without AJAX, try setting the "enablepartialrendering" of the ScriptManager to false like this:

<asp:ScriptManager ID="ScriptManager1" runat="server" enablepartialrendering="false" />

This will disallow the use of partial rendering on the page, and show you how it would work without AJAX.

In the following chapters we will look into the various AJAX controls and how to use them. Read on…

Hello, world!

Tutorials

Table Of Contents

The Basics

Controls