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



Comments

  1. Oscar Polanco July 24th

    Comment Arrow

    Very useful article, thank you.


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

Robert

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning hands down.