AJAX to web method not returning JSON

Question

I am calling a web method in aspx page from my js file using AJAX. I have set the method to be [WebMethod] and the page inherits from System.Web.Ui.Page class. Still it does not return the JSON format to my calling ajax function.

Here is the AJAX call in js file:

         $.ajax({
                 type: "POST",
                 url: "/WebServiceUtility.aspx/CustomOrderService",
                 data: "{'id': '2'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (message) {
                     ShowPopup(message);
                 }
               });
         function ShowPopup(result) {
             if (result.d != "") {
                 request=result.d;
             }
         }

And here is the web method:

using System;
using System.IO;
using System.Net;
using System.Text;
using System.Web.Services;

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

    }

        [WebMethod]
        public string CustomOrderService(string id)
        {
            string result;
            // code logic which sets the result value
            result="some value";

            return result;
        }

    }
}

When I press F12 in Firefox browser and check the Request / Response in Network calls, I do not see the JSON tab at all. Instead I see HTML tab.

Do I need to set any response headers specifically? What exactly am I missing here?

EDIT: Found a solution. Ultimately, what worked is $.getJSON() call with a callback function as success method and below is the code in web page

        result = "...";
        Response.Clear();
        Response.ContentType = "application/json";
        Response.Write(result);
        Response.Flush();
        Response.End();

Thanks all for your valuable suggestions.

Answer 1

Try this

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string CustomOrderService(string id)
        {
            string result;
            // code logic which sets the result value
            result="some value";

            return result;
        }

Answer 2

Decorate your CustomOrderService method with:

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

Also, change your return data to:

return new JavaScriptSerializer().Serialize(result);

Answer 3

The only thing I see missing is making the method static.

read this article

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

Answer 4

Use Static String.

    [WebMethod]
    public static string CustomOrderService(string id)
    {
        string result;
        // code logic which sets the result value
        result="some value";

        return result;
    }