How to implement AJAX to call .NET code-behind methods


#1

You can implement AJAX to call .NET code-behind methods. This solution allows you to create client-side JavaScript functions that retrieve data from the server via .NET web methods managed in the web form’s code-behind. To do this:

  1. Enable AJAX on the General tab in Form configuration panel.
  2. In the code-behind Page_Load method, set the EnablePageMethod property of the script manager to true. The ScriptManager1 object is automatically added to the form's auto-generated ASPX file when AJAX is enabled.
  3. Store the current culture information in a variable to be able to use it later in the static web method:
    private static System.Globalization.CultureInfo currCulture = null; // Store the current culture to allow the static web method to recuperate this culture.
    
    protected void Page_Load(object sender, EventArgs e)
    {
        base.Page_Load(sender, e);
        ScriptManager1.EnablePageMethods = true; // Enable web methods
        currCulture = System.Globalization.CultureInfo.CurrentCulture; // Store the current culture for later
    }
    
  4. Create and annotate your web method in code-behind. The advantage of using string parameters in a web method is that you can pass values in any format that come from the client side without having to worry about globalization. For example, a decimal number in the French culture format, which uses a comma as the decimal separator, would not be recognized by ASP.NET as a Decimal object unless parsed as a string value.
    /// 
        /// Parses strNum1 and strNum2 then calculate their value using the .NET format for decimals
        /// 
        ///Number 1
        ///Number 2
        /// Returns the sum of Number 1 and Number 2
        [System.Web.Services.WebMethod]
        public static string Calculate(string strNum1, string strNum2)
        {
            decimal num1 = 0, num2 = 0, result = 0;
    
            // Parse values using the current culture
            Decimal.TryParse(strNum1, System.Globalization.NumberStyles.Any, currCulture, out num1);
    
            Decimal.TryParse(strNum2, System.Globalization.NumberStyles.Any, currCulture, out num2);
    
            result = num1 + num2;
    
            // Return the formatted result
            return String.Format(currCulture, "{0}", result);
        }
    
  5. On the Web References tab in the Form configuration panel, create a function to call your web method:
    // 
    function doCalculate()
            {
                var num1 = document.getElementById('REQUEST_NUM1').value;
                var num2 = document.getElementById('REQUEST_NUM2').value;
    
                PageMethods.Calculate(num1, num2, onSuccess, onError);
    
                // onSuccess callback
                function onSuccess(result)
                {
                    document.getElementById('REQUEST_TOTAL').value = result;
                }
    
                // onError callback
                function onError(result)
                {
                    alert('Error: ' + result);
                }
            }
    //
    
  6. Add the JavaScript event where you need it in your form. For example, to calculate the updated value of a textbox, you would add the "onchange" custom attribute to the textbox with the value "doCalculate();".

Download the Web Method Usage sample process, unzip it, and import the XPDL into WorkflowGen to see it in action.