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

Adding CheckBox Column in DataGridView in C# Window Forms

Introduction  I would like to share three ways to add a checkbox to a DataGridView in a C# Windows Forms application. We will learn the following three ways to add a checkbox to a DataGridView: Binding a List to a DataGridView having a bool property Binding a datatable to a DataGridView having a bool column Adding a checkbox column (DataGridViewCheckBoxColumn) to the DataGridView. Procedure 1. Binding a List to a DataGridView having a bool property. Add the following class to the project: public   class  Emp   {       public   bool  isMarried {  get ;  set ; }       public   string  Name {  get ;  set ; }       public   string  city {  get ;  set ; }      }   We have added isMarried as a Boolean property.   Creating a List of Emp c...
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