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

Development Visual Studio Web Forms
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();.