ASP.Net MVC 3, JQGrid

Blick auf die code-Beispiel von die andere Antwort. Ich hoffe, es wird hilfreich sein.

Kleine Bemerkungen:

1. sortname: 'Id' ist falsch-parameter, weil Sie keine Spalte mit dem Namen 'Id'. Wahrscheinlich meinst du sortname:'equipmentID'.
2. Sollten Sie entfernen imgpath: '/scripts/themes/coffee/images' parameter von jqGrid die depricated.
3. Sollten Sie entfernen Sie alle Attribute außer id aus dem HTML-code: <table id="list"></table><div id="pager"></div>

Werde ich der Frage nachgehen, inline-editieren und hinzufügen einer neuen Zeile zu jqGrid, wie es gilt für ASP.NET MVC 3 und Gestochen von C#. Auch ein C# - Controller-code zum füllen der raster und speichern von Daten auf dem Netz. Zuerst lässt Blick auf, wie zu installieren, jqGrid 4.4.1 in einem MVC3 Web-Anwendung mit dem NuGet-Paket-manager.

1. Installieren jQuery 1.7.2 oder höher.
2. Installieren jQuery.UI.Kombinierte.
3. Installieren jqGrid 4.4.1

Können Sie herunterladen jqGrid getrennt von

http://www.trirand.com/blog/?page_id=6

und das jqGrid Dokumentation finden Sie auf

http://www.trirand.com/jqgridwiki/doku.php

Werde ich nicht testen, der code in diesem post, aber es basiert auf code, der funktioniert. Ich werde die brute-force-Ansatz zur Lösung der schwierigen und komplexen problem, füllen ein jqGrid von einer action-Methode, die Bearbeitung einer einzelnen Zeile oder das hinzufügen eines neuen editierbare Zeile, speichern Sie die Zeile zu einer action-Methode. Ich bin sicher, dass mehr optimale Möglichkeiten, dies zu tun, können gefunden werden, aber dies ist ein guter Ausgangspunkt. Ich bin nicht, Ihnen zu zeigen, wie Sie Sie optimieren das Erscheinungsbild Ihrer jqGrid, überlasse ich Ihnen. Ich werde mich mit JSON als Datenaustausch-format zwischen jqGrid und ASP.NET MVC-3. Ich werde nicht die Adresse das Problem von löschen einer Zeile im raster.

Beginnen wir mit der GET-Aktion-Methode im Controller

public JsonResult GetProduct(int productId = 0)
{
    var productsQuery = dbContext.FirstOrDefault(p => p.ProductId == productId);
    var productsList = new List<Products>();

    //SQL does not understand ToString() so we have to do this or something like it
    foreach(var p in productsQuery)
    {
        var product = new Product{
           ProductId = p.ProductId,
           Product.Name = p.Name,
           Product.Date = p.Date.ToShortDateString()
           //and so on...
        };
        productsList.Add(product);
    }

    //You must build an anonymous object that can then be converted into a 2-dimensional 
    //array formatted for jqGrid, convert it to a 2d array then Json.  Note that all grid 
    //data must be in string format.
    var jsonData = new {
        total = 1,
        page = 1,
        records = productsQuery.Count(),
        rows = productsList.Select(p => new {
            id = p.id.ToString(),
            cell = new string[] {
                p.Name,
                p.Date.ToShortDateString(),
                //and so on...
               }
            }).ToArray();
        };

       return Json(jsonData, JsonRequestBehavior.AllowGet);
}

... Und der Blick...

