asp.net-mvc JQGrid 和 MVC 完整工作示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7366155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQGrid and MVC Full Working Example
提问by Marko
I would like to use JQ grid in my current MVC project but I'm running into quite a few problems trying to figure it out. I find the available documentation lacking if not missing and all the problems seem to focus on a single aspect such as getting data into the grid. Well I'm way beyond that point and I would love to see a fully functional example that does fetching data, sorting, paging, add, edit, delete and search all in one with MVC. Is there such an example anywhere on the web?
我想在我当前的 MVC 项目中使用 JQ 网格，但我在尝试解决它时遇到了很多问题。我发现可用的文档即使没有丢失也缺乏，而且所有问题似乎都集中在一个方面，例如将数据导入网格。好吧，我已经超越了这一点，我很想看到一个功能齐全的示例，该示例可以使用 MVC 将获取数据、排序、分页、添加、编辑、删除和搜索功能合而为一。网上有没有这样的例子？
Furthermore I would like to know if I can use data annotations in conjunction with JQ grid add/edit? From what I read so far it seems that I have to define new validation rules within JQ Grid declaration and that rules that I established on the model are being ignored. Is there a way to use model rules during JQ Grid CRUD operations? I was thinking along the way of making my own jquery dialog popup with appropriate partial view loaded once a row is selected and add/edit button is clicked. however I cannot find JQ grid event which is raised when Add button is clicked. It seems to force you into using their auto generated modal popup form...
此外，我想知道是否可以将数据注释与 JQ 网格添加/编辑结合使用？从我目前阅读的内容来看，似乎我必须在 JQ Grid 声明中定义新的验证规则，而我在模型上建立的规则将被忽略。有没有办法在 JQ Grid CRUD 操作期间使用模型规则？我一直在思考如何制作我自己的 jquery 对话框弹出窗口，并在选择一行并单击添加/编辑按钮后加载适当的部分视图。但是我找不到单击添加按钮时引发的 JQ 网格事件。它似乎强迫你使用他们自动生成的模态弹出表单......
I'm not sure if all this makes any sense to any of you but any help would be appreciated. If anyone has a link to all JQ Grid events even that would be a big help... Thanks!
我不确定所有这些对你们中的任何人是否有意义，但任何帮助将不胜感激。如果有人有所有 JQ Grid 事件的链接，那将是一个很大的帮助......谢谢！
回答by m4chine
I just tested JQGrid and DataAnnotations on my underlying datasource and there does not appear to be any support (yet hopefully) for them.
我刚刚在我的底层数据源上测试了 JQGrid 和 DataAnnotations，但似乎没有任何支持（但希望如此）。
As for the for the MVC part, are you looking to use the ASP.NET MVC Helpers provided by trirand.net? if so you can find a working example here:
至于MVC部分，您是否希望使用trirand.net提供的ASP.NET MVC Helpers？如果是这样，您可以在这里找到一个工作示例：
http://www.trirand.net/aspnetmvc/grid/editrowinlineactionicons
http://www.trirand.net/aspnetmvc/grid/editrowinlineactionicons
-Brandon
-布兰登
回答by Aiska Hendra
回答by Shrikant Papanwar
Razor View: Total CRUD Operation
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 Code:
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();
}
}
}
