核心 Razor 页面 - 我没有在包裹在模态中的表单上发布

Question

我正在尝试通过 <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();
    }
}

单击 "Yes" 按钮后，我可以在控制台中看到 ID，所以似乎在转换过程中缺少某些东西？我需要添加什么才能恢复 Id post？ post.

上未设置 ID 或客户 ID

最后一点，如果我使用下面的代码而不是 <a> 标签，那么一切都会按预期工作：

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

Answer 1

最简单的方法是使用 Request.Form 集合来访问基于字符串的索引。因为在单击 link 时您已经为输入区域设置了值：

$('.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"];

核心 Razor 页面 - 我没有在包裹在模态中的表单上发布

Core Razor Pages - Id not posting on form wrapped in modal

asp.net-core

razor-pages