<script type="text/javascript">
    $(document).ready(function () {

        var lastSelectedId;
        var grid = $('#grid');
        grid.jqGrid({
            url: "@Url.Action("GetProducts", "Products")",
            datatype: 'json',
            mtype: 'post',
            colNames: ['ProductId', 'Name', 'Date',
                //and so on...
                ],
            colModel: [
                { name: 'ProductId', index: 'ProductId', editable: false },
                { name: 'Name', index: 'Name', editable: true, edittype: 'text' },
                { name: 'Date', index: 'Date', editable: true, edittype: 'text' }
                //and so on...
                ],
            onSelectRow: function(rowid) {
                if (rowid && rowid !== lastSelectedId) {
                    grid.jqGrid('resotreRow', lastSelectedId);
                    lastSelectedId = rowid;
                }
                grid.jqGrid('editRow', rowid, { keys: true });
            },
            editurl: "@Url.Action("SaveProducts", "Products");
            rownum: [10],
            rowList: [5,10,20,50],
            pager: '#grid_pager',
            sortName: 'Name',
            viewrecords: true,
            gridview: true,
            caption: 'Sample Grid'
    });
    grid.jqGrid('navGrid', '#pager', { edit: false, add: false: del: false,
         refresh: false });
    grid.jqGrid('inlineNav', '#pager', {
        addParams: {
            position: 'first',
            addRowParams: {
                keys: true,
                oneditfunc: onInlineEdit
            }
            add: true,
            edit: false,
            save: false,
            cancel: true
    });
    function onInlineEdit(rowid) {
        //add inline editing functionality here
    }             
</script>
@using (Html.BeginForm("","", FormMethod.Post, new { id = "ProductsForm" }))
{
    <table id="grid">
    </table>
    <div id="pager">
    </div>
}

und dann die POST-Methode

[HttpPost]
public JsonResult SaveProduct(FormCollection frm)
{
    Product product;

    if (frm["oper"] == "add")
    {
        product = new Product();
    }
    else
    {
        int productId = Int32.Parse(frm["id"]);
        product = dbContext.Products.FirstOrDefault(p => p.ProductId == productId);
    }

    foreach (var key in frmAllKeys)
    {
        switch(key)
        {
            case "Name":
                product.Name = frm[key];
                break;
            case "Date":
                product.Date = DateTime.Parse(frm[key]);
                break;
            //and so on...
        }
    }

    try
    {
        if (frm["oper"] == "add")
        {
            dbContext.AddObject(product);
        }
        dbContext.SaveChanges();
    }
    catch (Exception ex)
    {
        Debug.WriteLine(exception.StackTrace);
        return Json(false);
    }
    return Json(true);
}

Gibt es bessere Möglichkeiten, dies zu tun, aber das ist ein guter Anfang. Ich bin nicht der Bewältigung der dynamischen grid-Problem. Ich bin nicht sicher, wie das erreicht werden könnte. Es genügt zu sagen, dass eine dynamische jqGrid würde erfordern viel mehr JavaScript und/oder C# - code. Ich würde werfen Sie einen Blick auf die "grid in einem grid" - Funktionalität in jqGrid eine Kombination aus einem statischen Gitter mit einer dynamischen grid.

Ich habe versucht mit build-Funktionen akzeptieren würde, der Typ des Objektes, eine Liste von Datensätzen und erzeugen den jqGrid-Array und Json-Daten für das grid, ohne all die zusätzliche Arbeit, die oben gezeigt. Ich denke, es kann getan werden, mit Reflexion aber ich habe keine Zeit, es jetzt tun.

Endlich habe ich auch versucht, den Aufbau Funktionen, extrahiert die Daten aus der FormCollection und füllen Sie ein Objekt gegeben, nur den Objekt-Typ und die FormCollection. Wieder, ich denke, das getan werden kann mithilfe der reflektion, aber I dont haben Zeit, um es jetzt tun. Wenn jemand will, um zu versuchen, um eine MVC3-C# jqGrid Json-generator und extractor, ich würde empfehlen, dass Sie die Entity Framework Code First Methode mit POCO-Klassen für Ihr Modell. POCO-Klassen sind viel einfacher zu arbeiten, als entity-Objekte für eine solche Aufgabe.

Ich hoffe, das hilft 🙂