---
title: "Calling Web Service from JQuery in ASP.NET"  
description: "In this Article, I’m going to described how to call Web Service method using JQuery."  
author: "AVADHESH PATEL"  
published: 2013-02-16  
updated: 2019-12-04  
canonical: https://www.mindstick.com/articles/1146/calling-web-service-from-jquery-in-asp-dot-net  
category: "jquery"  
tags: ["c#", "web services", "jquery"]  
reading_time: 4 minutes  

---

# Calling Web Service from JQuery in ASP.NET

In this Article, I’m going to described how to call [Web Service](https://www.mindstick.com/articles/45/web-services-in-asp-dot-net) method using JQuery. \

For demonstration three points are required that are given below

1. [Visual Studio](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) 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](https://www.mindstick.com/forum/166/webservice-method).asmx page in [your application](https://answers.mindstick.com/qa/95487/how-do-you-troubleshoot-when-your-application-link-is-not-responding).

![Calling Web Service from JQuery in ASP.NET](https://www.mindstick.com/mindstickarticle/1a4883ba-583c-4216-b45f-a51f9f973aa7/images/88bc0140-8b21-49ce-b665-8f116ae3e172.png)

Step 3: Add below [namespace](https://www.mindstick.com/articles/28/namespace-in-dot-net) in WebService.cs page.

```
using System.Web.Services;
using System.Web.Script.Services;
```

Step 4: Now create a [web method](https://www.mindstick.com/forum/34198/how-to-download-a-file-from-web-method-using-asp-dot-net-ajax-client-side) 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](https://www.mindstick.com/forum/33675/how-to-convert-return-value-of-abmulivaluecopylabelatindex-into-nsstring-in-ios) 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](https://www.mindstick.com/forum/33583/selector-creation-with-method-name-and-parameter).

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](https://yourviews.mindstick.com/view/86026/7-javascript-shorthand-techniques-that-will-save-your-time) 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](https://www.mindstick.com/mindstickarticle/1a4883ba-583c-4216-b45f-a51f9f973aa7/images/92854f79-af86-4e27-b6ee-610c9ed3d80b.png)

---

Original Source: https://www.mindstick.com/articles/1146/calling-web-service-from-jquery-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.