我正在尝试从<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">×</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>
最简单的方法是使用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"];