Saturday, August 13, 2011

Sending Call back from client side to Server Side without postback by using AJAX(ClientCallBacks)

We can make a call from client side to server side without postback
occurance by using "AJAX".
To achieve "Call back" concept in ASP.NET web page. we need to perform
the following steps:
Serverside:
=======
1. Need to Implement "System.Web.UI.ICallbackEventHandler" for your web page.
2. Need to Implement "RaiseCallBackEvent" method for the
"ICallBackEventHandler" interface. This method is called by the
clientside. You can use it to receive parameter values from the
client.
3.Need to Implement "GetCallBackResult" method for
"ICallBackEventHandler" interface. This function will returns the
result of any serverside process to clientside. The results are sent
as a string back to the client code.

Default.aspx:
=========
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function ClientCallbackFunction(args) {
LabelMessage.innerHTML=args;
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList runat="server" ID="dllChoice"
onchange="MyServerCall(dllChoice.value)">
<asp:ListItem Text="09">
</asp:ListItem>
<asp:ListItem Text="01">
</asp:ListItem>
<asp:ListItem Text="02">
</asp:ListItem>
<asp:ListItem Text="03">
</asp:ListItem>
<asp:ListItem Text="04">
</asp:ListItem>
<asp:ListItem Text="05">
</asp:ListItem>

</asp:DropDownList>

<asp:Label runat="server" ID="LabelMessage" ></asp:Label>
</div>
</form>
</body>
</html>



Default.aspx.cs:
===========
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
public partial class _Default :
System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
string callbackRef =
Page.ClientScript.GetCallbackEventReference(this, "args",
"ClientCallbackFunction", "");
string callbackscript = "function MyServerCall(args)" + "{" +
callbackRef + "; }";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"MyServerCall", callbackscript, true);

}
string _callBackEventArgs;
public void RaiseCallbackEvent(string eventArgument)
{
_callBackEventArgs = eventArgument;
}
public string GetCallbackResult()
{
return _callBackEventArgs;
}
}







Example2:
=======



<%@ Page Language="C#" AutoEventWireup="true"  %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Client Callbacks</title>
    <script runat="server">
        public void RaiseCallbackEvent(String eventArgument)
        {
            // Processes a callback event on the server using the event
            // argument from the client.
        }

        public string GetCallbackResult()
        {
            // Returns the results of a callback event to the client.
            string dateString = DateTime.Now.ToLongDateString();

            return dateString;
        }

        void Page_Load(object sender, EventArgs e)
        {
            ClientScriptManager cm = Page.ClientScript;
            String cbReference = cm.GetCallbackEventReference(this, "arg",
                "ReceiveServerData", "");
            String callbackScript = "function CallServer(arg, context) {" +
                cbReference + "; }";
            cm.RegisterClientScriptBlock(this.GetType(),
                "CallServer", callbackScript, true);
        }
    </script>
    <script type="text/javascript">
        function ReceiveServerData(arg, context) {
            Message.innerText = "Date from server: " + arg;
        }
    </script>
</head>
<body>
    <h2>Client Callbacks Without Postbacks</h2>
    <form id="form1" runat="server">
       <input type="button" value="Callback"
           onclick="CallServer('1', alert('Callback sent to Server'))" />
       <br />
       <span id="Message"></span>
   </form>
</body>
</html>

Reference: Callbacks Reference
Example3
--
Regards:
M.Rama Subba Reddy
Cell:+919080391242


























No comments:

Post a Comment