問題をバインドするASP.NETでjqGridをバインド

Question

私はjqGridとjqueryを使用するのが初めてです。私はwebmethodからjqGridに戻るjsonデータをバインドできません。

私はまた、確認のためにファイヤーバグを使用しており、そのデータを受信して​​います。これに関するいくつかの助けは素晴らしいでしょう。私は他の参照を追加する必要があるかどうかを知りたいと思っています。

以下は私が実装したコードです。

私はあなたが別の作業コードを少しプレーすることをお勧めしますすべての

<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="jquery.jqGrid.min.js"></script> 
<script type="text/javascript"> 
    function GetData() { 
     alert('Inside GetData'); 
     var data = PageMethods.GetData(OnSuccess, OnFailed); 
    } 
    function OnFailed(error) { 
     alert('Failed'); 
     alert(error.get_message()); 
    } 
    function OnSuccess(data) { 
      alert(data); 
    } 
    $(document).ready(function() { 
     $('#submit').click(function() { 
      alert('Button Clicked'); 
      $('#list').jqGrid({ 
       url: 'http://localhost:1405/WebSite1/Default.aspx/GetData', 
       data: '{}', // For empty input data use "{}", 
       dataType: 'local', 
       type: 'POST', 
       contentType: "application/json; charset=utf-8", 
       colNames: ['CustomerID', 'CustomerName'], 
       colModel: [ 
        { name: 'CustomerID', index: 'CustomerID', width: 80, 
         align: 'left', editable: false }, 
        { name: 'CustomerName', index: 'CustomerName', width: 120, 
         align: 'left', editable: true}], 
       pager: $('#pager'), 
       rowNum: 5, 
       rowList: [10], 
       sortname: 'CustomerID', 
       sortorder: 'desc', 
       viewrecords: true, 
       width: 300 
      }); 
     }); 
    }); 
</script> 

HTMLコード

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server"> 
</asp:ScriptManager> 
<input type="button" id="submit" value="Fetch" title="Fetch" 
     onclick="javascript:GetData()" /> 
<table id="list"> 
</table> 
<div id="pager"> 
</div> 

Answer 1

まずコーディングPAGE法

[WebMethod] 
public static string GetData() 
{ 
    Customer Cone = new Customer(); 
    Customer Ctwo = new Customer(); 
    Cone.CustomerID = "100"; 
    Cone.CustomerName = "abc"; 
    Ctwo.CustomerID = "101"; 
    Ctwo.CustomerName = "xyz"; 
    List<Customer> lstCustomer = new List<Customer>(); 
    lstCustomer.Add(Ctwo); 
    lstCustomer.Add(Cone); 
    JavaScriptSerializer jsonSerz = new JavaScriptSerializer(); 
    string serializedData = jsonSerz.Serialize(lstCustomer); 
    return serializedData; 
} 

クライアント側がすることができますhereをダウンロードしてください（詳細はhereを参照してください）。あなたはhereを見つけることができる別の例へのより多くのリンク。

現在のコードでいくつかの問題を説明しようとしています。

1. あなたはURLとして 'http://localhost:1405/WebSite1/Default.aspx/GetData'を使用します。あなたは '/WebSite1/Default.aspx/GetData'や 'WebSite1/Default.aspx/GetData'のようなpathesだけを使うほうがいいですか、簡単にsame origin policyの問題を受け取ることができます。
2. ASPXページ（Default.aspx/GetData）の内部にコードを配置する代わりに、ASMXサービスを使用する必要があります。 ASP.NETソリューションに新しい項目を追加し、Web Sericeテンプレートを選択するだけです。対応するコードテンプレートが追加され、web.configが変更されます。同様に、ASP.NETプロジェクトの内部にWCFサービスを配置することができます。このステップは、使用するテクノロジ（WebForms、ASP.NET MVCなど）に依存しません。
3. JavaScriptSerializerに関する手動JSONシリアライズの代わりに、[ScriptMethod(ResponseFormat = ResponseFormat.Json)]をメソッドに設定し、ウェブメソッド（例：List<Customer>など）からオブジェクトを返すように定義する必要があります。 JSONシリアライゼーションは自動的にが実行されます。
4. dataType: 'local'は、jqGridのパラメータが間違っています。正しいパラメータはdatatype:'json'（dataTypeの代わりにdatatypeで、サーバーに要求するには 'json'）になります。
5. type: 'POST'の代わりにmtype: 'POST'を使用してください。
6. contentType: "application/json; charset=utf-8"の代わりにajaxGridOptions: { contentType: "application/json" }を使用してください。
7. data: '{}'の使用も間違っています。おそらく、dataTypeのようなのパラメータdataを使用しようとします。 jqGridでは、dataの代わりにpastDataを使用し、dataパラメータは配列でなければならず、別の意味を持ちます。私はあなたのコードの例を見てみることをお勧めします（私の答えの最初の参照を参照してください）。
8. clickハンドルの内側に$('#list').jqGrid({...});を置かないでください。問題は、コードがjqgridの初期化を行ってからグリッドを埋めることです。あなたが必要とするのは、グリッドを一度しか作成せずに、別の入力データのprobabyでリフレッシュすることです（私はそうであるとは確信していません）。だから$('#list').jqGrid({...});を$(document).ready(function() {...};の中に移動する必要があります。必要に応じて、clickイベントハンドルの内部で$('#list').trigger("reloadGrid")を使用できます。代わりにGridUnloadを使用して、新しいグリッドを作成する前に既存のグリッドを破棄することもできます。

私は主な勧告として、別の例を調べ、jqGridのデータを提供するASMXまたはWCFサービスを使用することをお勧めします。

Answer 2

ページメソッドの前に、グリッドバインディングイベントが呼び出されます。 document.Readyイベントの下に配置しました。ボタンのクリックイベントから呼び出してみてください。

私はわかりませんが、URL部分を使用せずにjsonデータをクライアント側のJqueryグリッドにバインドするには何らかの方法が必要です。

"data："をJson値にマッピングしてみてください。