MVCContrib Grid – 如何使用ajax添加和删除行？

我想知道在MVCContrib生成的网格中删除行的最佳策略是什么。

考虑这个网格：

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

每一行都有一个调用RemoveDoc（docid）javascript函数的链接，在这里我应该通过调用控制器中的一个动作来删除行，以实际删除数据模型中的文档，这很容易，但后来我无法弄清楚如何使用Jquery从tbody中删除行。 请指教。 我是在完全错误的轨道上吗？ 最好的方法是什么？

并添加一行。 最初我想过以某种方式这样做：

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

但我不确定这是做这件事的最佳做法。 还有其他策略吗？

谢谢！

Answer 1

可能是某些内容：

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

并在TableLinks.ascx ：

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>  <% using (Html.BeginForm(c => c.Destroy(Model.Id))) { %> <%= Html.HttpMethodOverride(HttpVerbs.Delete) %>  <% } %>  

并在控制器中：

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

如您所见，我使用带有提交按钮的标准表单进行删除。 如果你想使用AJAX，很容易生成一个简单的链接并使用jquery附加到click事件，就像在你的例子中一样：

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

最后逐步增强链接：

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

您可以在此示例项目中查看这些概念。