Подтверждение Boostrap модальной публикации - PullRequest
Новая
       8

Подтверждение Boostrap модальной публикации

2 голосов
/ 25 марта 2019

Я пытаюсь взять событие 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");
        }

Вот то, что я пробовал / сейчас пытаюсь (ради краткости, я не вставил 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>

Code Behind, 

[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, но объект customer пуст.Это правильный способ решения этой проблемы?Что еще мне нужно добавить, чтобы подобрать объект из кода позади?

1 Ответ

0 голосов
/ 26 марта 2019

Вам нужно передать выбранный customerId модальному (со скрытым типом) с помощью javascript при нажатии кнопки, а затем связать страницу Customer.CustomerId с помощью asp-for помощника по тегам.

Например:

<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>
}
...