Home > DeveloperSection > Articles > Calling Web Service from JQuery in ASP.NET

Calling Web Service from JQuery in ASP.NET

Posted by  AVADHESH PATEL
on    February-16-2013 17:50 PM

JQuery JQuery 
Ratings:
0 Comment(s)
 3645  View(s)
Rate this:

Calling Web Service from JQuery in ASP.NET

In this Article, I’m going to described how to call Web Service method using JQuery. 

For demonstration three points are required that are given below

1.       Visual Studio 2008 or higher  version

2.       Jquery 1.4.1.js or higher version

3.       Jquery-1.4.1-vsdoc.js or higher version

 

Note: Jquery 1.4.1.js and Jquery-1.4.1-vsdoc.js are providing by Visual Studio 2008 or higher version or you can download from different sources easily.  

 

Step 1: Open visual studio 2008.

Step 2: Add WebService.asmx page in your application.

 

Calling Web Service from JQuery in ASP.NET

 

Step 3: Add below namespace in WebService.cs page.

 

using System.Web.Services;

using System.Web.Script.Services;

 

Step 4: Now create a web method in WebService.asmx page. For demonstration this web method take two integer number and return sum of those numbers.  Code is given below.

 

   

[System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService

{

    [WebMethod]

    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

    public int getSumJson(int num_1, int num_2)

    {

        int sum = num_1 + num_2;

        return sum;

    }

}

 

 

Step 5: Add Jquery 1.4.1.js and write below line of code as below.

 

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

 

Step 6: Now we call web service method through JQuery with JSON. This JQuery pass two parameterized value and receive return value as below line of code.

 

<script language="javascript" type="text/javascript">

        function getSum(txtNum_1, txtNum_2) {

            $.ajax({

                type: "POST",

                url: "http://WebServiceWithJQuery/webservice.asmx/getSumJson",

                data: "{'num_1':'" + $('#' + txtNum_1).val() + "','num_2':'" + $('#' + txtNum_2).val() + "'}",

                contentType: "application/json; charset=utf-8",

                success: ajaxCallSucceed,

                dataType: "json",

                failure: ajaxCallFailed

            });

        }

        function ajaxCallSucceed(response) {

            var products = eval('(' + response.d + ')');

            alert(products);

        }

        function ajaxCallFailed(error) {

            alert('failure');

        }

    </script>

 

Note:  From the above code, http://WebServiceWithJQuery/webservice.asmx/getSumJson is a URL of web service method. URL description as below

WebServiceWithJQuery”your application Name

webservice.asmx” your web service name

getSumJson” your web service method name.

You can pass URL for local machineas below

url: "http://Localhost:56251/webservice.asmx /getSumJson "

or

url: " WebServiceWithJQuery /webservice.asmx /getSumJson "

Step 7: Now write line of code on .aspx page as below that call JQuery method

<form id="form1" runat="server">

    <div>

        <table>

            <tr>

                <td>

                    1st Number

                </td>

                <td>

                    <asp:TextBox ID="txtNum_1" runat="server" />

                </td>

            </tr>

            <tr>

                <td>

                    2nd Number

                </td>

                <td>

                    <asp:TextBox ID="txtNum_2" runat="server" />

                </td>

            </tr>

            <tr>

                <td colspan="2" align="right">

                    <input type="button" value="Get Sum" onclick="getSum('<%=txtNum_1.ClientID %>','<%=txtNum_2.ClientID %>');" /><br />

                </td>

            </tr>

        </table>

    </div>

    </form>

 

Step 8: Build, save your application and press F5 key for execute application and proved two numeric value and click on “Get Sum” button for sum of these numbers as below image.

Calling Web Service from JQuery in ASP.NET
















Recent Activities


Kamlakar Singh added new Blog Convert Text Document to PDF File   6 days ago

Kamlakar Singh added new Article Introduction to Backbone.js   6 days ago

Kamlakar Singh added new Question Explain the AdRotator Control.   6 days ago

Don't want to miss updates? Please click the below button!