Jquery Ajax Call to Httpget Webmethod (C#) Not Working

JQuery ajax call to httpget webmethod (c#) not working

Before all I could say, that you choose not the easiest way. ScriptMethods is easy to use together with ASP.NET ScriptManager and not with jQuery. I’ll recommend you better use JSON-enabled WCF HTTP Services (better as RESTfull Service) instead of ASMX Webservice which you try to use now.
Nevertheless, one can makes you code working without using any Microsoft technologies on the client side.

First of all verify Server side.

  1. Rename webmethods.aspx to webmethods.asmx.

  2. Verify that you placed Inside of \ and a httpHandlers for asmx extension (ScriptHandlerFactory) also exist in the config:

    <configuration>
      <!-- ... -->
      <system.web>
        <webServices>
          <protocols>
            <add name="HttpGet"/>
          </protocols>
        </webServices>
        <httpHandlers>
          <!-- ... -->
          <add verb="*" path="*.asmx"
               type="System.Web.Script.Services.ScriptHandlerFactory"
               validate="false"/>
        </httpHandlers></system.web></configuration>

  3. Verify that [ScriptService] attribute ([System.Web.Script.Services.ScriptService] if you like full names) set for your class inherited from System.Web.Services.WebService.

Now you could test the service. Open in you Web-Browser URL like http://localhost/webmethods.asmx/AjaxGet?id=li1234
If you receive back something like

<?xml version="1.0" encoding="utf-8" ?>

<string xmlns="http://tempuri.org/">li1234</string>

You can be sure that you service part works fine.

Remark: Independ on “ResponseFormat = System.Web.Script.Services.ResponseFormat.Json” attribute the service answer with XML responses if “Content-Type:application/json;” not set in the request.

Now we’ll fix the client code. I hope that comments which I placed in the following code explain all.

One more small remark. In the last part of code I call one more “complex” web method:

[WebMethod]
[ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public OutputData AjaxGetMore (InputData input) {
    return new OutputData () {
        id = input.id,
        message = "it's work!",
        myInt = input.myInt+1
    };
}

Where 

public class OutputData {
    public string id { get; set; }
    public string message { get; set; }
    public int myInt { get; set; }
}
public class InputData {
    public string id { get; set; }
    public int myInt { get; set; }
}

Now only JavaScript code which use in some places JSON plugin, which could be replaced with Crockford's json2.js, if somebody prefer it.

var id = "li1234";
// version 1 - works
var idAsJson = '"' + id + '"';  // string serializes in JSON format
$.ajax({
    type: "GET",
    url: "/webmethods.asmx/AjaxGet?id=" + idAsJson,
    contentType: "application/json; charset=utf-8",
    success: function(msg) {
        alert(msg.d);   // var msg = {d: "li1234"} 
    },
    error: function(res, status) {
        if (status ==="error") {
            // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
            var errorMessage = $.parseJSON(res.responseText);
            alert(errorMessage.Message);
        }
    }
});

// version 2 with respect of JSON plugin
$.ajax({
    type: "GET",
    url: "/webmethods.asmx/AjaxGet?id=" + $.toJSON(id),
    contentType: "application/json; charset=utf-8",
    success: function(msg) {
        alert(msg.d);   // var msg = {d: "li1234"} 
    },
    error: function(res, status) {
        if (status ==="error") {
            // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
            var errorMessage = $.parseJSON(res.responseText);
            alert(errorMessage.Message);
        }
    }
});
// version 3 where jQuery will construct URL for us
$.ajax({
    type: "GET",
    url: "/webmethods.asmx/AjaxGet",
    data: {id: $.toJSON(id)},
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(msg) {
        alert(msg.d);   // var msg = {d: "li1234"} 
    },
    error: function(res, status) {
        if (status ==="error") {
            // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
            var errorMessage = $.parseJSON(res.responseText);
            alert(errorMessage.Message);
        }
    }
});
// version 4. We set "Content-Type: application/json" about our data, but we use no 
//            not 'dataType: "json"' parameter. Then we have "Accept: */*" in the request
//            instead of "Accept: application/json, text/javascript, */*" before.
//            Everithing work OK like before.
$.ajax({
    type: "GET",
    url: "/webmethods.asmx/AjaxGet",
    data: {id: $.toJSON(id)},
    contentType: "application/json; charset=utf-8",
    success: function(msg) {
        alert(msg.d);   // var msg = {d: "li1234"} 
    },
    error: function(res, status) {
        if (status ==="error") {
            // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
            var errorMessage = $.parseJSON(res.responseText);
            alert(errorMessage.Message);
        }
    }
});
// version 5. If we don't place "Content-Type: application/json" in our reqest we
//            receive back XML (!!!) response with "HTTP/1.1 200 OK" header and 
//            "Content-Type: text/xml; charset=utf-8" which will be placed.
//            How one can read in
// http://weblogs.asp.net/scottgu/archive/2007/04/04/json-hijacking-and-how-asp-net-ajax-1-0-mitigates-these-attacks.aspx),
//             ASP.NET AJAX will not make JSON serialized of response data for
//             security reasons.
$.ajax({
    type: "GET",
    url: "/webmethods.asmx/AjaxGet",
    data: {id: $.toJSON(id)},
    dataType: "json",
    //contentType: "application/json; charset=utf-8",
    success: function(msg) {
        alert(msg.d);   // var msg = {d: "li1234"} 
    },
    error: function (res, status, ex) {
        // the code here will be works because of error in parsing server response
        if (res.status !== 200) {   // if not OK
            // we receive exception in the next line, be
            var errorMessage = $.parseJSON(res.responseText);
            alert(errorMessage.Message);
        } else {
            alert("status=" + status + "\nex=" + ex + "\nres.status=" + res.status + "\nres.statusText=" + res.statusText +
                    "\nres.responseText=" + res.responseText);
        }
    }
});
// version 6. Send more komplex data to/from the service
var myData = { id: "li1234", myInt: 100}
$.ajax({
    type: "GET",
    url: "/webmethods.asmx/AjaxGetMore",
    data: {input:$.toJSON(myData)},
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(msg) {
        // var msg = {__type: "Testportal.OutputData", id: "li1234", message: "it's work!", myInt:101}
        alert("message=" + msg.d.message + ", id=" + msg.d.id + ", myInt=" + msg.d.myInt); 
    },
    error: function(res, status) {
        if (status ==="error") {
            // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
            var errorMessage = $.parseJSON(res.responseText);
            alert(errorMessage.Message);
        }
    }
});

jQuery Ajax not calling webmethod after url routing

Agree with @SenadM. Either change the dataType:text or return JSON from your webmethod:

[System.Web.Services.WebMethod]
public static string ebulten_Add(string ebEmail)
{
    if (ebEmail == "Email")
    {
        return "{ \"response\": \"*Bilgilerinizi Girmediniz\"}";
    }
    else
    {
        List<ListItem> ebList = new List<ListItem>();           
        ebList.Add(new ListItem("@Eb_email", ebEmail));
        BL.Atom.GetByVoid("spEbulten_Add", ebList);
        return "{ \"response\": \"*E-Bülten kaydiniz basariyla tamamlanmistir\"}";            
    }
}

Also, make sure POST is enabled in your web.config:

<configuration>
    <system.web>
    <webServices>
        <protocols>
            <!-- <add name="HttpGet"/> --> <!-- uncomment to enable get -->
            <add name="HttpPost"/>
        </protocols>
    </webServices>
    </system.web>
</configuration>

Why can I not access my webmethod from AJAX?

I quickly created a sample application and observed that you should be using POST instead of GET. When I applied the following settings, I was able to hit the GetAllKeywords method and get the response back successfully.

SCRIPT

<script>
        $.ajax({
            type: "POST",
            url: "WebForm1.aspx/GetAllKeywords",
            data: JSON.stringify({
                keywordIds: ['1', '2']
            }),
            contentType: "application/json; charset=utf-8",
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
            },
            complete: function (jqXHR, status) {
                alert("complete: " + status + "\n\nResponse: " + jqXHR.responseText);
            }
        });
    </script>

C#

Use POST instead of GET

 [WebMethod(EnableSession = true)]
 [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
 public static string GetAllKeywords(string[] keywordIds)
 {
    return "it worked";
 }

DEBUG

Snapshot from debug mode,

Sample Image

Can't get jQuery Ajax to parse JSON webservice result

One problem you may be having is that you aren't doing anything to prevent the button from submitting the form and executing a full postback/reload at the same time you're starting your $.ajax() callback.

I'd suggest wiring this up unobtrusively instead of using the OnClientClick property, like this:

$(document).ready(function() {
  // May need to use $('<%= Button1.ClientID %>') if your Button is 
  //  inside a naming container, such as a master page.
  $('#Button1').click(function(evt) {
    // This stops the form submission.
    evt.preventDefault();

    $.ajax({
      // Your $.ajax() code here.
    });
  });
});

I also agree with Oleg that you should use json2.js for your JSON stringifying and parsing. In newer browsers, that will fall back to the browsers' native implementations of those methods, which is much faster and makes the parsing safer.

Update:

To answer your question about the data, no that doesn't look quite right.

What you want to ultimately send to the server is this (sans formatting):

{"request":{"gtype":"ProductName","query":"xbox"}}

To accomplish that, you want something like this:

var req = { request : { qtype: "ProductName", query: "xbox" }};

$.ajax({
  data: JSON.stringify(req),
  // Remaining $.ajax() parameters
});

Keep in mind that request, qtype, and query must match your server-side structure with case-sensitive accuracy.

You can also be more verbose in defining the request object (which I prefer, personally, to keep things clear and readable):

var req = { };

req.request = { };

req.request.qtype = "ProductName";
req.request.query = "xbox";

I've written a bit more about this here, if you're interested: http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/


Related Topics

How Accurate Is Thread.Sleep(Timespan)

Getting Attribute Value of an Xml Document Using C#

CSV Parsing Options with .Net

Why Doesn't Xmlserializer Support Dictionary

How to Execute Task in the Wpf Background While Able to Provide Report and Allow Cancellation

JSON.Net Serialize by Depth and Attribute

C#: Prepending to Beginning of a File

How to Sort a String of Text Followed by a Number Using Linq

Objects in Scene Dark After Calling Loadscene/Loadlevel

How to Pass Data from Mainwindow to a User Control That's Inside the Mainwindow

Shellexecute Equivalent in .Net

Encrypt Password in App.Config

How to Implement a Progress Bar in C#

Exception When Addwithvalue Parameter Is Null

How to Delete a File Which Is Locked by Another Process in C#

Run Process as Administrator from a Non-Admin Application

How to Execute a Command in a Remote Computer

Print Existing PDF (Or Other Files) in C#


Leave a reply



Submit