Question

ASP.NET MVC

我有一页Index.aspx我将两个usercontrol加载到div中。这工作正常。目前，用户控件只显示数据，并且工作正常。但是现在我想在usercontrols中添加一个delete函数，然后刷新Index.aspx页面中的div。这可能吗？

的Index.aspx

<!-- Panel One -->
<div id="panel1">
    <img src="/Content/ajax-loader.gif" alt="Loading..." />
</div>

<script type="text/javascript">
    $('#panel1').load('../Reports/ReportOne')
</script>

<!-- Panel Two -->
<div id="panel2">
    <img src="/Content/ajax-loader.gif" alt="Loading..." />
</div>

<script type="text/javascript">
    $('#panel2').load('../Reports/ReportTwo')
</script>

ReportOne.ascx和ReportTwo

只需使用foreach列出一些数据。在这里，我想为列表中的每个项添加一个删除按钮。

Answer 1

当用户单击用户控件内的删除按钮时，您可以调用一个操作，该操作将从数据库中删除必要的信息并返回刷新控件的局部视图。所以在控件中放一个删除链接：

<%= Html.ActionLink("Delete", "DeleteReportOne", null, new { id = "deleteReportOne" }) %>

然后在主页面内注册此链接的点击回调：

$(function() {
    $('#deleteReportOne').click(function() {
        $('#panel1').load(this.href);
    });
});

Answer 2

您可以使用JQuery UI标签添加和删除页面中的内容

JQuery UI Manipulate tabs

JQuery Tabs and ASP.NET MVC Partial Views

Answer 3

将“删除”操作转换为以下内容：

    [AcceptVerbs(HttpVerbs.Post), ValidateAntiForgeryToken]
    public ActionResult Delete(int id) {
        try {
            // do what ever here in deleting the record etc
            // ...

            return null;
        } catch (Exception ex) {
            TempData[TempDataKeys.ErrorMessage] = "Error in deleting: " + ex.Message;
            return RedirectToAction("List");
        }
    }

在ascx / aspx中，创建一个jQuery方法将ajax调用包装到控制器：

function deleteRecord(recordId) {
    if (confirm("Are you sure that you want to delete this record?")) {
        var token = $("input[name='__RequestVerificationToken']")[0].value;
        url = '<%= Url.Action("Delete", "MyController") %>';

        $.post(
           url, 
           { id: recordId, __RequestVerificationToken: token }, 
           function(data) { 
               if (!data == "") {
                   // success - reload/refresh panel control
                   $('#panel1').load('../Reports/ReportOne');
               } else {
                   // failed - handle error
               }  
           }
        );
    }
}

您需要正确放置AntiForgeryToken，以便脚本可以访问它 - 整个页面只需要1。然后，您的删除链接应该调用javascript，而不是直接调用控制器中的操作：

<a href="javascript:deleteRecord('<%=recordId%>');">Delete</a>

Answer 4

您需要修改您的用户控件

ASP.NET MVC刷新用户控件

4 个答案: