Jquery AJAX with ASP.NET WebMethod Returning Entire Page

Question

I'm doing some simple tests (in preparation for a larger project) to call an ASP.NET WebMethod using JQuery AJAX. In my example, my WebMethod returns a simple string. However, when I attempt to call it using JQuery, I get the entire HTML page content returned instead of just my string. What am I missing?

Client Side :

$(document).ready(function ready() {
        $("#MyButton").click(function clicked(e) {
            $.post("Default.aspx/TestMethod",
                {name:"Bob"},
                function(msg) {
                    alert("Data Recieved: " + msg);
                },
                "html"
            );
        });
    });

Server Side:

using System;
using System.Web.Services;

namespace JqueryAjaxText
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string TestMethod(string name)
        {
            return "The value submitted was " + name;
        }
    }
}

Tolkan

My suggestion to anyone having these types of problems: please double check the routing. – Noun

Answer 1

Check out this link. I used some of his other posts to calll WCF service with success. Be sure to check out the related articles:

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Read through the article but its essentially:

  $("#Result").click(function() {
    $.ajax({
      type: "POST",
      url: "Default.aspx/GetDate",
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg) {
        $("#Result").text(msg.d);
      }
    });
});

Aplenty

Make sure your web.config contains something equivalent to this, depending on your version: <configuration> <system.web> <httpModules> <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> </httpModules> </system.web> </configuration> – Wb

The key part of this is the line contentType: "application/json; charset=utf-8" without that line it will return HTML. – Priory

@Wb I stock in the same problem as the OP about a week, and your answer really help me a lot. Finally I can move on my project. I am really appreciate. Thank you. – Eats

Answer 2

I think I was getting confused with the "type" parameter in JQuery's $.post command. After talking to some folks, it seems that the return type for calling a WebMethod MUST be "json". I was trying to use "html". Once I changed it to "json" and then everything worked like normal. So apparently, a method decorated with [WebMethod] returns JSON only, and that's where my hangup was.

Thanks for your replies guys.

Tolkan

Yeah, this was getting me as well. Thanks for the info! – Abri

Answer 3

Try changing the last parameter "html" to "text". This parameter specifies the type of data to be returned.

Danieledaniell

The problem is, the method is never called. the AJAX call is simply receiving the entire page, rendered just as the browser would see it. – Tolkan

can you try changing the "html" to "text".? – Danieledaniell

Answer 4

I had the exactly the same problem: WebMethod returned the entire HTML page instead the intended data. For me, the solution came from changing inside ~/App_Start/RouteConfig.cs the following line:

settings.AutoRedirectMode = RedirectMode.Permanent;

to

settings.AutoRedirectMode = RedirectMode.Off;

Urus