JQGrid和MVC完整工作示例

我想在我當前的MVC項目中使用JQ網格，但我遇到了很多問題，試圖找出它。我發現如果不缺少可用的文檔，所有問題似乎都集中在單個方面，例如將數據導入網格。那麼我超越了這一點，我很想看到一個功能齊全的例子，它可以使用MVC獲取數據，排序，分頁，添加，編輯，刪除和搜索。網絡上的任何地方都有這樣的例子嗎？JQGrid和MVC完整工作示例

此外，我想知道是否可以將數據註釋與JQ網格添加/編輯一起使用？從我目前閱讀的內容來看，似乎我必須在JQ Grid聲明中定義新的驗證規則，並且我在該模型上建立的規則將被忽略。有沒有在JQ Grid CRUD操作中使用模型規則的方法？我一直在想，一旦選擇了一行並單擊添加/編輯按鈕，就會創建自己的jQuery對話框彈出窗口，其中包含適當的部分視圖。但是我找不到點擊添加按鈕時引發的JQ網格事件。它似乎強迫你使用自動生成的模式彈出窗體...

我不知道這一切是否對任何人有任何意義，但任何幫助將不勝感激。如果任何人有鏈接到所有JQ Grid事件，即使這將是一個很大的幫助......謝謝！

來源

2011-09-09 Marko

我剛剛在我的基礎數據源上測試了JQGrid和DataAnnotations，但似乎沒有任何支持（但希望）對他們。

至於MVC部分，你是否想使用由trirand.net提供的ASP.NET MVC Helpers？如果是這樣你可以在這裏找到工作的例子：

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

布蘭登

來源

2011-10-03 15:46:27 m4chine

你可以試試我的Jq.Grid 已經爲數據標註和簡單的搜索

來源

2013-04-30 19:40:18

Razor視圖支持：總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(); 
     } 
    } 
}

來源

2017-08-28 06:08:49

JQGrid和MVC完整工作示例

回答

相關問題