Core Razor Pages - не публиковать на форме, завернутой в модальный - PullRequest
Новая
       1

Core Razor Pages - не публиковать на форме, завернутой в модальный

1 голос
/ 29 марта 2019

Я пытаюсь отправить форму внутри модала из тега <a>. Я могу сделать это с помощью кнопки, но я бы хотел, чтобы все было равномерно, вместо того, чтобы смешивать <a> с <button> тегами.

Передняя часть: 

@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 class="btn btn-primary" asp-page="./EditCustomer" asp-route-id="@item.CustomerID">Edit</a> |
                    @*<a class="btn btn-primary myButton" 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>*@
                    @*  <a asp-page="./AllCustomer" OnClientClick="return ConfirmDelete(this)" asp-page-handler="Delete" asp-route-id="@item.CustomerID">Delete</a>*@
                    <a class="btn btn-primary myButton" data-toggle="modal" data-id="@item.CustomerID" data-target="#myModal">Delete</a>

                    @*<button type="button" class="btn btn-primary myButton" data-toggle="modal" data-id="@item.CustomerID" data-target="#myModal">
            Delete
        </button>*@
                </td>
            </tr>
        }
    </tbody>
</table>


<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">
                    <input type="hidden" class="hiddenid" />
                    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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('.myButton').on('click', function (e) {
        var passedID = $(this).data('id');
        console.log(passedID);
        $(".modal-body .hiddenid").val(passedID);
    });
</script>

Код позади: 

public class AllCustomerModel : PageModel
{
    DatabaseContext _context;
    public AllCustomerModel(DatabaseContext dbContext)
    {
        _context = dbContext;
    }

    public List<Customer> customerList { get; set; }

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

    public void OnGet()
    {
        customerList = _context.CustomerTB.ToList();
    }

    public void OnPost(int? id)
    {
        Customer customer = Customer;

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

        customerList = _context.CustomerTB.ToList();
    }
}

Я вижу Id в консоли после нажатия кнопки «Да», поэтому кажется, что что-то отсутствует при переходе? Что мне нужно добавить, чтобы Id-сообщение вернулось? На почте не указан ни идентификатор, ни идентификатор клиента.

Последнее замечание: если я использую приведенный ниже код вместо тега <a>, все будет работать так, как ожидается: 

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

1 Ответ

0 голосов
/ 01 апреля 2019

Самый простой способ - использовать Request.Form collection для доступа к строковому индексу. Так как вы установили значение для области ввода при нажатии на ссылку: 

$('.myButton').on('click', function (e) {
      var passedID = $(this).data('id');
      console.log(passedID);
      $(".modal-body .hiddenid").val(passedID);
}

Вы можете установить атрибут name для скрытого ввода: 

<input type="hidden" class="hiddenid" name="ID"  />

затем получите значение после отправки формы: 

var ID= Request.Form["ID"];
...