Skip to main content

Invoking Web Service written in ASP.NET through jQuery which returns data in JSON Format

This post explains how we can make an Ajax Call in jQuery and invoke a Web Service that has been written in ASP.NET. Also the Web Service is going to return data in JSON Format i.e. Javascript Object Notation which is nothing but an implementation of DataDictionary concept. By default the web service written in ASP.NET will return data in XML Format. But JSON provides a faster way to get and parse data through jQuery. In this example, we will invoke a method written in Web Service by jQuery. The following steps are to be performed:

Step 1: Host the Web Service written in ASP.NET

We have to host the web service that has been written in ASP.NET. The following code shows a typical web service written in ASP.NET

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
using System.Web.Script.Services;
using System.Web.Services.Protocols;

///
/// Summary description for ProfessionalWebService
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class ProfessionalWebService : System.Web.Services.WebService {

    public ProfessionalWebService () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

   [WebMethod]
    [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
    public int ReturnNumber()
    {
        return 100;
    }
}

In the above example we can see that the web service contains only one method with the name "ReturnNumber" and it returns only integer. But as the web service will return the data in XML format, we are using [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)] preceding the web method so that the data is returned in the JSON Format.

Step 2: Invoking the Web Service through jQuery

Once the Web service is hosted then we can invoke through jQuery. The following code shows how the web method is invoked through jQuery on a click of a button.


$('#btnWebService1').click(function (e) {
                     e.preventDefault();
                     $.ajax({
                         type: "POST",
                         url:"http://localhost/Web/Lovely.asmx/ReturnNumber",
                         contentType: "application/json; charset=utf-8",
                         dataType: "json",

                         success: function (msg) {
                             var t = msg.d;
                         
   $('#TextBox1').val(t.toString());

                         },
                         error: function () {
                             alert("OOPs!!!. Some error occurred while calling");
                         }
                     });

                 });
So, through the above example, you can see how we can invoke web services through jQuery and return data in JSON Format. Do try it for yourself and share your thoughts with me.

Happy coding. Keep on trying.



Comments

manoj said…
Thanks for this post .Please post more tutorials on Json, Jsonp and Odata

Popular posts from this blog

SQLServer Error: 15404, Could not obtain information about Windows NT group/user Error code 0x5. [SQLSTATE 42000] (ConnIsLoginSysAdmin)

If we encounter this error "SQLServer Error: 15404, Could not obtain information about Windows NT group/user Error code 0x5. [SQLSTATE 42000] (ConnIsLoginSysAdmin)" in SQL Server in which the job fails because of the user account related problem, then we need to take the following steps to make it work: a. Go to SQL Server Agent. b. Then select the job which is giving error and not running successfully. c. Then choose properties and in the General Tab, change the owner to "SA" or any account that has the administrative privileges. The problem will be resolved.

Connecting Nodejs to SQL Server with Knex ORM - Part 1

Normally we connect Nodejs to the databases like SQLite, MongoDB, Postgres etc . In this multiple part post, I am going to show you, how we can connect Nodejs with Microsoft's SQL Server using Knex and run CRUD operations. 1. Installation of required packages In order to connect Nodejs to SQL Server with Knex, we will need following node packages installation: i. npm install knex ii. npm install mssql Once the packages are installed, we can write the following code to connect: //Code to KNEX connection settings. var knex = require('knex')({ client: 'mssql', connection: { user: 'sa', password: 'pwd', server: 'localhost', database: 'Test' } }); //Code to query the Table DEPT knex.select("*").from("dept") .then(function (depts){ depts.forEach((dept)=>{ //use of Arrow Function console.log({...dept}); }); }).catch(function(err) { ...

How to use QueryExtenderControl in ASP.NET with LINQ

Queryextender control is a control that helps in doing actions like filtration, searching, sorting etc. on the LINQ Data source with few steps. In fact we don’t have to write any code with this. Screenshot given below is just an example that can easily be achieved through this control. In the above screenshot, we can see that there is a GridView Control that has been binded to a LINQData Source Control. And we have a DropDownlistBox that is also binded to another LINQData Source Control and displaying only grouped jobs. The GridView display all the employees who are matching the Job Parameter. This is done through QueryExtender Control. Also we can search for any name in the employee name's through Query Extender control. The code in the HTML goes like: < form id ="form1" runat ="server">     < div >         Select Job: < asp : DropDownList ID ="Job" runat ="server" DataSourceID ="LinqDataSource2...