to change control’s text value using the server side data and don’t want the page to be posted back, use the CallbackEventHandler.
Ajax is more popular than ever before, to be a vogue language, .net 2.0 provides some classes to help you easily and quickly managing ajax. If you want to change control’s text value using the server side data and don’t want the page to be posted back, you should use the CallbackEventHandler to do this task.
To use CallbackEventHandler, (1) your page should implement the Web.UI.ICallbackEventHandler, (2) a js function should be registered by ClientScriptManager to contact the client side with the server side, (3) and two js function which will be used to send argument and receive result.
Here is a simple sample page to let you know how does these work.
http://ramones.blogsome.com/2007/06/08/how-to-use-callbackeventhandler-the-example/
The whole process is clearly. When the button is fired, the jscall() method is performed, the next is the function which is made by Page.ClientScript.GetCallbackEventReference, after this the process is shifted from the client side to the server side, and methods of Web.UI.ICallbackEventHandler is in the process, finally another js function receiveFunction() will receive and display the result.
From the client-side to the serve-side, what has happened?
The point is methods of Web.UI.ICallbackEventHandler. RaiseCallbackEvent(String eventArgument) can receive the argument from the client-side, in the example the argument’s value is form1.test.value, the next method to perform is GetCallbackResult(), this method’s return value will be received by a client-side’s js method, receiveFunction().
Another puzzle point is what has <%= Page.ClientScript.GetCallbackEventReference(this, “arg”, “receiveFunction”, “context”)%> done? What’s the meaning of its argument? This line will generate a js function, it’s a auto-generated function by .net, you don’t have to know the detail of the function, just know its effect. Check the source code of the real-life client-side page, you will find the whole line is like this:
WebForm_DoCallback(’__Page’,result,CallComplete,context,null,false);
It takes the argument and send them to a place. The importment argument is the third argument, you must specify which js method to receive the result from the server-side.
And the argument list of GetCallbackEventReference() is :
public string GetCallbackEventReference (
Control control,
string argument,
string clientCallback,
string context
)
“string argument” and “string context” are arguemts’ name of the client-side js function jscall() which to respond the button’s request.
GetCallbackEventReference() has many overwrites.
The last point is the client-side js function which receiving the result, it has a immobile argument array. The first is the result sent by server-side’s method, GetCallbackResult(). The second argument is context msg, I don’t know when to use this msg, maybe never.
The sample is too simple? What you want maybe change a GridView’s data without postback, many ways to this target, there is one.
1. Prepare a div tag in the page where you want to display the data.
<div id=”mydata”></div>
2. Prepare a method to provide the data that the GridView needs, and modify GetCallbackResult() as follow:
public string GetCallbackResult()
{
StringWriter writerExport = new StringWriter(CultureInfo.InvariantCulture);
HtmlTextWriter writerText = new HtmlTextWriter(writerExport);
//bind data to the GridView
bind(GridView1);
//this line will get the gridview’s html
this.GridView1.RenderControl(writerText);
writerText.Flush();
writerText.Close();
return writerExport.ToString();
}
3. what will we do now? Yes, receive the html, and display:
function CallComplete(result,context)
{
dive =document.getElementById(”mydata “);
dive.innerHTML=result;
}
Maybe you will wonder, I want to display the gridview according some conditons, how can I let server-side method bind() know these conditions? I guess you have forgotten the augument transferred from cilent-side to server-side, yes use this argument to get your conditions. Maybe the code is like this:
<asp:DropDownList ID=”lists” runat=”server” onchange=”ChangeItems(form1. lists.value,’context’);”>
<asp:ListItem Value=”1″># orange</asp:ListItem>
<asp:ListItem Value =”2″>%apple</asp:ListItem>
<asp:ListItem Value =”3″>All </asp:ListItem>
</asp:DropDownList>
function ChangeItems(result,context)
{
<%= Page.ClientScript.GetCallbackEventReference(this, “result”, “CallComplete”, “context”)%>;
}
If you still have questions about this topic, let me know using replies.
