Полный рабочий пример JQGrid и MVC

Question

Я хотел бы использовать сетку JQ в моем текущем проекте MVC, но у меня немало проблем, пытаясь понять это.Я нахожу доступную документацию отсутствующей, если не отсутствующей, и кажется, что все проблемы сосредоточены на одном аспекте, таком как получение данных в сетке.Ну, я далеко зашел, и я хотел бы увидеть полнофункциональный пример, который позволяет извлекать данные, сортировать, разбивать на страницы, добавлять, редактировать, удалять и искать все в одном с помощью MVC.Есть ли такой пример где-нибудь в сети?

Кроме того, я хотел бы знать, могу ли я использовать аннотации данных в сочетании с добавлением / редактированием сетки JQ?Из того, что я прочитал до сих пор, кажется, что я должен определить новые правила проверки в объявлении JQ Grid, и что правила, которые я установил в модели, игнорируются.Есть ли способ использовать правила модели во время операций JQ Grid CRUD?Я думал о том, как сделать свое собственное всплывающее диалоговое окно jquery с соответствующим частичным представлением, загруженным после выбора строки и нажатия кнопки добавления / редактирования.Однако я не могу найти событие сетки JQ, которое возникает при нажатии кнопки Добавить.Кажется, это заставляет вас использовать их автоматически сгенерированную модальную всплывающую форму ...

Я не уверен, что все это имеет смысл для кого-то из вас, но любая помощь будет признательна.Если у кого-то есть ссылка на все события JQ Grid, это даже очень поможет ... Спасибо!

Answer 1

Я только что протестировал JQGrid и DataAnnotations на своем базовом источнике данных, и, похоже, их поддержка не поддерживается (но, надеюсь, пока).

Что касается части MVC, хотите ли вы использовать помощники ASP.NET MVC, предоставленные trirand.net? если это так, вы можете найти рабочий пример здесь:

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

-Brandon

Answer 2

вы можете попробовать мою Jq.Grid уже поддерживается аннотация данных и простой поиск

Answer 3

Razor View: общая операция 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();
        }
    }
}