JQGrid et MVC : exemple de fonctionnement complet

Question

J'aimerais utiliser la grille JQ dans mon projet MVC actuel, mais je rencontre quelques problèmes en essayant de la comprendre. Je trouve la documentation disponible insuffisante, voire absente, et tous les problèmes semblent se concentrer sur un seul aspect, comme l'introduction de données dans la grille. J'ai largement dépassé ce stade et j'aimerais voir un exemple entièrement fonctionnel qui permette d'extraire des données, de trier, de paginer, d'ajouter, de modifier, de supprimer et de rechercher en une seule opération avec MVC. Existe-t-il un tel exemple quelque part sur le Web ?

En outre, je voudrais savoir si je peux utiliser les annotations de données en conjonction avec l'ajout/la modification de la grille JQ ? D'après ce que j'ai lu jusqu'à présent, il semble que je doive définir de nouvelles règles de validation dans la déclaration de JQ Grid et que les règles que j'ai établies sur le modèle soient ignorées. Existe-t-il un moyen d'utiliser les règles du modèle pendant les opérations CRUD de JQ Grid ? J'ai pensé à créer mon propre popup de dialogue jquery avec une vue partielle appropriée chargée une fois qu'une ligne est sélectionnée et que le bouton ajouter/modifier est cliqué. Cependant, je ne trouve pas l'événement de la grille JQ qui est déclenché lorsque le bouton ajouter est cliqué. Il semble vous forcer à utiliser leur formulaire popup modal généré automatiquement...

Je ne sais pas si tout cela a un sens pour l'un d'entre vous, mais toute aide serait appréciée. Si quelqu'un a un lien vers tous les événements de JQ Grid, même cela serait d'une grande aide... Merci !

Answer 1

Je viens de tester JQGrid et DataAnnotations sur ma source de données sous-jacente et il ne semble pas y avoir de support (pour l'instant, je l'espère) pour eux.

Pour ce qui est de la partie MVC, cherchez-vous à utiliser les aides ASP.NET MVC fournies par trirand.net ? Si oui, vous pouvez trouver un exemple fonctionnel ici :

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

-Brandon

Answer 2

Vous pouvez essayer mon Jq.Grid déjà un support pour l'annotation des données et la recherche simple

Answer 3

Razor View : Opération CRUD totale

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

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