JQuery to Call Asp.Net Ajax Page Methods with Parameter from Client Side in C# VB.Net

Calling server side method to server side is an easy job for developers. But sometimes we need to call server side methods from client side. Here in this article I will explain “How to Call Asp.Net Ajax Page Methods with Parameter from Client Side using JQuery“. First of all it’s not an easy job. To do that we have to use Asp.Net AJAX ScriptManager. Asp.Net AJAX ScriptManager has a property named EnablePageMethods and we need to set true to call server side method from client side using JQuery.

Related Article:
How to Call Server Side Function from Javascript Function using Ajax in Asp.Net C# VB.Net

JQuery to Call Asp.Net Ajax Page Methods from Client Side in Csharp VB.Net

Prepare the HTML first:

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
    Enter First Number:<br/>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
    Enter Second Number:<br/>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <br /><br />
    <asp:Button ID="Button1" runat="server" Text="Call Server Side Method Using JQuery" />

Note: Set ScriptManager EnablePageMethods=”true”.

To do the example we are considering two integer number as arguments & server side method return value will be the sum of these two integer numbers.

ServerSide Method:
C# Code:

    public static Int32 GetResult(string num1,string num2)
        return Convert.ToInt32(num1) + Convert.ToInt32(num2);

VB.Net Method:

    <System.Web.Services.WebMethod()> _
    Public Shared Function GetResult(num1 As String, num2 As String) As Int32
        Return Convert.ToInt32(num1) + Convert.ToInt32(num2)
    End Function

Note: The mthod must be a WebMethod. The method must be public and static.

JQuery Function to Invoke Server Side Method:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=Button1.ClientID %>').click(function () {
                type: "POST",
                url: "Default.aspx/GetResult",
                data: "{num1: '" + $('#<%= TextBox1.ClientID %>').val() + "',num2: '" + $('#<%= TextBox2.ClientID %>').val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $('#<%= TextBox3.ClientID %>').val(msg.d)
            return false;

Note: data properties parameter names must be equal to server side method parameter name. Ordering doesn’t matter since we explicitly mention the arguments name.

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code