Question

I have validated the JSON response from my C# Webmethod, so I don’t believe that’s the problem.

Am trying to parse the result using simple jQuery $.ajax, but for whatever reason I can’t get the method to correctly fire and parse the result, also incidentally can’t seem to get the function to fire the result. Are their any limits on the size of the JSON object that can be returned.

I also removed this code from inside a “Site.Master” page because it would always refresh when I hit the simple button. Do tags work correctly with jQuery elements like the button input I’m grabbing from the DOM?

function ajax() {
//var myData = { qtype: "ProductName", query: "xbox" };
var myData = { "request": { qtype: "ProductName", query: "xbox"} };
$.ajax({
    type: "POST",
    url: "/webservice/WebService.asmx/updateProductsList",
    data: {InputData:$.toJSON(myData)},
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        // var msg = {__type: "Testportal.outputData", id: "li1234", message: "it's work!", myInt:101}
        alert("message=" + msg.d.ProductName + ", id=" + msg.d.Brand);
    },
    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);
        }
    }
});

}

And the page:

 <asp:Button ID="Button1" runat="server" OnClientClick="ajax();"  Text="Button" /> 

And the Serverside Webmethod:

 public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public OutputData updateProductsList(InputData request)
    {
        OutputData result = new OutputData();
        var db = new App_Data.eCostDataContext();
        var q = from c in db.eCosts
                select c;

        if (!string.IsNullOrEmpty(request.qtype) && !string.IsNullOrEmpty(request.query))
        {
            q = q.Like(request.qtype, request.query);
        }

        //q = q.Skip((page - 1) * rp).Take(rp);
        result.products = q.ToList();

        searchObject search = new searchObject();

        foreach (App_Data.eCost product in result.products)
        {
            /* create new item list */
            searchResult elements = new searchResult()
            {
                id = product.ProductID,
                elements = GetPropertyList(product)
            };
            search.items.Add(elements);
        }
        return result;

    }

And helper classes:

    public class OutputData
{
    public string id { get; set; }
    public List<App_Data.eCost> products { get; set; }

}
public class InputData
{
    public string qtype { get; set; }
    public string query { get; set; }
}

Answer 1

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/