的jqGrid與asp.net [的WebMethod]內aspx頁面版本

Question

方法駐留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（寫的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); 
      }  

我degugged此我我能夠在方法內部獲取JSON數據，但無法在jqgrid中查看。 請幫我一把。

Answer 1

嘗試通過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"); 
      } 
     }); 
    }