jqgrid与asp.net页面中的asp.net [WebMethod]问题

时间:2014-02-28 05:09:51

标签: c# jquery asp.net jqgrid

方法驻留在Aspx页面内:

$("#list").jqGrid({
            url: 'DirStructure.aspx/getData',            //Not able get any data from here saw in firebug reponse is page itself instead of JSON data.            
            datatype: 'json',
            mtype: 'POST',
            colNames: ['pkLanguageID', 'Language'],
            colModel: [
            { name: 'pkLanguageID', index: 'pkLanguageID', width: 30, align: 'left', stype: 'text', editable: false },
            { name: 'Language', index: 'Language', width: 80, align: 'left', stype: 'text', editable: true}],
            rowNum: 5,
            rowList: [10, 20, 30],
            pager: '#pager',
            sortname: 'pkLanguageID',
            sortorder: 'desc',
            caption: "Test Grid",                        
            viewrecords: true,
            async: false,
            loadonce: true,
            gridview: true,
            width: 500,
            loadComplete: function (result) {
                alert(jQuery("#list").jqGrid('getGridParam', 'records'));                
            },
            loadError: function (xhr) {
                alert("The Status code:" + xhr.status + " Message:" + xhr.statusText);
            }
        });

方法驻留在DirStructure.aspx(Written WebMethod)中:

 [WebMethod]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            public static string getData()
            {
                System.Web.Script.Serialization.JavaScriptSerializer serializer = new

                System.Web.Script.Serialization.JavaScriptSerializer();

                DataSet dsLang = new DataSet();
                dsLang = CommonCode.CommonCode.GetIndividualLanguageList(7, 350027);
                System.Diagnostics.Debug.Write(dsLang.GetXml());// Dataset for languages.
                DataTable dt = dsLang.Tables[0];

                System.Diagnostics.Debug.Write(GetJson(dt));
                return GetJson(dt);            
            }

            public static string GetJson(DataTable dt)
            {
                System.Web.Script.Serialization.JavaScriptSerializer serializer = new

                System.Web.Script.Serialization.JavaScriptSerializer();
                List<Dictionary<string, object>> rows =
                  new List<Dictionary<string, object>>();
                Dictionary<string, object> row = null;

                foreach (DataRow dr in dt.Rows)
                {
                    row = new Dictionary<string, object>();
                    foreach (DataColumn col in dt.Columns)
                    {
                        row.Add(col.ColumnName.Trim(), dr[col]);
                    }
                    rows.Add(row);
                }
                return serializer.Serialize(rows);
            }       

我对此感到厌恶,我可以在方法中获取JSON数据,但无法在jqgrid中查看。 请帮帮我。

1 个答案:

答案 0 :(得分:2)

尝试通过AJAX调用获取数据,然后填充到网格中。

试试这个: -

在代码背后对于虚拟数据: -

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string getData()
{
    string data = GetJson();
    return data;
}

public static string GetJson()
{
    List<LanguageData> dataList = new List<LanguageData>();

    LanguageData data1 = new LanguageData();
    data1.pkLanguageID = 1;
    data1.Language = "Language1";
    dataList.Add(data1);

    LanguageData data2 = new LanguageData();
    data2.pkLanguageID = 2;
    data2.Language = "Language2";
    dataList.Add(data2);

    System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

    return js.Serialize(dataList);
}

public class LanguageData
    {
        public int pkLanguageID { get; set; }

        public string Language { get; set; }
    }

在aspx页面中: -

$(document).ready(function () {
         GetData();
     });

     function GetData() {
         $.ajax({
             type: "POST",
             url: "../DirStructure.aspx/getData",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             //async: false,
             success: function (response) {
                 var item = $.parseJSON(response.d);
                 if (item != null && item != "" && typeof (item) != 'undefined') {

                     $("#list").jqGrid({
                         url: '../Contact.aspx/getData',
                         data: item,
                         datatype: 'local',
                         colNames: ['pkLanguageID', 'Language'],
                         colModel: [
                         { name: 'pkLanguageID', index: 'pkLanguageID', width: 30, align: 'left', stype: 'text', editable: false },
                         { name: 'Language', index: 'Language', width: 80, align: 'left', stype: 'text', editable: true }],
                         rowNum: 5,
                         rowList: [10, 20, 30],
                         pager: '#pager',
                         sortname: 'pkLanguageID',
                         sortorder: 'desc',
                         caption: "Test Grid",
                         viewrecords: true,
                         async: false,
                         loadonce: true,
                         gridview: true,
                         width: 500,
                         loadComplete: function (result) {
                             alert(jQuery("#list").jqGrid('getGridParam', 'records'));
                         },
                         loadError: function (xhr) {
                             alert("The Status code:" + xhr.status + " Message:" + xhr.statusText);//Getting reponse 200 ok
                         }
                     });


                 }
                 else {
                     var result = '<tr align="left"><td>' + "No Record" + '</td></tr>';
                     $('#list').empty().append(result);
                 }
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
                 alert("error");
             }
         });
     }