Ajax PostBack Async Callback example

Download AjaxTest - 45 KB

Introduction

When building an Ajax enabled application i stumbled into some nasty pitfalls.

When creating ascx controls, with Update Panels etc.. i noticed that, whatever you do the Page_load action is executed always of all elements on that page. In my case it would always trigger a DataBase load from a SQL server to a GridView.
When trying to avoid that i couldn't find a command which determined which UpdatePanel was invoking the Async Postback.
So that's why i started to examine the PostBack, Async Postback, and Callback actions provided by ASP.NET

The small project i created just simply lets you show what to expect of the different actions.

Background

The project uses modified examples from other sources.

async_test.aspx show the use and difference between Callback, Async PostBack and Postback

Using the code

Below a code-snippet of the what to expect in async_test.aspx

The Asynctest.aspx page      
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AsyncTest.aspx.cs" Inherits="AjaxTest.AsyncTest" %>

<!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 runat="server">

<title>Untitled Page</title>

<script type="text/ecmascript">

function LookUpStock()

{

var lb = document.getElementById("ListBox1");

var product = lb.options[lb.selectedIndex].text;

CallServer(product, "");

}

function ReceiveServerData(rValue)

{ 

document.getElementById("ResultsSpan").innerHTML = rValue;

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>



<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<asp:Label ID="Label1" runat="server" Text="In UpdatePanel"></asp:Label>

<asp:Label ID="lbInPanel" runat="server"></asp:Label>

<asp:Label ID="lbAsync" runat="server"></asp:Label>

<asp:Button ID="btInPanel" Text="In Panel" runat="server" />

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="btInPanel" EventName="click" />

<asp:AsyncPostBackTrigger ControlID="btOutPanel" /> 

<asp:PostBackTrigger ControlID="btPostBack" />

</Triggers>

</asp:UpdatePanel>

<br />

<asp:Button ID="btOutPanel" Text="Out Panel" runat="server" />

<br />

<asp:Button ID="btpostBack" Text="PostBack" runat="server" />

<hr />

<asp:Label ID="Label2" runat="server" Text="Out Update Panel"></asp:Label>

<asp:Label ID="lbOutPanel" runat="server" Text="Label"></asp:Label>

<br />

<hr />

<asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>

<br />

<button type="Button" onclick="LookUpStock()">Look Up Stock</button>



Callback results

<br />

<span id="ResultsSpan" runat="server"></span>

</div>



</form>

</body>

</html>
   
The async_test code behind   
using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

namespace AjaxTest

{

public partial class AsyncTest : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler

{

protected System.Collections.Specialized.ListDictionary catalog;

protected String returnValue;

protected void Page_Load(object sender, EventArgs e)

{

String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");

String callbackScript;

callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + ";}";

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);

catalog = new System.Collections.Specialized.ListDictionary();

catalog.Add("monitor", 12);

catalog.Add("laptop", 10);

catalog.Add("keyboard", 23);

catalog.Add("mouse", 17);

ListBox1.DataSource = catalog;

ListBox1.DataTextField = "key";

ListBox1.DataBind();

Boolean IsInAsync = ScriptManager.GetCurrent(Page).IsInAsyncPostBack;

lbAsync.Text = "Async:" + IsInAsync; 

lbAsync.Text = lbAsync.Text + " Postback:" + this.IsPostBack.ToString();

lbInPanel.Text = DateTime.Now.ToString();

lbOutPanel.Text = DateTime.Now.ToString();

}

public void RaiseCallbackEvent(String eventArgument)

{

if (catalog[eventArgument] == null)

{

returnValue = "-1";

}

else

{

returnValue = "<Strong>Callback:" + this.IsCallback.ToString() + "</Strong>:StockValue" + catalog[eventArgument].ToString();

}

}

public String GetCallbackResult()

{

return returnValue;

}

}

}