JQGridとMVCの完全な動作例

Question

現在のMVCプロジェクトでJQグリッドを使用したいと考えていますが、それを理解しようとするとかなりの問題が発生しています。私は欠けていないと利用可能なドキュメントが欠けているとすべての問題がグリッドにデータを取得するなどの単一の側面に焦点を当てているようだ。私はその点を超えており、データの取り出し、並べ替え、ページング、追加、編集、削除、およびMVCでの検索を完全に実行する例を見たいと思います。そのような例はどこにウェブ上にありますか？

さらに、データアノテーションをJQグリッドの追加/編集と組み合わせて使用​​できるかどうかを知りたいと思いますか？私がこれまで読んだところでは、JQ Grid宣言内に新しい検証ルールを定義しなければならず、モデルで確立したルールは無視されているようです。 JQ Grid CRUD操作中にモデルルールを使用する方法はありますか？私は行が選択され、追加/編集ボタンがクリックされると、適切な部分ビューがロードされた独自のjqueryダイアログポップアップを作成する方法に沿って考えていました。追加ボタンをクリックしたときに発生するJQグリッドイベントは見つかりません。それはあなたの自動生成されたモーダルポップアップフォームを使用するように強制しているようだ...

これはすべてあなたには意味があるが、助けがあれば分かりません。誰かがJQ Gridのすべてのイベントへのリンクを持っていてもそれは大きな助けになるでしょう...ありがとう！

Answer 1

私は基本データソースでJQGridとDataAnnotationsをテストしましたが、そのために（まだうまくいけば）サポートはないようです。

MVCの部分については、trirand.netが提供するASP.NET MVCヘルパーを使用しますか？あなたはここで働い例を見つけることができるので、場合：

http://www.trirand.net/aspnetmvc/grid/editrowinlineactionicons

-Brandon

Answer 2

をあなたは私のJq.Grid が既にデータの注釈および簡単な検索

Answer 3

レイザービューのサポートを試すことができます：総CRUD操作

@{ 
    ViewBag.Title = "Home Page"; 
} 
<table id="tbl"></table> 
<div id="pager"></div> 


@section scripts{ 
<link href="~/Content/Theme/ui.jqgrid.css" rel="stylesheet" /> 
<link href="~/Content/Theme/jquery-ui.min.css" rel="stylesheet" /> 

<script src="~/Scripts/jqGrid/jquery.jqGrid.js"></script> 
<script src="~/Scripts/jqGrid/grid.inlinedit.js"></script> 
<script src="~/Scripts/jqGrid/grid.locale-en.js"></script> 
<script src="~/Scripts/jqGrid/jquery.sortable.js"></script> 


    <script> 
     $(function() { 
      var lastsel; 
      $("#tbl").jqGrid({ 
       url: "/Home/GetData", 
       mtype: "Get", 
       datatype: "Json", 
       colNames: ["ID", "Name", "Address", "Mobile", "Salary"], 
       colModel: [ 
        { name: 'id', index: 'id', editable: false, align: 'center' }, 
        { name: 'name', index: 'name', editable: true }, 
        { name: 'address', index: 'address', editable: true }, 
        { name: 'mobile', index: 'mobile', editable: true }, 
        { name: 'salary', index: 'salary', editable: true } 
       ], 
       loadonce: true, 
       pager: "#pager", 
       rowNum: 20, 
       height:"100%",     
       onSelectRow: function (id) { 
        if (id && id !== lastsel) { 
         $("#tbl").restoreRow(lastsel); 
         $("#tbl").editRow(id, true); 
         lastsel = id; 
        } 
       }, 
       caption: "jqGrid", 
       editurl: "/Home/EditData", 
       viewrecords: true, 
       sortorder: "desc", 
       sortname: "id", 
      }).navGrid("#pager", { edit: false, add: false, del: true, refresh: false, search: false }, 
      {}, 
      {}, 
      { 
       url: "/Home/DelData", 
       mtype: "Post", 
       delData: "row_id_s", 

      }).inlineNav("#pager", { 
       add: true, 
       addParams: { 
        addRowParams: { 
         url: "/Home/AddData", 
         mtype: "Post" 
        } 
       } 
      }); 
     }); 

    </script> 
    } 

MVCコード：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using jqGrid_Exam2.Models; 
using System.Data.Entity; 

namespace jqGrid_Exam2.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     [HttpGet] 
     public ActionResult GetData() 
     { 
      DBcontext db = new DBcontext(); 
      var data = db.EmployeeTbls.ToList<EmployeeTbl>(); 
      return Json(data,JsonRequestBehavior.AllowGet); 
     } 

     [HttpPost] 
     public void EditData(EmployeeTbl emp) 
     { 
      DBcontext db = new DBcontext(); 
      db.Entry(emp).State = EntityState.Modified; 
      db.SaveChanges(); 
     } 

     [HttpPost] 
     public void AddData(EmployeeTbl emp) 
     { 
      DBcontext db = new DBcontext(); 
      db.EmployeeTbls.Add(emp); 
      db.SaveChanges(); 
     } 

     [HttpPost] 
     public void DelData(string id) 
     { 
      DBcontext db = new DBcontext(); 
      EmployeeTbl emp = db.EmployeeTbls.Find(int.Parse(id)); 
      db.EmployeeTbls.Remove(emp); 
      db.SaveChanges(); 
     } 
    } 
}