确认 Bootstrap 模态发布

Question

我正在尝试接收 confirm 事件并将其转换为模态。原代码如下：

@page
@model AllCustomerModel
@{
    ViewData["Title"] = "AllCustomer";
}

<h2>All Customers</h2>

<p>
    <a asp-page="Customer">Create New Customer</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayName("Name")
            </th>
            <th>
                @Html.DisplayName("Address")
            </th>
            <th>
                @Html.DisplayName("Country")
            </th>
            <th>
                @Html.DisplayName("City")
            </th>
            <th>
                @Html.DisplayName("Phone")
            </th>
            <th>Edit | Delete</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.customerList)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Country)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.City)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Phone)
                </td>
                <td>
                    <a asp-page="./EditCustomer" asp-route-id="@item.CustomerID">Edit</a> |
                    <a asp-page="./AllCustomer" onclick="return confirm('Are you sure you want to delete this item?');" asp-page-handler="Delete" asp-route-id="@item.CustomerID">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

代码隐藏，

public ActionResult OnGetDelete(int? id)
        {
            if (id != null)
            {
                var data = _context.CustomerTB.Find(id);
                _context.Remove(data);
                _context.SaveChanges();
            }
            return RedirectToPage("AllCustomer");
        }

这是我 tried/currently 尝试的（为简洁起见，我没有粘贴 MVP）

<button type="button" class="btn btn-primary" data-toggle="modal" data-id="@item.CustomerID" data-target="#myModal">
    Delete
</button>



<div class="modal fade" id="myModal">
    <form id="myForm" method="post">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Customer</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this customer?
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Yes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                </div>
            </div>
        </div>
    </form>
</div>

代码隐藏，

[BindProperty]
public Customer Customer { get; set; }

public void OnPost()
{
    Customer customer = Customer;

    if (customer != null)
        _context.Remove(_context.CustomerTB.Find(customer.CustomerID));

        customerList = _context.CustomerTB.ToList();
}

它将命中 OnPost 方法，但客户对象为空。这是解决这个问题的正确方法吗？我还需要添加什么才能在后面的代码中获取对象？

Answer 1

你需要在点击按钮时通过javascript将选择的customerId传递给模态（带有隐藏类型），然后使用asp-for标签助手绑定页面中的Customer.CustomerId .

例如：

<button type="button" class="btn btn-primary myButton" data-toggle="modal" data-id="@item.CustomerID" data-target="#myModal">
Delete
</button>
<div class="modal fade" id="myModal">
<form id="myForm" method="post">
    <div class="modal-dialog">
        <div class="modal-content">
            //..
            <div class="modal-body">
                <input type="hidden" class="hiddenid" asp-for="Customer.CustomerID" />
                Are you sure you want to delete this customer?
            </div>
           //..
        </div>
    </div>
</form>
</div>
@section Scripts{ 
<script>
    $('.myButton').on('click', function (event) {
        var passedID = $(this).data('id');
        $(".modal-body .hiddenid").val(passedID);
    });             
</script>
}

确认 Bootstrap 模态发布

Confirmation Boostrap modal posting

asp.net-core

razor-pages