$.ajax Returning HTML of the page instead of results

Question

I wrote a simple webmethod that I call on the client side to check if a value exists in the database on text change. It works fine locally, but when I move it to our Development environment it returns the entire HTML of the page in the response. The only thing that I have noticed is that locally the Response.Server is IIS7.5, but on our Dev server it is IIS6.

Here is my code:

Server Code

[ScriptMethod]
[System.Web.Services.WebMethod]
public static bool CheckInvoiceExists(string vendorNumber, string invoiceNumber)
    {
        try
        {
            return RequestEntry.CheckInvoiceExists(vendorNumber, invoiceNumber);
        }
        catch (Exception exp)
        {
            EventLogging.LogError("Error checking if invoice exists: " + exp.Message);
            return false;
        }
    }

Client Code

function CheckInvoiceExists() {
//var vendNo = $('#VendNoInputDisplay').text();
var vendNo = $('#VendorNumber').val();
var invNo = $('#InvNoInput').val();
var error;
$.ajax({
    type: "POST",
    aSync: false,
    url: "PaymentRequest.aspx/CheckInvoiceExists",
    data: JSON.stringify({
        vendorNumber: vendNo,
        invoiceNumber: invNo
    }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        if (data.d) {
            $('#ErrorList').text(GetErrorText("invoiceNumberExists"));
            $('#InvNoInput').focus().select();
            $('#InvNoInput').addClass('error invExists');
        }
        else
        {
            $('#InvNoInput').removeClass('error invExists');
            ClearErrors();
        }
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        $('#ErrorList').text(errorThrown);

    }
});

}

Here is the response header from my local machine:

HTTP/1.1 200 OK
Cache-Control: private, max-age=0
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
Access-Control-Allow-Origin: *
Persistent-Auth: true
X-Powered-By: ASP.NET
Date: Mon, 26 Jan 2015 18:18:36 GMT
Content-Length: 11

From Dev:

HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Length: 25586
Date: Mon, 26 Jan 2015 18:30:40 GMT
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
Cache-Control: private

When i debug it, it goes to the error function of the $.ajax call.

errorThrown : SyntaxError: Unexpected token <
jzXHR.responseText : [HTML of the page]
textStatus: "parserror"

When I open op the CheckInvoiceExist package I see:

Response is the current page. 
The request payload is something like this     {"vendorNumber":"0007000005","invoiceNumber":"Test1-12"}

@edit I tried adding the following line above my web method, but it didn't make a difference

[System.ServiceModel.Web.WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json, UriTemplate = "json")]

@edit I tried to use PageMethods instead of using the $.aJax calls. Then I tried the following test:

function Test(response)
{
  alert(response);
}

PageMethods.CheckInvoiceExists("0007000005","Test1-12",Test);

In the alert message I once again got the HTML for the page...

Rowe

can you post the RequestEntry.CheckInvoiceExists method? – Myself

content-length: 11 v.s. content-length: 25586... I'm guessing the v6 page isn't being executed properly for whatever reason. – Momently

@mattytommo The RequestEntery.CheckInvoiceExists just calls a stored procedure from the database and then returns that result to the webmethod. – Rowe

@AKimmel Ah okay, so in the actual response object in dev, does it contain an exception? So is it actually returning the "Server Error in Application" page. That's the usual cause for this happening. – Myself

@mattytommo Edited my original question because it is hard to have a formatted comment :) – Rowe

@AKimmel If you inspect the network traffic in F12 tools or Fiddler what was exchanged? – Astigmia

@VitorCanova I see the package to PaymentRequest.aspx/CheckInvoiceExists and in the response is HTML for the entire PaymentRequest.aspx page. Maybe something is not set up correctly on our development server. I tried to see if I removed json from my local MIME types if it would not work correctly. But, it still does. Would you have any other ideas down that route? – Rowe

I never used that ScriptMethod, just the WebMethod. Have you trying remove? – Astigmia

@VitorCanova I added that while trying to fix the issue. I doesn't work with our without the ScriptMethod – Rowe

if we keep trying from a browser it never works and returns the whole html, we need to call from an ajax call with contenttype as application/json. that was the key – Khano

Answer 1

Well after banging my head against my desk for a full day I finally figured out what was wrong.

I was missing the following key in my <system.web> in my web config

<httpModules>
  <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</httpModules>

I guess that IIS7.5 doesn't care if that line is there or not, but IIS6 needs to have that line there in order for web methods to function.

Thanks everyone for the help!

Rowe

Like you, I was banging my head against my desk for a lot of hours and your answer saved my head! – Schlieren

Like you, I was banging my head against my desk for a lot of hours and your answer saved my head! Thank you so much. Happy Coding!! – Edition

Answer 2

Change your server method to return JSON:

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static bool CheckInvoiceExists(string vendorNumber, string invoiceNumber)
    {
        try
        {
            return RequestEntry.CheckInvoiceExists(vendorNumber, invoiceNumber);
        }
        catch (Exception exp)
        {
            EventLogging.LogError("Error checking if invoice exists: " + exp.Message);
            return false;
        }
    }

Allstar

When calling a WebMethod with JSON as dataType with jQuery it already return as JSON. – Astigmia