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

My suggestion to anyone having these types of problems: please double check the routing. — QMaster, Jun 24 '23 at 23:38

score 22 · Accepted Answer · edited Jul 21 '16 at 15:57

22

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

edited Jul 21 '16 at 15:57

Community

1
1

answered Dec 08 '08 at 06:03

JoshBerke

66,142
25
126
164

5

Make sure your web.config contains something equivalent to this, depending on your version: ` ` – Nathan Feb 04 '14 at 22:39
3

The key part of this is the line contentType: "application/json; charset=utf-8" without that line it will return HTML. – Yves A Martin Dec 18 '15 at 20:43
@Nathan 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. – 劉鎮瑲 Jul 19 '19 at 07:02

score 9 · Answer 2 · answered Dec 08 '08 at 14:17

9

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.

answered Dec 08 '08 at 14:17

Dana

1,460
3
14
26

Yeah, this was getting me as well. Thanks for the info! – Jagd Dec 10 '10 at 01:12

rajesh pillai · Answer 3 · 2008-12-08T06:08:37.650

3

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

edited Dec 08 '08 at 06:08

answered Dec 08 '08 at 05:28

rajesh pillai

8,102
7
43
60

1

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. – Dana Dec 08 '08 at 05:41
2

can you try changing the "html" to "text".? – rajesh pillai Dec 08 '08 at 05:52

score 0 · Answer 4 · answered Feb 03 '17 at 17:28

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;

Jquery AJAX with ASP.NET WebMethod Returning Entire Page

4 Answers4

Linked