Article
    C#
    ADO.Net
    .NET
    ASP.Net & Web Forms
    Custom Controls
    Web Development
    Exception Handling
    XML
    Database
    Security in .Net
    Testing
    Web Services
    Windows Services
    Windows Controls
    WCF
    AJAX
    WPF
    XAML
    Reporting
    Setup
    VB.Net
    LINQ
    JQuery
    SilverLight
    JavaScript
    HTML5
    Crystal Report
    Cloud Computing
    Share Point
    Visual C++
    MVC
    Android
    PHP
    Java
    HTML
    WordPress
    Joomla
    Products
    Drupal
    Windows Phone
    JSON
    LightSwitch
    iPhone/iPad
    Ruby on Rails
    IIS 7
    Windows 8
    CSS/CSS3
    Excel
    MS Access
    Shortcut Keys
    Visual SourceSafe
    Team Foundation Server
    API(s)
    Sencha-Touch
    Single Page App
    Bootstrap
Follow Us
Follow _MindStick_ on Twitter View MindStick Software's LinkedIn profile View MindStick Software's Facebook profile
Top Contributor
Advertisement
Advertise with Us
Mindstick
Article Article  Forum Forum  Blog Blog  Quiz Quiz  Beginner Beginner  Careers Careers  Contact Contact  Login Login  
Home | Product | Services | About Us | Interview | DeveloperSection | Submit an Article | Submit Blog

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


by AVADHESH PATEL on 2/16/2013 5:50:12 PM

Views: 3214       Comments: 0

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

Report Abuse Form
Reason:    
 

Title :
Comment :
Text ColorBackground Color
BoldItalicUnderline
LeftCenterRightJustify
Ordered ListBulleted List
IndentOutdent
Horizontal Rule
SubscriptSuperscript
HyperlinkImage
Design ModeDesign
View HtmlHtml
     
 
Latest Article by AVADHESH PATELRSS Feed
    
    
    
    
    
    
    
    
    
    
More...
Latest BlogsRSS Feed
    
    
    
    
    
    
    
    
    
    
More...
Top Viewed ArticlesRSS Feed
    
    
    
    
    
    
    
    
    
    
Top Viewed BlogsRSS Feed
    
    
    
    
    
    
    
    
    
    
Latest Interview QuestionsRSS Feed
    
    
    
    
    
    
    
    
    
    
More...
Total Online Users: 4914
Advertisement
MindStick SurveyManager
Advertise with Us
  
Copyright © 2009 - 2014MindStick. All Rights Reserved.