ASP.NET 3.5 - Tutorial - ASP.NET AJAX

Create a new ASP.NET Web Application project in Visual Studio.

Normal postback

Add a Label and a Button to the page:
Add the following code to the Page_Load method:
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
Run the page and test the button. Note that after clicking the button, the entire page is refreshed and the browser informs the user about the request:

ScriptManager

Check the source code of the output page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>

</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTI2NTY4ODI3MQ9kFgICAw9kFgICAQ8PFgIeBFRleHQFEzIwMDgtMTItMDEgMTY6Mjk6MzBkZGRjP/Au3IyvlGGdLCevKPCHxsWV1w==" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKvz4izBwKM54rGBiEhTsyhLU3XkVd490N5C2TbyVCW" />

</div>

    <span id="Label1">2008-12-01 16:29:30</span>
    <input type="submit" name="Button1" value="Button" id="Button1" />
    </form>
</body>
</html>
Add a ScriptManager control to the page (it can be found on the AJAX Extensions group of Visual Studio Toolbox). It is required to make any AJAX calls from the page.
Run the page and check its source code again:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>

</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE3MTEzOTExMTQPZBYCAgMPZBYCAgEPDxYCHgRUZXh0BRMyMDA4LTEyLTAxIDE2OjMzOjEyZGRk12GquRl4/+q/wd7iT/mG9zL0iDM=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>

</script>

<script src="/WebResource.axd?d=boKdlgX6xxOSfkouTjX6Ug2&t=633527857956801634" type="text/javascript"></script>

<script src="/ScriptResource.axd?d=bSzS2RxdiRwnkdqgo3I48UZSYl3OvVyQESuz1P7oZJz1Pe6tVgIzIBqL48cfD74HVM66mzcFsB9vfLS9sBkkjDvhMVddPyh1_jSGXH9hx2s1&t=161e11a4" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=bSzS2RxdiRwnkdqgo3I48UZSYl3OvVyQESuz1P7oZJz1Pe6tVgIzIBqL48cfD74H2ThAplue0-A1D9vLHKvCXNoAZpcA49czRICatrgYr3g1&t=161e11a4" type="text/javascript"></script>
<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLY0t8OAoznisYGp8hdTj3/AmDeqyfgbeQPoQDIBAE=" />
</div>

    <span id="Label1">2008-12-01 16:33:12</span>

    <input type="submit" name="Button1" value="Button" id="Button1" />

    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>



<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
</form>
</body>
</html>
Note that adding the ScriptManager control to the page makes it much more complicated. Note also that some JavaScript libraries are automatically loaded by the page.

UpdatePanel

Add two UpdatePanel controls to the page (AJAX Extensions group of the Toolbox), each containing a Label and a Button. Note that the ContentTemplate inside an UpdatePanel must be used.
Modify the Page_Load method to change all Label controls' text.
protected void Page_Load(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToString();
    Label2.Text = Label1.Text;
    Label3.Text = Label1.Text;
}
Run the page, test all buttons. Note that only the first button causes visible refreshing of the page. Note also that both new buttons cause both new labels to refresh, but the first label is not refreshed. The conclusion is that only controls placed inside UpdatePanel controls can be modified using AJAX callbacks.
The 2nd conclusion is that, if there is a need to distinguish controls updated in AJAX calls, use event handlers rather than the Load event:
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Label1.Text = DateTime.Now.ToString();
        Label2.Text = Label1.Text;
        Label3.Text = Label1.Text;
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToString();
}

protected void Button2_Click(object sender, EventArgs e)
{
    Label2.Text = DateTime.Now.ToString();
}

protected void Button3_Click(object sender, EventArgs e)
{
    Label3.Text = DateTime.Now.ToString();
}
Note that when the UpdatePanel is used, neither the amount of bandwidth being used nor the time taken to receive the response from the server is reduced, because the entire page is still sent. The only difference is that the page is updated without a distracting flicker.

Timer

Add a new Label control and a Timer control (the Timer control can be found on the AJAX Extensions group of the Toobox) to the page. Set the Timer's interval to 1000 milliseconds and add a handler for the Tick event of the timer:
In the handler of the Tick event set the Label's text:
protected void Timer1_Tick(object sender, EventArgs e)
{
Label4.Text = DateTime.Now.ToString();
}
Run the page and note that entire page is refreshed according to the timer's tick.
Add a new UpdatePanel control to the page and place both the timer and the label inside its ContentTemplate tag:
The page refreshes the last label only now.
Note that each refresh causes a request sent to the server. Such request is simplified, but almost the full ASP.NET page's lifecycle must be processed to prepare a response. Timer set to tick every second is not a good idea. If there is a need to do something similar to the above example, use JavaScript code and avoid requesting a server.
To enable more tests, increase the Interval property's value to 60000 (1 minute).

UpdateProgress

The UpdateProgress control doesn't actually indicate progress; instead, it provides a wait message that reassures the user that the page is still working and the last request is still being processed.
Add a new UpdatePanel control to the page with one Button. Do something really time consuming in the handler of the Click event of the button, e.g. force the thread to sleep for 5 seconds:
protected void Button4_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
}
Add an UpdateProgress control to the page. Inside its ProgressTemplate tag, place some code displaying something what should be visible when a request is being processed:
Run the page and test AJAX callbacks. Note that all asynchronous calls automatically display the UpdateProgress and hide it when completed.