Question

我正在尝试使用Asp.Net Core（mvc）项目中的弹出窗口确认删除对话框。代码是这样的：

<tbody>
 @foreach (var item in Model)
 {
     <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.RepFile)
        </td>
        <td>
           <a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |
           <a asp-action="Details" asp-route-id="@item.ID">Details</a> |
           <!--<a asp-action="Delete" asp-route-id="@item.ID">Delete</a>-->
           <input type="button" id="deleteReport"value="Delete"/>
       </td>
  }
  <div id="dialog">
        <h3>Are you sure you want to delete this report?</h3>
 </div>

和jquery：

        var dialogDiv = $("#dialog");

        $("#deleteReport").click(function () {
            dialogDiv.dialog("open");
            });

        dialogDiv.dialog({
            title:"Confirm Delete",
            autoOpen:false,
            modal: true,
            draggable: false,
            resizable: false,
            closeOnEscape: false,
            buttons: {
                "Delete": function () {
                    dialogDiv.dialog("close");
                },
                "Cancel": function () {
                    dialogDiv.dialog("close");
                }
              }
          });

    </script>`

问题是：弹出窗口不起作用，但它只适用于（db）表中的一个特定记录。为什么，我该如何解决这个未知问题呢？（弹出功能还没有完成，但这不是我现在所关心的，但任何帮助如何使其正常运行，从数据库中删除记录将是非常受欢迎的）

Answer 1

看起来有几个问题。

您没有关闭表格行。在关闭</tr>块之前添加@foreach。
您正在使用ID作为选择器，并且ID处于循环中，因此它将在您的页面中使用相同的ID创建多个项目。

为什么会出现这个问题：

HTML规范指出ID在页面上必须是唯一的。既然如此，jQuery将只找到带有ID的第一个项目，然后甚至找不到任何其他东西，因此该事件将仅绑定到那个dom元素。如果事件仅绑定到一个元素，则只有在单击该元素时才会触发。

修复：

首先，将id更改为类。这将允许您将事件应用于该类的所有dom元素。

其次，将您的jQuery更改为：

$(".deleteReport").click(function () {
    dialogDiv.dialog("open");
 });

要删除行，您需要利用方法中的$(this)来选择父<tr>按钮，您可能应该添加一个类，以便更具体地选择它。 See an example of removing a table row using jquery on click here.

jQuery弹出窗口与Asp.Net MVC不能很好地协同工作

1 个答案: