Skip to main content

Calling WCF Without Creating Proxy Using jQuery Ajax

Introduction
There are several ways to call a web service, they are the following:
  1. Creating Proxy using add web reference
  2. Creating Proxy using svcutil.exe
  3. Calling the web service using AJAX jQuery
Here we will learn how to call a webservice/WCF using jQuery Ajax.

The following is the procedure.
  1. Create Web service

  1. We created a method as in the screen above.
  2. Returning data in JSON format
    1. string myJsonString = (new JavaScriptSerializer()).Serialize("Hello World");  
  3. Uncomment a line

    We need to uncomment the following line if we are calling from jQuery.
  4. Running the service

    The following screen will be displayed.

  1. reating Client 

    Add a web form (any aspx form) to the solution.
  2. Add jQuery file to webform
    1. <script src="Scripts/jquery-1.8.2.js"></script>  
  3. Sample code (you may copy the code and need to change the serviceurl method name and so on)
    1. <html>  
    2.         <head>  
    3.             <title></title>  
    4.           <script src="Scripts/jquery-1.8.2.js"></script>  
    5.         <script type="text/javascript">  
    6.   
    7.             $(document).ready(function ()  
    8.             {  
    9.                 $("#BTNSERVICE").click(function (event) {  
    10.   
    11.   
    12. $.ajax({  
    13.                     url: TestWebJquerySVC.asmx/HelloWorld',  
    14.                     contentType: "application/json; charset=utf-8",  
    15.                     type: 'POST',  
    16.                     dataType: 'json',  
    17.   
    18.                     success: function (data, textStatus, xhr) {  
    19.                         alert(data.d);  
    20.                     },  
    21.                     error: function (xhr, textStatus, errorThrown) {  
    22.                         alert('a' + textStatus);  
    23.                     }  
    24.                 });  
    25.   
    26.                     }  
    27.      </script>  
    28.   
    29.     </head>  
    30.     <body>   
    31.            <form runat="server">  
    32.           <asp:button ID="BTNSERVICE" runat="server"  text="BTNSERVICE" />  
    33.                SAMPLE Application to test service  
    34.          </form>  
    35.     </body>  
    36.      </html>  
  4. Understanding the code.

    1. We have created a button on which we have registered a button click.
    2. We are using $.ajax for calling jQuery.
    3. We have defined success and error callbacks that will be called during a success response from the service and failure from the service.
    4. Reading output : we should read data using response.d 
    5. Here the response object is data then reading it using data.d.
Running the code
The following will be the output.

Conclusion
We have created a sample application that calls a web service using jQuery Ajax.
Labels:

Comments

Post a Comment

Contact Form

Name

Email *

Message *

Popular posts from this blog

Exporting DataTable to Excel in C# Using Interop

Introduction I would like to share a utility that can be used to export a datatable to Excel file using C#. We have various approaches to perform this activity. In ASP.NET we can do this by changing the Content type to xls but in C# .Net we might have various other approaches. Through this article we will learn how to export a data table to Excel using Interop. Code and Steps Here in this application we will use a Sample datatable and then learn how to export data to an Excel file. We will learn the following things in this article: Creating Excel file using C# Writing data to cells Formatting data to cells Working with Excel range 1. Adding References First we need to add a reference for Microsoft.office.interop.Excel as in the following: 2. Adding sample data table to the code Use the following code to add the sample data table:     static   DataTable  GetTable()     {       ...
1 comment
Read more

Binding CheckBoxList in ASP.Net MVC

Blogspot Introduction I would like to share how to bind the checkbox list in MVC. I will use a Model (a class file) to define various attributes for checkboxes. For a basic understanding of MVC kindly use the following link: ASP.NET MVC Overview The following is the procedure. 1. Creating Model We created a "SubjectModel" class under the Models folder and defined the following two properties: Subject: to display text Selected: to display check/uncheck 2. Creating the controller We created a Controller "BindingCheckBoxController" under the controllers folder We created an Action having the name = "DisplaycheckBoxes" We created a list of Subjects (Subject model class) Returning a list of subjects to the View. public  ActionResult DisplayCheckboxes() {     List<SubjectModel> listsubject =  new  List<SubjectModel>();     listsubject.Add( new  SubjectModel( "Physics" , true )); ...
Post a Comment
Read more

Object Oriented Programming in JavaScript

Introduction JavaScript is a prototype-based programming style of object-oriented programming in which classes are not present. It can support OOP because it supports inheritance through prototyping as well as properties and methods. Object Oriented Programming in JavaScript is known as prototype-based programming. Creating Class in JavaScript  the following syntax is used for declaring a class in JavaScript: function Emp() {       alert( 'Emp instantiated' );   }   Here Emp can act as a class in JavaScript.  The body of Emp acts as a constructor and is called as soon as we create an object of the class.   Creating Objects of Emp Class Using the following syntax we can create an object of the Emp class: var Emp1 =  new  Emp();   As soon as we create an object of the Emp class the constructor will be called. Here the above function Emp would be treated as ...
Post a Comment
Read more