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

Posted 2023-04-18

【中文标题】MVCContrib Grid - 如何使用 ajax 添加和删除行？

【英文标题】：MVCContrib Grid - how to add and delete rows with ajax?

【发布时间】：2011-04-21 06:16:15

【问题描述】：

我想知道在 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 =
                        "<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"));

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

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

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

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

谢谢！

【参考方案1】：

也许是其中的一些东西：

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

在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>

在控制器中：

[HttpDelete]
public ActionResult Destroy(int id)

    Repository.Delete(id);
    return RedirectToAction("Index");

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

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

最后逐步增强链接：

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

您可以在 this sample project 中看到这些概念的实际应用。

【讨论】：

知道如何在删除后淡出这些行吗？

@Shawn Mclean，在 AJAX 成功回调中，通过应用所需的效果从 DOM 中移除相应的 <tr>。