Let's implement the ICallbackEventHandler to call server
side methods asynchronously step by step
Implement Server Side (C#) Page/Control class by
System.Web.UI.ICallbackEventHandler
Following are definition of two methods which needs to
implement:
RaiseCallbackEvent method invoke by JavaScript function
Listing 2
public void RaiseCallbackEvent(string eventArgument)
{
string[]commands = eventArgument.Split("," .ToCharArray());
if (commands[0].Equals("LoadSubCategory"))
{
DropDownList ddlSubcategories = new DropDownList();
switch (commands[1])
{
case "Autos":
ddlSubcategories.Items.Add("Cars");
ddlSubcategories.Items.Add("Bikes");
break;
case "Electronics":
ddlSubcategories.Items.Add("Computers");
ddlSubcategories.Items.Add("TV");
break;
}
ddlSubcategories.Attributes.Add("onchange", "CallSrv(this);");
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter(sb);
HtmlTextWriter htw = new HtmlTextWriter(sw);
ddlSubcategories.RenderControl(htw);
this.RenderedOutput = "LoadSubCategory," + sb.ToString();
}
else if (commands[0].Equals("LoadProducts"))
{
DataTable dtProducts = new DataTable();
dtProducts.Columns.Add("ProductName");
dtProducts.Columns.Add("ProductDescription");
dtProducts.Columns.Add("ProductPrice");
DataRow drProduct;
switch (commands[1])
{
case "Cars":
drProduct = dtProducts.NewRow();
drProduct["ProductName"] = "Honda";
drProduct["ProductDescription"] = "2000 CC";
drProduct["ProductPrice"] = "$1000";
dtProducts.Rows.Add(drProduct);
drProduct = dtProducts.NewRow();
drProduct["ProductName"] = "Toyota";
drProduct["ProductDescription"] = "1800 CC";
drProduct["ProductPrice"] = "$800";
dtProducts.Rows.Add(drProduct);
break;
case "Bikes":
drProduct = dtProducts.NewRow();
drProduct["ProductName"] = "Pak Hero";
drProduct["ProductDescription"] = "125 CC";
drProduct["ProductPrice"] = "$100";
dtProducts.Rows.Add(drProduct);
drProduct = dtProducts.NewRow();
drProduct["ProductName"] = "Honda";
drProduct["ProductDescription"] = "250 CC";
drProduct["ProductPrice"] = "$150";
dtProducts.Rows.Add(drProduct);
break;
case "Computers":
drProduct = dtProducts.NewRow();
drProduct["ProductName"] = "Dell";
drProduct["ProductDescription"] = "P4 Centrino";
drProduct["ProductPrice"] = "$400";
dtProducts.Rows.Add(drProduct);
drProduct = dtProducts.NewRow();
drProduct["ProductName"] = "IBM";
drProduct["ProductDescription"] = "P4 Think PAD";
drProduct["ProductPrice"] = "$350";
dtProducts.Rows.Add(drProduct);
break;
case "TV":
drProduct = dtProducts.NewRow();
drProduct["ProductName"] = "Sony";
drProduct["ProductDescription"] = "Plasma";
drProduct["ProductPrice"] = "$600";
dtProducts.Rows.Add(drProduct);
drProduct = dtProducts.NewRow();
drProduct["ProductName"] = "Philips";
drProduct["ProductDescription"] = "Projection";
drProduct["ProductPrice"] = "$550";
dtProducts.Rows.Add(drProduct);
break;
}
GridView grvProducts = new GridView();
grvProducts.DataSource = dtProducts;
grvProducts.DataBind();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter(sb);
HtmlTextWriter htw = new HtmlTextWriter(sw);
grvProducts.RenderControl(htw);
this.RenderedOutput = "LoadProducts," + sb.ToString();
}
}
public string GetCallbackResult()
{
return RenderedOutput;
}
In the Page_Load or Page_Init events
Following statements are used to register client side methods.
CallServer(arg, context) as name implies would use to
call/raise server side method which was RaiseCallbackEvent string
eventArgument)
ReceiveServerData(arg, context) would use to get result
through arg parameter by GetCallbackResult()
Listing 3
//Register Client Script for Callback and populate categories
protected void Page_Load(object sender, EventArgs e)
{
ClientScriptManager scriptMgr = Page.ClientScript;
String cbReference = scriptMgr.GetCallbackEventReference(this, "arg",
"ReceiveServerData", "");
String callbackScript = "function CallServer(arg, context) {" + cbReference +
"; }";
cm.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript,
true);
if (!Page.IsPostBack)
{
//Load Products Data
this.ddlCategories.Items.Add("Select");
this.ddlCategories.Items.Add("Autos");
this.ddlCategories.Items.Add("Electronics");
}
}