Question

我创建了一个View来显示列表中的一些对象，每行都有一个Delete选项。还有一个名为New的按钮可以创建一个新对象（这是一个例子 - 不是最好的例子之一）。

                            New

239523   Element1_Title     Delete 
196344   Element2_Title     Delete

由于Delete和Create操作位于同一页面上，因此我使用Modal Popups来获得更漂亮的视图。

在服务器端，public ActionResult Create()和public ActionResult Delete()都会返回具有特定结果的特定部分视图，在我的情况下为return PartialView("_create", result)和return PartialView("_delete", result)。

在“视图”页面中，我有以下代码行用于放置Ajax.ActionLink调用的每个部分视图。

<!-- This code is from main view. --> 

<div class="modal fade" role="dialog" id="modalPopUp">
    <div class="modal-dialog" id="modalDialog">
    </div>
</div>

<!-- The `New` button has the following code. -->

@Ajax.ActionLink("New", "Create", new object(), 
        new AjaxOptions { UpdateTargetId = "modalDialog"}, 
        new {data_toggle = "modal", data_target = "#modalPopUp"})


<!-- The list with all elements and the `Delete` button. -->

@foreach (var element in Model.Elements)
{
    <tr>
       <td> @Html.DisplayFor(modelData => element.Number) </td>
       <td> @Html.DisplayFor(modelData => element.Title) </td>
       <td> @Ajax.ActionLink("Delete", "Delete", 
                new {number = element.Number}, 
                new AjaxOptions {UpdateTargetId = "modalDialog"}, 
                new {data_toggle = "modal", data_target = "#modalPopUp"})
       </td>
    </tr>
}

<!-- This code is from a partial view. --> 

@{
     Layout = null;
}

<div class="modal-content" id="modalContent">
    <!-- My popup window content. --> 
</div>

问题是，当我单击New按钮，弹出窗口显示时，将呈现_create.cshtml中的代码。然后，如果我离开窗口并单击Delete按钮，New窗口将再次显示，因为模态仍然具有从我第一次单击渲染的代码。

如果我刷新页面并为一个元素单击一个Delete然后我不删除它，但我想删除另一个，它将删除我先点击的第一个元素。

8个月前我做了同样的事情并且效果很好，这很奇怪。我仍然有一部分代码，但它也不起作用。

所以，我要做的就是在关闭PopUp窗口之后删除渲染的局部视图（PopUp的HTML代码），而不是在刷新页面之后删除，所以我可以用另一个内容带来另一个局部视图。

我试过了

$("#modalPopUp").on('hidden', function() {
    $("modalContent").remove();
}

并在关闭PopUp时删除了内容，但是当我再次点击时，它根本没有显示，但我不认为这是正确的解决方案。

我错过了什么？

谢谢！

Answer 1

代码没有问题，正如Stephen Muecke所说。

我必须包含jquery.unobtrusive-ajax.js，但我的应用程序页面中没有此脚本的渲染。

所以缺少代码行

<!-- In BundleConfig.cs -->

bundles.Add(new ScriptBundle("~/bundles/unobtrusive").Include(
       "~/Scripts/jquery.unobtrusive-ajax.js");

<!-- In _Layout.cshtml -->

@Scripts.Render("~/bundles/unobtrusive")

与我需要包含的应用程序脚本完成相同的操作。

谢谢你，斯蒂芬！

呈现部分视图后，不会删除HTML代码

1 个答案: