MvcContrib Grid - comment ajouter et lignes avec suppression ajax?

Question

Je me demande quelle est la meilleure stratégie pour supprimer une ligne dans la grille générée MvcContrib.

Considérez cette grille:

Html.Grid(Model.Proc.Documents).Columns(column =>
{
    column.For(c => c.Name).Named("Title");
    column.For(c => c.Author.Name).Named("Author");
    column.For("Action").Action(
            delegate(DocumentDto doc)
            {
                const string cbxFrmt =
                        "<td><strong><a href=\"#\" onclick=\"DocDetails({0})\">View details</a></strong> | " +
                            "<strong><a href=\"#\" onclick=\"RemoveDoc({1})\">Delete</a></strong>" + 
                        "</td>";


                Response.Write(string.Format(cbxFrmt, doc.Id, doc.Id));
            }
            ).DoNotEncode().Named("Action");

})
.Attributes(id => "documentgrid"));

Chaque ligne a un lien qui appelle la fonction javascript RemoveDoc (docid), où je devrais supprimer la ligne en appelant une action dans le contrôleur pour éliminer effectivement le document dans le modèle de données, ce qui est assez facile, mais je ne peux pas comment supprimer la ligne de tbody avec Jquery. S'il vous plaît donnez votre avis. Suis-je sur une mauvaise voie complitely? Quelle est la meilleure façon de le faire?

Et sur l'ajout d'une ligne. Au début, je pensais que de le faire en quelque sorte comme ça:

function UploadDocument() {

    var action = '<%=Html.BuildUrlFromExpression<MyController>(c => c.UploadDocument(parameters))%>';

    $.ajax({
        type: "POST",
        url: action,
        data: { data to upload },
        cache: false,
        dataType: 'text',
        success: function (data, textStatus) {
         var newRow = "<tr class='gridrow'><td>" + v1 + 
                "</td><td>" + doc_author + "</td>" +
                "<td><strong><a href=\"#\" onclick=\"DocDetails(doc_id_returned_by_ajax)\">View details</a></strong> | " +
                    "<strong><a href=\"#\" onclick=\"RemoveDoc(doc_id_returned_by_ajax)\">Delete</a></strong>" + 
                "</td>" +                              
                "</tr>";
            var docgrid = $('#documentgrid');
            var tbody = $("table[class='grid']>tbody");
            $(tbody).append(newRow);
        },
        error: function (xhr, textStatus, errorThrown) {
            var msg = JSON.parse(xhr.responseText);
            alert('Error:' + msg.Message);
        }
    });
}

Mais je ne suis pas sûr que ce soit la meilleure pratique de le faire. Toute autre stratégie?

Merci!

Answer 1

Peut-être quelque chose entre les lignes:

<%= Html.Grid<Document>(Model.Proc.Documents)
    .Columns(column => {
        column.For(c => c.Name).Named("Title");
        column.For(c => c.Author.Name).Named("Author");
        column.For("TableLinks").Named("");
    })
%>

et TableLinks.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SomeNs.Document>" %>
<td>
    <% using (Html.BeginForm<HomeController>(c => c.Destroy(Model.Id))) { %>
        <%= Html.HttpMethodOverride(HttpVerbs.Delete) %>
        <input type="submit" value="Delete" />
    <% } %>
</td>

et dans le contrôleur:

[HttpDelete]
public ActionResult Destroy(int id)
{
    Repository.Delete(id);
    return RedirectToAction("Index");
}

Comme vous pouvez le voir, j'utiliser un formulaire standard avec un bouton soumettre à supprimer. Si vous voulez utiliser AJAX, il est très facile de générer un lien simple et joindre à l'événement, cliquez avec jquery que vous avez fait dans votre exemple:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SomeNs.Document>" %>
<td>
    <%= Html.ActionLink(
        "Delete document", 
        "Destroy", 
        new { id = Model.Id }, 
        new { @class = "destroy" }
    ) %>
</td>

et enfin améliorer progressivement le lien:

$(function() {
    $('.destroy').click(function() {
        $.ajax({
            url: this.href,
            type: 'delete',
            success: function(result) {
                alert('document successfully deleted');
            }
        });
        return false;
    });
});

Vous pouvez voir ces concepts en action dans ce projet échantillon .