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

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

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

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


asp.net-mvc jquery-plugins jqgrid-asp.net
person Marko    schedule 09.09.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

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

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

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

-Брэндон

person m4chine    schedule 03.10.2011

arrow_upward
1
arrow_downward

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

person Aiska Hendra    schedule 30.04.2013

arrow_upward
0
arrow_downward

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>
    }

Код МВК:

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();
        }
    }
}
person Shrikant Papanwar    schedule 28.08.2017