|
Total Views :
2441 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
One Interface: |
|
ICallbackEventHandler is an interface that can be implemented in a Asp.Net web page
in order to invoke a server side code from the client script. This avoids repeated
callback to the server or re-creating of controls to output in the client browser.
While implementing ICallbackEventHandler, we must implement its two main server
side method such as RaiseCallbackEvent and GetCallbackResult and there must be atleast
three client script functions, which are explained below with ease. |
|
|
|
|
|
|
Two server-side methods:
RaiseCallbackEvent: This method will be called to perform
the callback on the server. Inputs from the client are passed are arguments for
processing.
GetCallbackResult: This method will return the callback
result as string to the client browser for output display.
Three client-side JavaScript functions:
1. A caller function that is used to call the helper function
2. A callback function to receive the output as string and display it in the browser.
3. A helper function that performs actual request to the server. This function is
created from Asp.Net code-behind page using GetCallbackEventReference
method.
|
|
Program Demonstration and Design
For the purpose of demonstration, we are going to display some customer information in a GridView control and perform filtering those records based on Customer Name
and Customer City.
Controls to be added in Aspx page
1. Add a <div /> tag inside the <form /> tag
of your aspx and set its Id as “divGridView”.
2. Place a GridView control inside the <div /> tag
and set its EmptyDataText property as “No Records Found”.
3. Add two HTML TextBox controls, above the GridView control
but outside the <div /> tag, set its Id property as “txtCusName” and “txtCusCity”.
4. Add two HTML button controls, besides the TextBoxes
set its Id property as “btnFilter” and “btnShowAll”, then set its value property
as “Filter” and “Show All” respectively.
The complete html source will look like
below
|
<input id="txtCusName" type="text" />
<input id="txtCusCity" type="text" />
<input id="btnFilter" type="button" value="Filter" />
<input id="btnShowAll" type="button" value="Show All" />
<div id="divGridView"><asp:GridView ID="GridView1"
runat="server" EmptyDataText="No Records Found."></asp:GridView></div> |
|
Implementation and Code-behind
Step 1: Add necessary namespace and declare a private
string variable at page scope to hold the result that needs to be send to the client-side.
using System.Data.SqlClient;
using System.IO;
private string strOutput; |
Step 2: Add the ICallbackEventHandler interface to implement
into the web page at the class declaration section as follows,
|
public partial class _Default : System.Web.UI.Page, ICallbackEventHandler |
Step 3: Add two web methods such as RaiseCallbackEvent
and GetCallbackResult. Whenever ICallbackEventHandler is implemented, then it is
mandatory to implement these two methods.
public void RaiseCallbackEvent(String clientArgs)
{
}
public string GetCallbackResult()
{
return strOutput;
} |
Step 4:
Create the helper function using the GetCallbackEventReference
in the Page_Load event within the IsPostBack block as follows,
if (!IsPostBack)
{
ClientScriptManager csm = Page.ClientScript;
String callbackRef = csm.GetCallbackEventReference(this,
"arg", "fnGetOutputFromServer", "");
String callbackScript = "function fnCallServerMethod(arg,
context) {" + callbackRef + "; }";
csm.RegisterClientScriptBlock(this.GetType(), "fnCallServerMethod",
callbackScript, true);
} |
|
|
|
The above code uses GetCallbackEventReference method to define the callback function
“fnGetOutputFromServer” to receive the output from the server. Then we create the
helper function called “fnCallServerMethod”, which performs actual request to the
server. This function is registered to the client side by the RegisterClientScriptBlock
method.
The work flow is, the client function fnCallServerMethod calls
the server method RaiseCallbackEvent, which process the request,
sends the output to another server method GetCallbackResult, which
in turn sends the output as string to the client function fnGetOutputFromServer,
to display the output in the browser.
Step 5: Bind the GridView control with a private method
as follows, |
|
|
private DataTable BindGrid()
{
string sql = "Select * from Customers";
SqlDataAdapter da = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["ConnectionString"].ToString());
DataTable dt = new DataTable();
da.Fill(dt);
this.ViewState["Table"] = dt;
return dt;
} |
|
The above method returns a DataTable with all records from the Customers table. Meanwhile we also save the DataTable in a ViewState variable, this is to avoid repeated
access to the database on every filter. Call this method from the Page_Load event
to bind with the GridView control. The below code must be also placed within the
IsPostBack block.
GridView1.DataSource = BindGrid();
GridView1.DataBind(); |
Now you can execute this page to view the GridView populated with Customers data.
Step 6: Write server side method “FilterGrid” to perform
filtering the records based on Customer Name and City.
|
private void FilterGrid(string CusName, string CusCity)
{
DataTable dt = (DataTable)this.ViewState["Table"];
DataView dv = dt.DefaultView;
if (SearchText != "")
dv.RowFilter = "Cus_Name Like '%" + CusName + "%' And Cus_City Like
'%" + CusCity + "%'";
GridView1.DataSource = dv;
GridView1.DataBind();
using (StringWriter sw = new StringWriter())
{
using (HtmlTextWriter htw = new HtmlTextWriter(sw))
{
GridView1.RenderControl(htw);
htw.Flush();
strOutput = sw.ToString();
}
}
} |
|
|
|
|
|
The above method uses the data that is stored in the ViewState. DataView’s
RowFilter property will filter the records using the “Like” operator and we re-bind
the GridView control with the resultset of the DataView
object. The important logic
to be noted is, we need to display the filtered record same as the original format
of the GridView control. For this we use, GridView’s RenderControl method to frame
the output in an html GridView format that needs to send to the browser. The final
html string is assigned to the page scope output variable “strOutput”.
Step 7: Re-write the code in the RaiseCallbackEvent and
GetCallbackResult method to call the “FilterGrid” method and output the result as
follows,
public void RaiseCallbackEvent(String clientArgs)
{
string[] str = clientArgs.Split('|');
FilterGrid(str[0], str[1]);
} |
|
|
|
RaiseCallbackEvent takes only one argument “clientArgs”, but our program needs to
process two arguments such as Customer Name and City, so we will send argument joined
together seperated by a delimeter "|" from the client JavaScript function, which
will be split in this method and then passed to the FilterGrid method.
|
public string GetCallbackResult()
{
return strOutput;
} |
As we have already assigned the value for strOutput in the FilterGrid method, nothing
to change in GetCallbackResult method.
Step 8: Write two JavaScript functions to call the server
methods to perform data filter and to output the result.
function fnSearchGrid()
{
var param1 = document.getElementById('txtCusName').value;
var param2 = document.getElementById('txtCusCity').value;
var inputarg = param1+"|"+param2;
fnCallServerMethod(inputarg,'');
} |
The above JavaScript function “fnSearchGrid”, takes the input from the txtCusName
and txtCusCity textboxes and concats them with “|” delimeter and call the fnCallServerMethod
by passing the final input argument.
function fnGetOutputFromServer(strOutput)
{
document.getElementById('divGridView').innerHTML = strOutput;
} |
The above JavaScript function “fnGetOutputFromServer” receives the output as string
argument. The strOutput argument will have html string in a GridView format and
there is a tag “divGridView”, which contains the original GridView control, we can
easily replace it with the output string using the above function.
Step 9: Write a JavaScript function to reset the GridView
control.
|
function fnShowAll()
{
document.getElementById('txtCusName').value="";
document.getElementById('txtCusCity').value="";
fnSearchGrid();
} |
The above JavaScript function clears the values of the textboxes and calls the fnSearchGrid
function. As we are using “Like” operator in “FilterGrid” method and no value is
passed, the result will be all records, which will be displayed in the GridView
control.
Step 10: Add the above JavaScript functions “fnSearchGrid”
and “fnShowAll” to the button’s “btnFilter” and “btnShowAll” onclick event respectively
as follows,
<input id="btnFilter" type="button" value="Filter" onclick="fnSearchGrid()"
/>
<input id="btnShowAll" type="button" value="Show All" onclick="fnShowAll()"
/> |
It’s Done. Now save your codes and hit “F5” key. The web page loads with Customer
Data in the GridView control, input any letter or word in the Customer Name and
City Textboxes and click “Filter” button, in a few seconds you can see the Magic
of ICallbackEventHandler doing the trick of filtering the records in the GridView
control. You can also bring all the records again by clicking the “Show All” button.
Click here to View Live Demo of “GridView Filter using ICallbackEventHandler” |
|
|
|
You need to Login or Register to download Source Code.
|
|
|
|
|
|
|
|
|