0

jquerygrid プラグインを asp.net mvc4 アプリケーションに実装しようとしています。しかし、私は立ち往生しています。君の力が必要。すべてのコードを書き、json データを含む白いページだけを取得しました。どうしてか分かりません。

私の見解を以下に示します。

@model Fancy.Management.Model.User.IndexModel
@{
ViewBag.Title = "Index";
}
<script type="text/javascript">
jQuery(document).ready(function(){ 
    jQuery("#list").jqGrid({
        url:'@Html.Action("Index","User")',
        datatype: 'json',
        mtype: 'GET',
        colNames:['Id','Votes','Title'],
        colModel :[
          {name:'Id', index:'Id', width:40, align:'left' },
          {name:'Votes', index:'Votes', width:40, align:'left' },
          {name:'Title', index:'Title', width:200, align:'left'}],
        pager: jQuery('#pager'),
        rowNum:10,
        rowList:[5,10,20,50],
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: '/scripts/themes/coffee/images',
        caption: 'My first grid'
    }); 
}); 
</script>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

そして、私のアクションメソッドを以下に示します:

  public ActionResult Index(string sidx, string sord, int? page, int? rows)
    {
        var jsonData = new
        {
            total = 1,
            page = 1,
            records = 3,
            rows = new[]{
     new{Id=1,cell=new[] {"1","-7","Is this good question?"}},
     new{Id=2,cell=new[] {"2","15","Is this really?"}},
     new{Id=3,cell=new[] {"3","23","Why is the sky blue?"}}
     }
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

私が得た例外を以下に示します：

ここに画像の説明を入力

4

1 に答える 1

1

Indexアクションが を返していないViewため、作成したビューが使用されることはありません。アクションは JSON データのみを返します。

return Json(jsonData, JsonRequestBehavior.AllowGet);

Indexこれが、アクションを要求したときにブラウザーに JSON データが表示される理由です。

代わりに、ビューを返す必要があります (IndexModelコードにはないように見える のインスタンスを使用):

return View(someInstanceOfIndexModel);

AJAX リクエストは最初にページをロードするリクエストとは異なるリクエストであるため、jqGrid は別のアクションを使用して JSON データを取得する必要があります。このようなもの：

url:'@Html.Action("IndexData","User")',

現在使用しているアクション メソッドは、(上記のサンプルを使用して) AJAX 要求を処理するIndexような名前に変更されます。IndexData

最終的に、ここでの操作の順序は次のようになります。

  1. ブラウザのリクエストIndex。
  2. Indexを返しますView(必要なビュー モデルによって設定されます)。
  3. 問題のビューには JavaScript コードが含まれているため、そのコードはブラウザーによって実行されます。
  4. JavaScript コードは、別のアクションに対して 2 番目のリクエストを作成します (私はそれを と呼びましたIndexDataが、好きなように呼ぶことができます)。
  5. その他のアクションはJson、グリッドが必要とするデータを返します。
  6. クライアント側の JavaScript コードがデータを受け取り、グリッドに入力します。
于 2013-07-27T18:47:15.220 に答える