用于删除确认MVC的引导程序模态 [英] bootstrap modal for delete confirmation mvc

问题描述

我正在开发MVC 5 Web应用程序.在我的一个剃刀视图中，有一张桌子可以吐出几行数据，每行数据旁边都有一个Delete按钮.当用户单击删除按钮时，我要弹出Bootstrap Modal并要求用户确认删除.

I'm developing an MVC 5 web application. Within one of my Razor Views I have a table which spits outs several rows of data.Beside each row of data is a Delete button. When the user clicks the delete button I want to have the Bootstrap Modal popup and ask the user to confirm their deletion.

1. 在foreach循环前添加行

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> 

在控制台中，我得到=> 传递给getElementById()的空字符串.

in console i get => Empty string passed to getElementById().

推荐答案

警告，通过GET请求删除项目并不安全！
最后，我找到了一种使用引导模式对话框确认删除列表项的方法:

Warning, its not safe to delete items via GET request!
Finally I found a way to use bootstrap modal dialog to confirm delete list item:

<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

This is my modal 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部分

And the javascript part

<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();
}

这篇关于用于删除确认MVC的引导程序模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！