Calling webservice with Ajax Jquery in asp.net

Question

I have a requirement which I need to call web service using jQuery AJAX call. For that I have created WebService and created one client website. Unfortunately, I am not able to call this. The AJAX call is not triggering at all.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
 public WebService()
 { 
 //Uncomment the following line if using designed components 
 //InitializeComponent(); 
 }
 [WebMethod]
 public string getMessage(string name)
 {
 return "Hello " + name;
 }
}

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="GetMessage" Style="height: 26px"/>
<asp:Label ID="Label1" runat="server" Font-Bold="True"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>.

$(document).ready(function () {
 $('#Button1').click(function () {
 alert(1);
 $.ajax({
 type: 'post',
 CORS: true,
 url: 'http://localhost/WebService/Hello.asmx?op=getMessage',
 contentType: "application/xml",
 data: { name: 'aa' },
 success: function (d) {
 alert(d);
 },
 failure: function (response) {
 debugger;
 alert(response.d);
 }
 });
 });
});

I am trying to access the web service from the client application.I am passing the ASMX file in URL path. I have given service reference also. Unfortunately it is not triggering. Is there any mistake in the AJAX? Can anyone help on this? It's not showing any errors.

• Rohan Kumar: I don't think so, there is option available CORS in Jquery.ajax, but there is option for crossDomain
• Meghana: Can you please explain wat exactly it is..
• Rohan Kumar: There is no settings like CORS: true, in Jquery AJAX.
• Meghana: Yes. I did that also..

Answer 1

EDIT:

For the sake of completeness and proof I have created a git repository of this solution and uploaded on the GitHub. You can either clone or download the source code, open it in Visual Studio 2012(or +) and press F5 to run it to verify that the solution is working. You can modify it according to your need.

---

Original Answer:

I hope that you are using jQuery reference as you have missed it to mention in the question. Well given below is working solution of your WebService code consuming in ASP.NET using jQuery.

Well use relative path so that it will won't make a problem for you if you running your app in development or from deployment. Secondly at the moment you are just selecting asp.net controls id as it is which I know will make cause you a problem later when you move the code the controls of child pages. So use the jQuery selector something like: $("[id*=Button1]") to select the element properly.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
 $("[id*=Button1]").click(function () {
 var message = $("[id*=TextBox1]").val();
 $.ajax({
 type: "POST",
 url: "WebService.asmx/getMessage",
 data: "{ name: '" + message + "'}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (r) {
 alert(r.d);
 },
 error: function (r) {
 alert(r.responseText);
 },
 failure: function (r) {
 alert(r.responseText);
 }
 });
 return false;
 });
 });
</script>

---

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="GetMessage" Style="height: 26px"/>
<asp:Label ID="Label1" runat="server" Font-Bold="True"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
/// Summary description for WebService
/// </summary>
[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 WebService : System.Web.Services.WebService
{
 public WebService()
 {
 //Uncomment the following line if using designed components 
 //InitializeComponent(); 
 }
 [WebMethod]
 public string getMessage(string name)
 {
 return "Hello " + name;
 }
}

---

Output:

enter image description here

Response:

enter image description here

• Meghana: XMLHttpRequest cannot load localhost:55308/WebService.asmx?op=getMessage. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost' is therefore not allowed access.
• Meghana: project is not loading in my machine. and I have implemented that above code. but I am getting an error like undefined...
• Suhaib Janjua: Ok. If you are using this url "WebService.asmx/getMessage" then its means that your WebService.asmx class is placed on the root. So double check that where you have created your webservice. If it is inside any folder then add the folder name first / webservice / method name.
• Suhaib Janjua: @Meghana could you please show me the folder structure that you have for your project..
• Suhaib Janjua: It is due to the URL. You have to check where you have created your webservice in your project and then pass the exact relative address to the jQuery Ajax function and the error will go away... You just need to make sure that the URL in your case is right or not...

Answer 2

It is because ASP buttons id Button1 is not available in javascript, so add a class to that button like,

<asp:Button ID="Button1" class="getMessage" runat="server" Text="GetMessage" Style="height: 26px"/>

And in jQuery use,

$(document).ready(function () {
 $('.getMessage').click(function () { // use getMessage class here
 alert(1);
 $.ajax({
 type: 'post',
 // CORS: true, remove this line there is no settings like CORS
 url: 'http://localhost/WebService/Hello.asmx?op=getMessage',
 contentType: "application/xml",
 data: { name: 'aa' },
 success: function (d) {
 alert(d);
 },
 failure: function (response) {
 debugger;
 alert(response.d);
 }
 });
 });
});