呈現部分視圖后，不會刪除HTML代碼

Question

我創建了一個視圖以在列表中顯示一些對象，並且每一行都有一個“ 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")

需要為我的應用程序腳本執行相同操作的方式。

謝謝斯蒂芬！