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完整工作示例

回答

相关问题