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

单击“是”按钮后，我可以在控制台中看到ID，因此在转换过程中似乎缺少了什么？我需要添加什么才能发回ID？帖子上未设置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集合来访问基于字符串的索引。由于在单击链接时已将值设置为输入区域：

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

核心剃刀页面-ID未发布在以模式包装的表单上

1 个答案: