Search This Blog

2009-05-14

Client Side Callbacks in ASP.NET 2.0

ASP.NET 2.0 includes a new Client Callback feature that enables you to retrieve page values and populate them to an already-generated page with out reconstructing page. This makes it possible to use on a page with out going through the entire post back cycle; that means you can update your pages without completely redrawing the page.
So you can do partial postback like ajax without using the update pannel of Ajax.
In my following example I am taking two dropdown list,on change the value of first dropdown it will populate the values of second dropdown without any postback.

Step 1. First take two dropdownlist in the body of your HTML
<asp:DropDownList ID="DropDownList1" AutoPostBack="false" runat="server" >
<asp:ListItem>A</asp:ListItem>
<asp:ListItem>B</asp:ListItem>
<asp:ListItem>C</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList></div>

Step 2.Declare a class level variable (before the pageload event and within the class)
private string earg;

Step 3.Inherit The Interface ICallbackEventHandler as follows
public partial class Default2 : System.Web.UI.Page, ICallbackEventHandler

Step 4. Now Implement the interface ICallbackEventHandler

#region ICallbackEventHandler Members

public string GetCallbackResult()
{
System.Text.StringBuilder sb1 = new System.Text.StringBuilder();
string strDropDownList1Value = this.earg;

DataSet ds = getDropDownList2Values(strDropDownList1Value);

for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
sb1.Append(ds.Tables[0].Rows[i][0]);
sb1.Append("");
sb1.Append(ds.Tables[0].Rows[i][1]);
sb1.Append("");
}
return sb1.ToString();
}

public void RaiseCallbackEvent(string eventArgument)
{
this.earg = eventArgument;
}

#endregion

Step5.Write a function that will populate the value of second dropdown
protected DataSet getDropDownList2Values(string strDropDownList1Value)
{
DataTable objDataTable = new DataTable("GridDetails");
DataSet objDataSet = new DataSet();
DataRow objDR;

objDataSet.Tables.Add(objDataTable);
objDataTable.Columns.Add("Text", typeof(string));
objDataTable.Columns.Add("Values", typeof(string));

objDR = objDataTable.NewRow();
objDR["Text"] = "Data1" + " : " + strDropDownList1Value;
objDR["Values"] = "Data1" + " : " + strDropDownList1Value;
objDataTable.Rows.Add(objDR);

objDR = objDataTable.NewRow();
objDR["Text"] = "Data2" + " : " + strDropDownList1Value;
objDR["Values"] = "Data2" + " : " + strDropDownList1Value;
objDataTable.Rows.Add(objDR);

objDR = objDataTable.NewRow();
objDR["Text"] = "Data3" + " : " + strDropDownList1Value;
objDR["Values"] = "Data3" + " : " + strDropDownList1Value;
objDataTable.Rows.Add(objDR);

return objDataSet;
}

Step 6.Now go to your HTML page and write the following Javascript Function
<script language ="javascript" type="text/javascript">
function clientResponse(result,ctx,mm,nn)
{

var lstItems =document.all.DropDownList1;
var options = lstItems.getElementsByTagName("option");
var lstCustomers =document.all.DropDownList2;
// Clear out any content in the list.
lstCustomers.innerHTML= "";
// Get an array with a list of territory records.
var rows = result.split('');
for (var i = 0; i < rows.length - 1; ++i)
{
// Split each record into two fields.
var fields = rows[i].split('');
var customerID = fields[0];
var customerName = fields[1];
// Create the list item.
var option = document.createElement("option");
// Store the ID in the value attribute.
option.value = customerID;
// Show the description in the text of the list item.
option.innerHTML = customerName;
lstCustomers.appendChild(option);
}
}
function ErrorFunction(error , ctx)
{
alert("The Event Failed Becuase " + error);
}

</script>

Step 7.In the page directive write the following code
EnableEventValidation="false" as follows

<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

Step 8.Now its time to run your application,Before Running it you just check your code behind file with the following complete Code
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2 : System.Web.UI.Page, ICallbackEventHandler
{
private string earg;

protected void Page_Load(object sender, EventArgs e)
{
string eventRef = Page.ClientScript.GetCallbackEventReference(this, "document.getElementById('DropDownList1').value", "clientResponse", "null", "ErrorFunction", true);
DropDownList1.Attributes["onchange"] = eventRef;
}
#region ICallbackEventHandler Members
public string GetCallbackResult()
{
System.Text.StringBuilder sb1 = new System.Text.StringBuilder();
string strDropDownList1Value = this.earg;

DataSet ds = getDropDownList2Values(strDropDownList1Value);

for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
sb1.Append(ds.Tables[0].Rows[i][0]);
sb1.Append("|");
sb1.Append(ds.Tables[0].Rows[i][1]);
sb1.Append("||");
}
return sb1.ToString();
}
public void RaiseCallbackEvent(string eventArgument)
{
this.earg = eventArgument;
}
#endregion
protected DataSet getDropDownList2Values(string strDropDownList1Value)
{
DataTable objDataTable = new DataTable("GridDetails");
DataSet objDataSet = new DataSet();
DataRow objDR;

objDataSet.Tables.Add(objDataTable);
objDataTable.Columns.Add("Text", typeof(string));
objDataTable.Columns.Add("Values", typeof(string));

objDR = objDataTable.NewRow();
objDR["Text"] = "Data1" + " : " + strDropDownList1Value;
objDR["Values"] = "Data1" + " : " + strDropDownList1Value;
objDataTable.Rows.Add(objDR);

objDR = objDataTable.NewRow();
objDR["Text"] = "Data2" + " : " + strDropDownList1Value;
objDR["Values"] = "Data2" + " : " + strDropDownList1Value;
objDataTable.Rows.Add(objDR);

objDR = objDataTable.NewRow();
objDR["Text"] = "Data3" + " : " + strDropDownList1Value;
objDR["Values"] = "Data3" + " : " + strDropDownList1Value;
objDataTable.Rows.Add(objDR);
return objDataSet;
}
}

Step9.Now run your application and change the values of your first dropdown ,Now you can see that the values of second dropdown will be changed without any postback

No comments: