0

私はMVCとJqueryにかなり慣れていません。ここ数日間、Jqgrid http://www.trirand.com/blog/を使用してデータベースにデータを表示しようとしていました。最初にEFコードを使用して、唯一のクラス「Author」を作成します

public class Author
{

    public int AuthorID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }

    public string FullName
    {
        get
        {
            return  FirstName+ " "+LastName ;
        }
    }
}

これは、Json データを作成する「AuthorController」です。

public ActionResult LinqGridData(string sidx, string sord, int page, int rows)
{
    var jsonData = new
    {
         total = 5,
         page = 1,
         records = db.Authors.Count(),
         rows = db.Authors.Select(a => new
                                 {
                                   id = a.AuthorID,
                                   cell = new { a.AuthorID, a.FirstName, a.LastName }
                                 }
         )
     };
     return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Jsonデータを取得するために別の方法も試しました：

 public ActionResult LinqGridData (string sidx, string sord, int page, int rows) 
   {
        var jsonData = new {
        total = 5, 
        page=1,
        records = db.Authors.Count(),
        rows = (from a in db.Authors
                select new 
                {
                    id = a.AuthorID,
                    cell = new {  a.AuthorID, a.FirstName, a.LastName }
                }
          )
      };
      return Json(jsonData,JsonRequestBehavior.AllowGet);
    }

これが私のビューで使用する私の JavaScript です。

 $(function () {
    $("#list").jqGrid({
        url: '/Author/LinqGridData',
        datatype:'json',
        mtype: 'GET',
        colNames:['Author ID', 'First Name', 'Last Name'],
        colModel:[
            {name:'AuthorID',index:'AuthorID',width:55 },
            {name:'FirstName',index:'FirstName',width:90 },
            {name:'LastName',index:'LastName',width:80,align:'right' }
        ],
        pager:'#pager',
        rowNum: 10,
        rowList:[5, 10, 20, 30],
        sortname:'AuthorID',
        sortorder:'desc',
        viewrecords:true,
        gridview:true,
        caption:'Author List'
    });
});
jQuery("#datagrid").jqGrid('navGrid', '#navGrid', { edit: true, add: true, del: true });

ダミーデータでグリッドを表示できます。このアクション メソッドで:

 public ActionResult GridData(string sidx, string sord, int page, int rows)
   {
       var jsonData = new
       {
           total = 1, // we'll implement later 
           page = 1,
           records = 3, // implement later 
           rows = new[]
           {
              new {id = 1, cell = new[] {"1", "-7", "Is this a good question?"}},
              new {id = 2, cell = new[] {"2", "15", "Is that a good question?"}},
              new {id = 3, cell = new[] {"3", "23", "Why is the sky in the sky?"}}    
           }
       };
       return Json(jsonData,JsonRequestBehavior.AllowGet);
   }

問題は、データベースのデータを表示したいときはいつでも、データではなくグリッド自体しか表示できないことです。ビューに送信する前にjsonデータを toList() または toArary() に変換しようとしましたが、同じ結果です。私は自分自身を明確にしたことを願っています。

どんな助けでも大歓迎です。

4

2 に答える 2

0

私はついに私のデータベースからのデータを表示することができました。問題は私の質問にありました。私は自分のアクションメソッドにこのメソッドを使用します：

public JsonResult LinqGridData (string sidx, string sord, int page, object rows)
   {
       var authors = (from a in db.Authors select a).ToList();
       var jsonData = new {
        total = 5, 
        page=1,
        records = db.Authors.Count(),
        rows = authors.Select(a => new 
                    {
                        id = a.AuthorID,
                        cell = new[] { a.AuthorID.ToString(), a.FirstName, a.LastName }
                    }
        )              
       };
      return Json(jsonData,JsonRequestBehavior.AllowGet);            
    }

そして私はこれを私のJavascriptで使用しました：

$(function () {
$("#list").jqGrid({
    url: "/Author/LinqGridData",
    datatype: "json",
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        cell: "cell",
        id:"id"
    },
    mtype: "GET",
    colNames: ["Author ID", "First Name", "Last Name"],
    colModel: [
        { name: "AuthorID", key: true, width: 55 },
        { name: "FirstName", width: 80 },
        { name: "LastName", width: 100, align: "right" }
    ],
    pager: "#pager",
    rowNum: 10,
    rowList: [5, 10, 20],
    sortname: "AuthorID",
    sortorder: "desc",
    viewrecords: true,
    gridview: true,
    width: 610,
    height: 250,
    caption: "Author List"
});

}）; jQuery（ "＃list"）。jqGrid（ "navGrid"、 "#pager"、{編集：true、追加：true、del：true}）;

はい、「cell」属性を省略して、jsonデータを減らすことができます。'id'：0を入れることもできます。これは通常、最初のアイテムをidとして扱うことを意味します。'key'属性も使用しましたが、冗長です。クエリ結果を配列として渡すこともできます。誰かが私にリストを使用することの利点が他のものよりもあると私に言うことができれば、大いに感謝されます。

あなたの助けをありがとう幸運

于 2013-03-06T02:20:15.243 に答える
0

"repeatitems: false" で jsonReader を試しましたか? 例えば：

$("#list").jqGrid({
    url: '/Author/LinqGridData',
    datatype:'json',
    jsonReader: {
        repeatitems: false
    },
    .....

更新: LinqGridData メソッドから返された応答本文を見ると、次のようになります。

{"total":5,"page":1,"records":1,"rows":
  [
    {"id":"1","cell":{"AuthorID":"1","FirstName":"Mike","LastName":"Lee"}}, .....
  ]
}

しかし、私はそれが次のようであるべきだと思います：

{"total":5,"page":1,"records":1,"rows":
  [
    {"id":"1","cell":{"1", "Mike", "Lee"}}, .....
  ]
}

実際、これは「ダミー データ」バージョンのレスポンス ボディです。

以下に私の作業例を掲載します。この例では、'cell' 属性を使用しませんでした。
サーバー側:

        var myQuery = from t in db.Customers
                      select t;
        var jsonData = new
        {
            total = totalPages,
            page = pageNum,
            records = totalRecords,
            rows = myQuery.ToList()
        };

        return Json(jsonData, JsonRequestBehavior.AllowGet);

クライアント側:

{
    url: '@Url.Action("GetList")',
    datatype: 'json',
    jsonReader: {
      repeatitems: false
    },
    mtype: 'GET',
    colModel: [
      {
        name: 'CustomerID', label: 'ID', hidden: false, width: 40, sortable: true
      },
      {
        name: 'CompanyName', label: 'Company', width: 100, align: 'center' 
      },
    ]
}

お役に立てれば。

于 2013-03-03T08:45:55.083 に答える