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.

I don't think so, there is option available CORS in Jquery.ajax, but there is option for crossDomain — Rohan Kumar
– Rohan Kumar, Commented Apr 26, 2017 at 8:23

Community · Accepted Answer · 2020-06-20 09:12:55Z

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:

Response:

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 26, 2017 at 9:05

Suhaib Janjua

3,57016 gold badges69 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Meghana Over a year ago

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 Over a year ago

project is not loading in my machine. and I have implemented that above code. but I am getting an error like undefined...

Suhaib Janjua Over a year ago

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 Over a year ago

@Meghana could you please show me the folder structure that you have for your project..

Suhaib Janjua Over a year ago

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...

Rohan Kumar · Accepted Answer · 2017-04-26 09:01:02Z

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);
      }
    });
  });
});

Collectives™ on Stack Overflow

Calling webservice with Ajax Jquery in asp.net

2 Answers 2

EDIT:

Original Answer:

Output:

Response:

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT:

Original Answer:

Output:

Response:

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related