MVCContrib Grid – ¿Cómo agregar y eliminar filas con ajax?

Me pregunto cuál es la mejor estrategia para eliminar una fila en la cuadrícula generada por MVCContrib.

Considera esta cuadrícula:

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 = "View details | " + "Delete" + ""; 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 javascript RemoveDoc (docid), donde debo 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 luego no puedo averiguar cómo eliminar la fila de tbody con Jquery. Por favor avise. ¿Estoy en un camino totalmente equivocado? Cuál es la mejor manera de hacerlo ?

Y acerca de agregar una fila. Inicialmente pensé en hacerlo de alguna manera así:

 function UploadDocument() { var action = '<%=Html.BuildUrlFromExpression(c => c.UploadDocument(parameters))%>'; $.ajax({ type: "POST", url: action, data: { data to upload }, cache: false, dataType: 'text', success: function (data, textStatus) { var newRow = "" + v1 + "" + doc_author + "" + "View details | " + "Delete" + "" + ""; 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 sea la mejor práctica para hacerlo. ¿Alguna otra estrategia?

¡Gracias!

Tal vez algo entre las líneas:

 <%= Html.Grid(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" %>  <% using (Html.BeginForm(c => c.Destroy(Model.Id))) { %> <%= Html.HttpMethodOverride(HttpVerbs.Delete) %>  <% } %>  

y en el controlador:

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

Como puede ver, uso un formulario estándar con un botón de envío para eliminar. Si desea utilizar AJAX, es muy fácil generar un enlace simple y adjuntarlo al evento click con jquery como lo hizo en su ejemplo:

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

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

Puedes ver esos conceptos en acción en este proyecto de muestra .