删除确认的Bootstrap模态框（Modal）在MVC中的应用

Question

我正在开发一个MVC 5的Web应用程序。在我的Razor视图中，有一个表格，其中包含几行数据。每行数据旁边都有一个删除按钮。当用户单击删除按钮时，我想让Bootstrap Modal弹出并询问用户确认是否要删除。

1. add line before foreach loop

   @Html.Hidden("item-to-delete", "", new {@id = "item-to-delete"})
   @foreach (var item in Model)
   {
       <td>
           <button type="" class="btn btn-sm blue deleteLead" 
               data-target="#basic" data-toggle="modal" 
               data-id="@item.bookid">delete</button>
       </td>
   }
   

2.我的模态框

<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">book Delete Confirmation</h4>
            </div>
            <div class="modal-body">
                Are you Sure!!! You want to delete this Ad?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn blue" id="btnContinueDelete">Continue</button>
                <button type="button" class="btn default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

脚本

<script>
    $(".deletebook").click(function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        $('#item-to-delete').val(id);
    });
    $('#btnContinueDelete').click(function() {
        var id = $('#item-to-delete').val();
        $.post(@Url.Action("Deletebook", "book"), { id: id }, function(data) {
            alert("data deleted");
        });
    });
</script> 

在控制台中，我收到了 => Empty string passed to getElementById() 的消息。

- vebs

---

从要删除的项目中获取ID，返回null。 - Vasil Valchev

我知道我来晚了，但代码部分2中的选择器是名为“deleteLead”的类，脚本正在寻找$(".deletebook").click(...)。 - I Bowyer

Answer 1

警告，不建议通过GET请求删除项目！
最终，我找到了一种使用Bootstrap模态框来确认删除列表项的方法：

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                <a id="deleteItem" class="deleteItem" data-target="#basic" 
                    data-toggle="modal" 
                    data-path="@Url.Action("Delete", "MyController", new { id = @item.id })">Delete</a>
            </td>
            <td>@Html.DisplayFor(modelItem => item.name)</td>
        </tr>
    }
</tbody>

这是我的模态窗口 HTML。

<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Delete Confirmation</h4>
        </div>
        <div class="modal-body">
            Are you sure you want to delete this item?
        </div>
        <div class="modal-footer">
            <button data-dismiss="modal" type="button" class="btn btn-default">Cancel</button>
            <button id="btnContinueDelete" type="button" class="btn btn-primary">Delete</button>
        </div>
    </div>
</div>

并且JavaScript部分

<script>
    var path_to_delete;

    $(".deleteItem").click(function(e) {
        path_to_delete = $(this).data('path');
    });

    $('#btnContinueDelete').click(function () {
        window.location = path_to_delete;
    });
</script>

这里是控制器操作

// GET: MyController/Delete
[HttpGet]
public ActionResult Delete(int id)
{
    var model = Context.my_models.Where(x => x.id == id).FirstOrDefault();
    if (model != null)
    {
        Context.my_models.DeleteOnSubmit(model);
        Context.SubmitChanges();

        return RedirectToAction("List");
    }

    return new HttpNotFoundResult();
}

- Vasil Valchev

---

模态框运行良好，但我发现解决方案存在一个问题，即使用http Get删除项目可能存在潜在危险。http Get仅用于获取数据而没有任何副作用。将控制器操作方法更改为http Post将解决该问题。 - Rasika

这是你需要的，伙计 :) - Vasil Valchev

Answer 2

我对此有不同的看法。并不是之前的方法不好，而是我认为这种方法更好，而且非常简单。"最初的回答"

<script>
    var path_to_delete;
    var root = location.protocol + "//" + location.host;

    $("#deleteItem").click(function (e) {
        path_to_delete = $(this).data('path');
        $('#myform').attr('action', root + path_to_delete);
    });
</script>

<table class="table table-hover" id="list">
    <thead class="bg-dark text-white">
        <tr>

            <th>
                Edit
            </th>
            <th>
                Employee
            </th>
            <th>
                Effective Date
            </th>
            <th>
                ST/OT/DT
            </th>
            <th>
                Other Pay
            </th>
            <th>
                Job
            </th>
            <th>
                Pending?
            </th>
            <th>
                Delete
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <a class="btn btn-sm" href="~/Employees/TerminationEdit/@item.Employee_Termination_Info_Id">
                        <i class="fa fa-lg fa-pencil-alt text-dark"></i>
                    </a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Employee_Name_Number)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Effective_Date)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Employee_Time)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Employee_Other_Pay)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Job_Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Pending)
                </td>
                <td>
                    <a id="deleteItem" class="btn btn-sm" data-toggle="modal" data-target="#deleteModal"
                       data-path="/Employees/TerminationDelete/@item.Employee_Termination_Info_Id">
                        <i class="fa fa-lg fa-trash-alt text-danger"></i>
                    </a>
                </td>
            </tr>
        }
    </tbody>
</table>


<!-- Logout Modal-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Are you sure you want to delete this termination record? <br /><span class="text-danger">This cannot be undone.</span></div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                @using (Html.BeginForm("TerminationDelete", "Employees", FormMethod.Post, new { id = "myform", @class = "" }))
                {
                    @Html.AntiForgeryToken()
           
                    <input type="submit" value="Delete" id="submitButton" class="btn btn-danger" />
                }
            </div>
        </div>
    </div>
</div>

这里发生的情况是页面将循环遍历模型并绘制删除按钮（使用字体图标）。请注意，它在此处设置了数据路径属性以供以后使用。当单击按钮时，它会立即设置模态弹出窗口上按钮的表单操作。这很重要，因为它具有围绕删除按钮的表单，它将将其发送到POST而不是GET，正如Rasika和Vasil Valchev所指出的那样。此外，它还具有防伪令牌的好处。"最初的回答"

- Geo Shmeo

---

我没有仔细查看代码，但这似乎是一个高质量的首篇。欢迎来到SO！ - m02ph3u5

Answer 3

问题出在这一行：

$.post(@Url.Action("Deletebook", "book"), { id: id }, function(data) {
    alert("data deleted");
});

@Url.Action() 代码片段编译成以下内容：

$.post(/book/Deletebook, { id: id }, function(data) {
    alert("data deleted");
});

你需要将@Url.Action用单引号括起来，否则浏览器无法解释/book/Deletebook参数。

- alex

---

问题出在id参数上，它是空的。 - Vasil Valchev