Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Consuming Web Service using jQuery in ASP.NET

Author: Nikki Smith

Consuming Web Service using jQuery is a simple task. I will explain it with an example.

In a previous article on devasp.net it was explained that what is Web Service, and How to create and use a Web Service in Visual Studio 2010.

What is jQuery?

jQuery is JavaScript library used for client side functionality. It is designed to simplify client side scripting. The best feature of the jQuery is to write less code than JavaScript to do same functionality. It provides more features to developers to achieve their task easily.  In jQuery, developers have not to worry about client browser because jQuery handles it for them.  It is the most popular JavaScript library in use today.

 

Using jQuery to consume a web service means that we are consuming a web service from the client side script.
 
  1. Create a new ASP.NET Web Application Project either in Visual C# or Visual Basic
  2. Right click on the project, go to add, click New Item and add Web Service
  3. Now uncomment (or add if needed) the following line in the web service. This will allow the web service to be called from client side script.

    C#
     
    [System.Web.Script.Services.ScriptService]
     
    VB.NET
     
    <System.Web.Script.Services.ScriptService()> _
     
  4. Add following code in web service.

    C#
     
    [WebMethod]
    public string WebServiceMessage(){
        return "Calling web service using JQuery";
    }
     
    VB.NET
     
    <WebMethod()> _
    Public Function WebServiceMessage() As String
        Return "Calling web service using JQuery"

    End Function
     

    “WebMethod” attribute indicates that this method is a web service method and it enables the method to be called through Web Service clients. WebServiceMessage() is the name of the function and it returns string. You can return any valid data type but before the end of the method, the result statement should return any data of that data type.

  5. Add one Button and one Label in aspx page like below.


    <asp:Button ID="Button1" Text="Call Web Service" OnClientClick="CallWebServiceUsingJQuery()" runat="server" />
    <br />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>


    “OnClientClick” attribute specify which client side code (Javascript) will be called when button is clicked in the browser. Here we are using it to call JavaScript function CallWebServiceUsingJQuery(). Coming below :)
     
  6. Now to call web service from jQuery, we have to include jQuery file in our project. I already have jQuery file in Script folder of my project. If you don’t have jQuery then download and include jQuery in the project and add following <script> tag under <head> tag in aspx file. 

    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js">
     
    </script>
     
    “type” attribute is used to tell the browser that what kind of script the tag contains (JavaScript or VBScript). It must be there in the script tag.
     
    The “src” attribute is used to give the URL of external script file. It can be absolute URL (points to another website) or relative URL (points to a file within website or project). I am using relative URL. You can also provide external website URL. In that case you don’t need to download and include jQuery in your project. For example, the Google library path is: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
     
  7. Now add following JavaScript functions in between <head> or <body> tag of aspx page.  If you put it in between of <body> tag, then make sure it comes before the <asp:Button> tag.

    I have written three functions in code below of JavaScript. CallWebServiceUsingJQuery() is the function which will call the web service. This function is called when button is clicked in browser. Other two functions are “OnSuccess()” and “OnError()”. OnSuccess() function will be called if the call of the web service is completed with success, but if call gives some error then OnError() function will be called.



       
    <script type="text/javascript">
       
     
       
        function CallWebServiceUsingJQuery() {
       
     
       
                $.ajax({
       
                    type: "POST",
       
                    url: "WebService1.asmx/WebServiceMessage",
       
                    data: "{}",
       
                    contentType: "application/json; charset=utf-8",
       
                    dataType: "json",
       
                    success: OnSuccess,
       
                    error: OnError
       
                });
       
     
       
            }
       
     
       
        function OnSuccess(data, status) {
       
            $("#Label1").html(data.d);
       
        }
       
     
       
        function OnError(request, status, error) {
       
            $("#Label1").html(request.statusText);
       
        }
       
     </script>
       
     

    The explanation of the terms is as under.

     
    type: type can be POST or GET. Web services do not work with GET by default to prevent cross site requests so we have to take POST.
    url: Name of the web service with the method you want to call is called the URL of the web service. If you are calling web service which is not part of your project or solution then you have to enter fully qualified name of the web service.
    data: data is empty as I am not passing any parameters. If we have some parameters then we have to pass those parameters.
    contentType: what type of content this web service will return. It should remain the same.
    dataType: json is the result type.
    success:  call onSuccess function if successfully completed
    error: call OnError function if there is error.
     
  8.  View the project in browser and click on the button to see result

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to create and use a Web Service in ASP.NET Visual Studio 2010

Disclaimer - Privacy
© 2002-2017 DevASP.net