Problem using jqGrid with ASP.NET form application

Problem using jqGrid with ASP.NET form application

I am wondering if anyone here has successfully used jqGrid in asp.net form application.  I am following the example here:


I have a button on the web form. Upon clicking, I try to load data into the jqGrid. I have my web method in Default.aspx.cs (NOT in a web service):

[WebMethod]
public static MainGrid GetDataForJqGrid(string sidx, string sord, int page, int rows)
{
        // Contruct my MainGrid object and return it.
        MainGrid grid = new MainGrid();
        ... ...
        return grid;
}

In Default.aspx, I have this:

<input type="button" id="mybutton" value="Go">

<table id="mygrid"> </table>
<div id="pager"> </div>

 $().ready(function () {

            $("#mybutton").click(function () {

                $("#mygrid").jqGrid({
                    url: "/Default.aspx/GetDataForJqGrid",
                    datatype: 'json',
                    mtype: 'POST',  // GET doesn't work either.
                    colNames: [ ... ... ],
                    colModel: [...... ...... ],
                    pager: $("#pager"),
                    rowNum: 10,
                    rowList: [5, 10, 20, 50],
                    sortname: "Name",
                    sortorder: "asc",
                    viewrecords: true,
                    gridComplete: function () { },
                    height: "100%",
                    autowidth: true,
                    caption: "My Grid Data"
                }).navGrid("#pager", { edit: false, add: false, del: false, search: false });
            });

GetDataForJqGrid method never gets hit in debug mode. So obviously I get an empty grid in the web form. 

Has anyone successfully used jqGrid with your asp.net web form application? How to you have jqGrid post to your server side method? Do I have to use a web service? Please share your thoughts, thank you.