MVCContrib Grid - cómo añadir y Eliminar filas con el Ajax?

Question

Me pregunto cuál es la mejor estrategia para eliminar una fila en la grilla generada MVCContrib.

Considere esta red:

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

Cada fila tiene un enlace que llama a la función RemoveDoc (iddoc) javascript, donde debería eliminar la fila llamando a una acción en el controlador para eliminar realmente el documento en el modelo de datos, que es bastante fácil, pero entonces yo no puedo entender encontrar la manera de eliminar la fila de tbody con jQuery. Por favor avise. ¿Estoy en un camino equivocado complitely? ¿Cuál es la mejor manera de hacerlo?

Y sobre la adición de una fila. Al principio pensé que de alguna manera de hacerlo así:

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

Pero no estoy seguro de que esta es la mejor práctica para hacerlo. Cualquier otra estrategia?

Gracias!

Answer 1

Tal vez algo entre las líneas:

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

y en 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>

y en el controlador:

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

Como se puede ver que utilizo una forma estándar con un botón de envío a eliminar. Si desea utilizar AJAX es muy fácil de generar un enlace simple y adjuntar al evento click con jQuery como lo hizo en su ejemplo:

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

y finalmente mejorar progresivamente el enlace:

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

Se puede ver esos conceptos en acción en este proyecto de ejemplo .