Asynchronously calling the server from client side code using ICallbackEventHandler and javascript
Sometimes we want to avoid the complete page post back to server to increase the performance of the page and we want to update only few controls state on the page. For this partial page update we have Update Panel and we can also do it using AJAX. In this article we are going to see another way of doing this. We are going to update the label message based on user selection of an item in the dropdown list. We will write custom javascript and implement the System.Web.UI.ICallbackEventHandler interface.
In this article we are going to see how to implement custom client callbacks for asynchronous communication between the client and the server using System.Web.UI.ICallbackEventHandler interface and javascript functions.
Suppose you have a webpage that contains a DropDownList control(ddlColor). Imagine that you want to call the server when the user selects an item from the DropDownList, but you do not want to do a full-page post. Rather, you want to initiate an asynchronous client callback. You can then do some processing on the server and return the results to the client. The client page can then be updated without causing a refresh or postback.
To implement this, We will perform below steps:
Step1: Implement the ICallbackEventHandler in the code-behind file(Default.aspx.cs) as shown below:
public partial class _Default : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
Step 2: Right click on ICallbackEventHandler interface and select the option "Implement Interface". This will add the code for below 2 methods of the IcallbackEventHandler to the class as shown below:
public partial class _Default : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string GetCallbackResult()
{
throw new NotImplementedException();
}
public void RaiseCallbackEvent(string eventArgument)
{
throw new NotImplementedException();
}
}
Step 3: We will write code in the RaiseCallbackEvent method. This event is called by the client during a callback. This method receives any event arguments from the client in the string format. In our example the argument is the color selected by the user in the DropDownList. Lets store this argument value in a class-level variable(selectedItem). Below is the code:
Remove the line "throw new NotImplementedException();" from this method and modify it as shown.
string selectedItem;
public void RaiseCallbackEvent(string eventArgument)
{
selectedItem = eventArgument;
}
Step4: Next we will implement the GetCallbackResult method. In this method after doing some processing at the server, we will return the result back to the client. In our example, first remove the line "throw new NotImplementedException();". Then simply return some custom message. In a real-world scenario, you might do some processing, calling the database or doing some kind of processing. The code for this method looks as follows.
public string GetCallbackResult()
{
return "You have selected "+selectedItem + " color";
}
Step5: In the Page_Load event of the page, add code that registers the below client scripts.
First, we will register the client script "ReceiveServerData" that will be called by the server following the server-side processing. This function is defined in the markup for the page. Below code is written in the Page_Load event:
//Register the client side function name that will be called by the server.
string callbackRefMethod = Page.ClientScript.GetCallbackEventReference(this, "args","ReceiveServerData", "");
Next, we will create a JavaScript function that is used to call the serverside code. In the example, this function is called MyServerCall. It is referenced in the page markup to make the server-side call. You register this function with the ClientScriptManager by using the RegisterClientScriptBlock method, as shown here.
//Function used by the client to call the server.
string callbackScript = "function MyServerCall(args){" + callbackRefMethod + ";}";
//Register the client function with the page.
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyServerCall", callbackScript, true);
Step6 : Now the last step is to define the Page Markup. In the Default.aspx page we will write a client script that will receive the callback from the server. In above step, this script is named ReceiveServerData and
It takes a string (args) as a parameter.
In our example, this function assigns the args value to a Label control. We must also initiate the call to the server from the client. For this, we need to call the MyServerCall method. In the example, this method is called as a result of the OnChange event for the DropDownList control.
The example passes the selected item as a parameter as shown below:
<script type="text/javascript">
function ReceiveServerData(args) {
lblData.innerText = args;
}
</script>
<asp:DropDownList ID="ddlColor" runat="server" OnChange="MyServerCall(ddlColor.value)">
<asp:ListItem>Blue</asp:ListItem>
<asp:ListItem>Yellow</asp:ListItem>
<asp:ListItem>Pink</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<asp:Label ID="lblData" runat="server"></asp:Label>
Conclusion:
1.When the page is run, user selects a color from the drop-down list. This calls the MyServerCall client-side javascript method, which calls the server.
2. Then The RaiseCallbackEvent method is called on the server; which accepts the event arguments (color selected by user).
3.Then The server processes the request and calls the GetCallbackResult method. The results are then passed back to the client.
4.On the client, the ClientCallbackFunction JavaScript method is executed, and the result (the user's choice) is shown to the user.
The output looks as below when the user select pink color from the dropdownlist:
Follow