MVCContrib Grid - wie man hinzufügen und löschen Zeilen mit Ajax?

Question

Ich frage mich, was ist die beste Strategie, um eine Zeile in MVCContrib erzeugte Raster zu löschen.

Betrachten Sie dieses Raster:

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"));

Jede Zeile hat einen Link, die RemoveDoc (docid) JavaScript-Funktion aufruft, wo ich eine Aktion im Controller die Zeile entfernen soll eigentlich durch den Aufruf, um das Dokument in Datenmodell zu entfernen, die recht einfach ist, aber dann kann ich nicht verstehen heraus, wie die Zeile aus tbody mit Jquery zu entfernen. Bitte beraten. Bin ich auf einem complitely Holzweg? Was ist der beste Weg, es zu tun?

Und über eine Zeile hinzufügen. Anfangs dachte ich, es irgendwie wie das zu tun:

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

Aber ich bin nicht sicher, dass dies die beste Praxis, es zu tun. Alle anderen Strategien?

Danke!

Answer 1

Vielleicht etwas unter den Zeilen:

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

und in 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>

und in der Steuerung:

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

Wie Sie sehen, ich ein Standard-Formular mit einem Submit-Button zu löschen. Wenn Sie AJAX verwenden möchten ist es sehr einfach, einen einfachen Link zu generieren und zu dem Click-Ereignis mit jquery befestigen, wie Sie in Ihrem Beispiel haben:

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

und schließlich schrittweise die Verbindung verbessern:

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

Sie können diese Konzepte in Aktion in diesem Beispielprojekt .