Complete example of jqGrid + JSON + WebService

I did not find such an example, so I wrote it and shared it.

Step 1: first, add the [System. Web. Script. Services. ScriptService] attribute tag on WebService to enable WebServer to support JSON.

namespace jqGrid_JSON_WebService_Sample.Services
{
/// <summary>
/// Summary description for WebServiceGrid
/// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
public class WebServiceGrid : System.Web.Services.WebService
    {
    }
}

Then, add the back-end code called by ajax to obtain the data and return the JSON object:

        [WebMethod]
public object Grid(bool? _search, string nd, int page, int rows, string sidx, string sord, string searchField, string searchString, string searchOper)
        {
int count;
var data = dc.Query<Issue>(string.IsNullOrWhiteSpace(searchField) ? null : new string[] { searchField }, new string[] { searchOper }, new object[] { searchString }, null, new string[] { string.IsNullOrWhiteSpace(sidx) ? "IssueID" : sidx }, new string[] { sord }, (page - 1) * rows, rows, out count);
return (new
            {
                total = Math.Ceiling((float)count / (float)rows),
                page = page,
                records = count,
                rows = data.Select(item => new { id = item.IssueID, cell = new object[] { item.IssueID, item.Title, item.Description, item.Progress, item.CreateTime, item.Locked } })
            });
        }

Step 2: add the front-end page, first add various js and css references, and then add the <div> and js Code required by jqGrid:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebFormGrid.aspx.cs" Inherits="jqGrid_JSON_WebService_Sample.WebFormGrid" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="/Content/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            $("#list #grid").jqGrid(
            {
                url: '/Services/WebServiceGrid.asmx/Grid',
                mtype: 'POST',
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                serializeGridData: function (postData)
                {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
return JSON.stringify(postData);
                },
                jsonReader:
                {
                    root: "d.rows",
                    page: "d.page",
                    total: "d.total",
                    records: "d.records"
                },
                datatype: "json",
                colNames:
                [
'IssueID',
'Title',
'Description',
'Progress',
'CreateTime',
'Locked'
                ],
                colModel:
                [
                    { name: 'IssueID', width: 100, index: 'IssueID' },
                    { name: 'Title', width: 100, index: 'Title' },
                    { name: 'Description', width: 300, index: 'Description' },
                    { name: 'Progress', width: 150, index: 'Progress' },
                    { name: 'CreateTime', width: 100, index: 'CreateTime', formatter:'date',  sorttype:'datetime', datefmt:'M d h:i' },
                    { name: 'Locked', width: 100, index: 'Locked' }
                ],
                rowNum: 10,
                rowList: [10, 15, 20, 25, 40],
                pager: '#pager',
                viewrecords: true,
                sortorder: "desc",
                width: 900,
                height: 240,
            });

            $("#list #grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
        });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="list">
    <table id="grid">
    </table>
    <div id="pager">
    </div>
</asp:Content>

Note the following code for the jqGrid function:

                url: '/Services/WebServiceGrid.asmx/Grid',
                mtype: 'POST',
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },

Specify the WebService method through url, the POST method by mtype, And the contentType by json, so that WebService returns a json object.

However, the returned data is stored in an object named d. Therefore, jsonReader must be added for data ing:

 jsonReader:
                {
                    root: "d.rows",
                    page: "d.page",
                    total: "d.total",
                    records: "d.records"
                },

Finally, in order to ensure the correct POST parameters during the query, we also need to check the POST parameter values:

                serializeGridData: function (postData)
                {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
return JSON.stringify(postData);
                },

At this point, a complete jqGrid example is completed, and the results are displayed:

Complete sample code: jqGrid_JSON_WebService_Sample.zip

Khan! The database file has a version issue. The database files of earlier versions are downloaded here. The complete sample code for the database files of earlier versions is jqGrid_JSON_WebService_Sample(v2).zip