Skip to main content

Calling an asp.net web service from jQuery

As I have post it in earlier post that jQuery is one of most popular JavaScript library in the world amongst web developers Lets take a example calling ASP.NET web service with jQuery . You will see at the end of the example that how easy it is to call a web service from the jQuery.

Let’s create a simple Hello World web service. Go to your project right click->Add –> New Item and select web service and add a web service like following.
Adding  a webservice
Now modify the code of web service like following.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 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 HelloWorld : System.Web.Services.WebService
{
[WebMethod]
public string PrintMessage()
{
return "Hello World..This is from webservice";
}
}

Here please make sure that [System.Web.Script.Services.ScriptService] is un commented because this attribute is responsible for allowing web service to be called by Client side scripts.

Now to call this web service from jquery we have to include jQuery Js like following. I am already having in my project so i don’t need to include in project just need to add script tag like following.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js">
</script>

Now let’s add some JavaScript code to call web service methods like following.

<script language="javascript" type="text/javascript">
function CallWebServiceFromJquery() {

$.ajax({
type: "POST",
url: "HelloWorld.asmx/PrintMessage",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
});

}

function OnSuccess(data, status)
{
alert(data.d);
}

function OnError(request, status, error)
{
alert(request.statusText);
}
</script>

Here I have written three functions in JavaScript First one is CallWebserviceFromJquery which will call the web service. The another two functions are delegates of webservice if Success is there then onSuccess Method will be called and If Error is there then OnError method will be called.

Inside the CallWebserviceFromJquery I have passed some parameter which will call web service with Ajax capabilities of $ jQuery object. Here are the description for each parameter.

Type: This can be GET or POST for web service we have to take POST as by default web service does not work with GET to prevent Cross site requests.

Url: Here will be url of the webservice. You have insert fully qualified web service name here.

Data:Here it will be Empty as we not calling web service with parameters if you are calling web service with parameter then you have to pass that here.

ContentType: here you have to specify what type of content is going to return by web service.

Datatype:Json it will be result type.

Sucess:Here I have called the OnSuccess when the call is complete successfully. If you check the OnSuccess method you will see that I have set the returned result from the web service to the label. In the OnSuccess method body you see ‘data.d’. The ‘d’ here is the short form of data.

Error: Same as I have done with OnSuccess. If any error occurred while retrieving the data then the OnError method is invoked.

Now let’s add a asp.net button for on client click we will call the javascript function like following.

<asp:Button ID="btnCallWebService" runat="server"
OnClientClick="CallWebServiceFromJquery()"
Text="Call Webservice"/>

Now Let’s run it and here is the output in browser.

Ouput
Hope this will help you!!!.. Happy programming..

Comments

  1. your post is nice . . let me tell u one thing that Blogs have become latest and important source of quality free information on net people enjoying for hours together. . .nice blog keep sharing;)
    Dissertation Writing Services

    ReplyDelete
  2. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
    asp dot net programming

    ReplyDelete
  3. Hi jalpesh

    I came across this post of your blog while i was searching for issue with calling a webservice from javascript.I appreciate this post as it proved a ready reckoner for me.

    Everyting worked fine only in IE.The onsuccess function is not been invoked despite the fact that the webservice had sent a succesful response.I could see the response in the firebug.

    Please help me out of this.

    Thanks in advance

    ReplyDelete
  4. @Ramoji.

    Can you send me your code and which version you are using of Jquery.

    Regards,
    Jalpesh

    ReplyDelete
  5. This is very nice blog because information provided here
    through the article and the pictures are very effective. Because sometimes
    words cannot explain the things that pictures can and here the words and
    pictures both are expressing the things in balance.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. I recently came across this blog informative post to all Asp.net , j Query developers those are in learning process .

    Great post thank you

    ReplyDelete

Post a Comment

Your feedback is very important to me. Please provide your feedback via putting comments.

Popular posts from this blog

How to create Rest API(Web API) with ASP.NET Core 1.0

Recently Microsoft has released ASP.NET Core 1.0 RC2, I am getting lots of request from readers that about creating Web API. So I thought it will be a good idea to write a blog post about how to create Rest API(Web API) with ASP.NET Core 1.0.

So let’s get started via creating an ASP.NET Core 1.0 Web Application like following.



Once you click on ASP.NET Web Application, It will ask whether you need to create Web Application or Web API application. We are going to Web API so I am going to select Web API Application like following. Please note that in ASP.NET Core 1.0 there is no separate libraries or DLLs required for creating web APIs. This is just a project template.



Now once you click on OK It will create a Web API application with default values controller and program.cs.  As you know Program.cs is now starting point for the ASP.NET Core 1.0 application so It contains all the required configuration and startup items. Following is a code for that.
using System.IO; using Microsoft.Asp…

How to use migration with Entity Framework Core

Entity framework core is  the lightweight, extensible and cross-platform version of Entity Framework. Before some time, Microsoft has Released a new version of Entity Framework RC2. I have written a couple of blog post about Entity framework code first migration earlier for Entity framework 6.0. So there was a couple of request coming for writing a blog post about Entity Framework Core RC2 migration. So I thought it will be a good idea to give an overview how database migration works in Entity Framework Core RC2. This post will cover a basic scenario where we are going to create the database with existing ASP.NET Identity migration and then we are going to create a new model and have that migration applied in the database.

How to use Entity Framework Migrations: Let’s get started, To demonstrate entity framework core migrations, I am going to create a sample asp.net core web application like following.



Once we select asp.net core application it will appear the following dialog.



Now w…

Solution: gulp is not recognized as internal or external command- Visual Studio

Recently, After Upgrading to the newer version of Gulp, I was getting this error.  After doing lots of  finding online and in my system I was able to figure out that Modules like Gulp does not installed to the path. So when you try to run it from the command line it was showing below error.
gulp is not recognized as internal or external command How to solve : gulp is not recognized as internal or external command To solve this error we just need to create a new environment variable and set the NPM modules path there.

To create an environment variable,  Right click My Computer/ This Pc and click on properties.  It will open following windows.



Go to Advance System Settings and it will open system properties windows like below.



Click on Environment Variables it will open an environment and system variables windows like below.



Click on new System variable and put NODE_PATH in system variable name and %AppData%\npm\node_modules into the variable value like below.



Click on Ok. That’s it. N…