Using ASP.NET AJAX Client Side Callback

In this example we are going to create a Client-side Callback with ASP.NET AJAX by implementing the RaiseCallbackEvent and GetCallbackResult methods of the the ICallbackEventHandler interface.

In this example a Drop Down List OnChange client-side event will raise the callback to the server returning a Culture Type, the server will then return all the CultureInfo’s for the given Culture Type back to a client-side callback function which will display them.

        private StringBuilder _callbackResult;

        public void RaiseCallbackEvent(string eventArgument)
        {
            _callbackResult = new StringBuilder();

            switch (eventArgument)
            {
                case "":
                    _callbackResult.Append("No Culture Type selected.");
                    break;

                case "All":
                    GetCultures(CultureTypes.AllCultures);
                    break;

                case "Neutral":
                    GetCultures(CultureTypes.NeutralCultures);
                    break;

                case "Specific":
                    GetCultures(CultureTypes.SpecificCultures);
                    break;

                default:
                    GetCultures(CultureTypes.AllCultures);
                    break;
            }
        }

        private void GetCultures(CultureTypes type)
        {
            foreach (CultureInfo cultureInfo in CultureInfo.GetCultures(type))
            {
                _callbackResult.AppendFormat("{0}: {1} 
", cultureInfo.DisplayName, cultureInfo.LCID);
            }
        }

        public string GetCallbackResult()
        {
            return _callbackResult.ToString();
        }

Notice in the RaiseCallbackEvent method we determine which Culture Type and call the GetCultures method which populates the _callbackResults StringBuilder. The GetCallbackResult method just returns the value within the _callbackResult StringBuilder.

We also need to hook up the different parts of the process

        protected void Page_Load(object sender, EventArgs e)
        {
            string callbackRef = Page.ClientScript.GetCallbackEventReference(this, "args", "ClientCallbackFunction", "");

            string callbackScript = "function ServerCallback(args) { " + callbackRef + "; }";

            Page.ClientScript.RegisterClientScriptBlock(GetType(), "ServerCallback", callbackScript, true);

            ddlCultureTypes.Attributes.Add("onChange", "ServerCallback(this.options[this.selectedIndex].value);");
        }

Notice we create a reference to the client-side function called ClientCallbackFunction by calling the ClientScript method GetCallbackEventReference, which we then use when we register the clients-side function which calls the Server; which produces the JavaScript code below. Also we set the OnChange client-side method to call the ServerCallback JavaScript function.

function ServerCallback(args) { WebForm_DoCallback('__Page',args,ClientCallbackFunction,"",null,false); }

We then add this JavaScript function which is used on the client-side to handle the server callback.

        function ClientCallbackFunction(args) {

            var label = document.getElementById('lblCultures');
            label.innerHTML = '';
            label.innerHTML = args;
            
        }

This is the HTML used in the example:

    

        
            Selected a Culture type....
            Neutral Cultures
            Specific Cultures
            All Cultures
        
    

    

        
    

You can download the Using ASP.NET AJAX Client Side Callback project here