Razor - grille modifiable - quelle approche ?

Question

Je me demande beaucoup et je ne sais pas encore quoi décider d'utiliser. Donc, je veux avoir une grille et éditer les données de ses lignes.

Je travaille avec MVC3 Razor, je connais ces possibilités : - jqGrid Razor - knockout grid Razor - je ne sais pas comment le rendre éditable. Est-ce possible, ou est-ce juste pour afficher des données ? - web grid, Razor

Je n'aime pas utiliser les contrôles Telerik ! Pouvez-vous me conseiller sur la meilleure approche pour créer une grille éditable et que faire si je n'ai pas besoin d'une grille éditable ? Pourquoi utiliser l'un ou l'autre des moyens ? Et tout cela dans une page Razor.

Answer 1

La grille de ShieldUI prend également en charge de nombreux modes d'édition, scénarios et l'envoi des mises à jour localement ou vers n'importe quel point d'extrémité distant.

Un bon exemple pour commencer peut être trouvé ici:

http://demos.shieldui.com/mvc/grid-editing/editing-restful-web-service

Answer 2

JqGrid prend certainement en charge l'édition, vous pouvez voir quelques exemples sur http://www.trirand.com/blog/jqgrid/jqgrid.html ou consulter la documentation sur http://www.trirand.com/jqgridwiki/doku.php?id=start

Answer 3

Utilisez le code suivant pour Modifier et de même pour Ajouter, Supprimer.

Pour Afficher,

@(Html.Telerik().Grid()
                       .Name("gvCustomerOrderDetails")
                       .DataKeys(keys => keys.Add(k => k.ItemID))
                       .Columns(column =>
                       {
                           column.Bound(i => i.ItemID).Hidden(true);
                           column.Bound(i => i.SalesSequenceNumber).Hidden(true);
                           column.Bound(i => i.ItemSequence).Hidden(true);
                           column.Bound(i => i.ItemName).Title("Nom de l'élément").ReadOnly();
                           column.Bound(i => i.Quantity).Title("Quantité de commande").HtmlAttributes(new { @class = "gridTextAlignRight" });
                           column.Bound(i => i.ItemUnitPrice).HtmlAttributes(new { @class = "gridTextAlignRight" }).ReadOnly();
                           column.Bound(i => i.ItemUnitPrice).Hidden(true);
                           column.Bound(i => i.TotalPrice).HtmlAttributes(new { @class = "gridTextAlignRight" }).ReadOnly();
                           column.Command(command =>
                           {
                               command.Edit().ButtonType(GridButtonType.Image);
                           }).Width(80).Title("Commandes");
                       })
                       .Selectable()
                       .DataBinding(dbBindings =>
                           {
                               dbBindings.Ajax().Select("__CustomerOrderDetailsGridBind", "CustomerInfo")
                                                .Update("__CustomerOrderDetailsUpdate", "CustomerInfo");
                           })
                       .ClientEvents(events =>
                        events.OnDataBinding("onDataBinding")
                              .OnError("onError")
                       )
                       .Scrollable(scroll => scroll.Height(300))

                 )

Pour Contrôler, utilisez le code suivant,

    [AcceptVerbs(HttpVerbs.Post)]
    [GridAction]
    public ActionResult __CustomerOrderDetailsUpdate(CustomerOrderDetails objCustomerOrderDetails)
    {
        SalesItem objSalesItem = new SalesItem();
        objSalesItem.SalesSequenceNumber = objCustomerOrderDetails.SalesSequenceNumber;
        objSalesItem.ItemSequence = Convert.ToByte(objCustomerOrderDetails.ItemSequence);
        objSalesItem.ItemID = objCustomerOrderDetails.ItemID;
        objSalesItem.Quantity = objCustomerOrderDetails.Quantity;
        objSalesItem.ItemUnitPrice = objCustomerOrderDetails.ItemUnitPrice;
        objSalesItem.TotalPrice = objCustomerOrderDetails.ItemUnitPrice * objCustomerOrderDetails.Quantity;
        objSalesItem.SalesDate = DateTime.Now;
        objSalesItem.EntryBy = objLoginHelper.LogInID;
        objSalesItem.EntryDate = DateTime.Now;

        customerDal.UpdateSalesItem(objSalesItem);

        return View(new GridModel
        {
            Data = customerDal.CustomerOrderDetailsInfo(objCustomerOrderDetails.SalesSequenceNumber, Helper.Active)
        });
    }

Vous pouvez également utiliser votre classe spécifique de modèle pour Ajouter, Modifier et Supprimer. Ici, ReadOnly() est utilisé pour les colonnes non éditées. Si vous avez besoin de la valeur de la colonne dans le contrôle, utilisez la même colonne sans ReadOnly() et juste Hidden.

Je pense que tout le monde apprécie l'utilisation de ce code.