Switching from POST to GET for jqGrid populated from WCF back-end

I am trying to convert my client side ajax-call and jqGrid over to using GET instead of POST.

I've confirmed that the service is working as intended. Checked in firebug and inspected the JSON response object and it is correct -- however I am still missing something on the client side because the data isn't being populated into the grid. No specific javascript errors are showing up in firebug to speak of.

One question I have is how to approach the url/data parameters of the .ajax() request when using GET instead of POST. I don't really need to pass any parameters via the data parameter if I can just pass the parameters in the URL with a specific UriTemplate, I think?

 function getData(pdata) {

    var jqGridArgs = {
        startDate: pdata.startDate(),
        endDate: pdata.endDate()
    };

    var _url = "Service.svc/Products?s=" + 
                 jqGridArgs.startDate + "&e=" + jqGridArgs.endDate;

    $.ajax(
            {
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: _url,

                //data: JSON.stringify({ args: jqGridArgs }), // do I need this for 'GET'?

                dataType: "json",
                success: function (data, textStatus) {
                    if (textStatus == "success") {
                        var thegrid = $("#jqGrid")[0];
                        thegrid.addJSONData(data.d);
                    }
                },
                error: function (data, textStatus) {
                    alert('An error has occured retrieving data.');
                }
            });
}

And the grid code:

var start = page.queryitem('s'); 
var end = page.queryitem('e'); 

var columnModel = [    
    { name: "ID", index: "ID", width: 175 },
    { name: "Name", index: "Name", width: 250 },
    { name: "Type", index: "Type", width: 250 }];

var columnNames = ['Product ID', 'Name', 'Type'];

$("#jqGrid").jqGrid({
        postData:
        {
           startDate: function () { return start; },
           endDate: function () { return end; },
        },
        datatype: function (pdata) {
            getData(pdata);          // calls the function above with 'postData'
        },
        colNames: columnNames,
        colModel: columnModel,
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: false,
        pagination: true,
        pager: "#jqPager",
        loadonce: true,
        sortorder: "desc",
        sortname: 'id',
        cellEdit: false
    });

And here is the back-end WCF method:

    [WebGet( UriTemplate = "Products开发者_运维问答?s={start}&e={end}",
                 ResponseFormat = WebMessageFormat.Json)]
    public JsonGridContract WebGetProducts(string start, string end)
    {
        DateTime _start = Convert.ToDateTime(start.ReplaceIf('T', ' ')); 
        DateTime _end = Convert.ToDateTime(end.ReplaceIf('T', ' '));

        var rows = GetProducts(_start, _end).Select(x => new
             {
                 ID = x.ID,
                 Name = x.Name,
                 Type = x.Type

             }).ToJson(); 

        return new JsonGridContract() { records = rows.Count, total = rows.Count, page = 1, rows = rows }; 
    }

This is how the data is encapsulated before going to the client:

[DataContract]
public class JsonGridContract
{
    [DataContract]
    public class JsonRow
    {
        [DataMember]
        public int id { get; set; }

        [DataMember]
        public string[] cell { get; set; }

        public JsonRow(int length)
        {
            cell = new string[length];
        }
    }

    [DataMember]
    public int page { get; set; }

    [DataMember]
    public int total { get; set; }

    [DataMember]
    public int records { get; set; }

    [DataMember]
    public List<JsonRow> rows { get; set; }

    public JsonGridContract()
    {
        rows = new List<JsonRow>();
    }

    public JsonGridContract(List<JsonRow> _rows)
    {
        rows = _rows;
    }
}

Try this:

var jqGridArgs = {
    s: pdata.startDate(),
    e: pdata.endDate()
};

var _url = "Service.svc/Products";

$.ajax(
        {
            type: "GET",
            url: _url,
            data: jqGridArgs,
            dataType: "json",
            success: function (data) {
                var thegrid = $("#jqGrid")[0];
                thegrid.addJSONData(data.d);
            },
            error: function (data, textStatus) {
                alert('An error has occured retrieving data.');
            }
        });

No need to check for success, if the success function is being called, the operation was a success;

It also makes more since to use your javascript object to pass as data for a get. JQuery will automatically parse it and use it for query parameters. Also, since its a get, and not a post, no need for content type.

Turns out the problem here was that there is no 'data.d' member when using GET. I am not sure why.

So changing,

thegrid.addJSONData(data.d)

to

thegrid.addJSONData(data)

fixed the problem.