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 Helpers？如果是这样，您可以在这里找到一个工作示例：

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

-布兰登

Answer 2

你可以试试我的Jq.Grid 已经支持数据标注和简单搜索

Answer 3

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();
        }
    }
}