由于RazorPages截获，未执行Javascript后处理程序机制
由于RazorPages截获，未执行Javascript后处理程序机制
提问于 2018-07-07 05:11:04
我是基于EF Core和RazorPages的implementing an example，用于执行简单的CRUD。
现在特别是表示“列表”视图的第二页(Index.cshtml)。每行包含一个要删除的button元素。
来自Products.cshtml的代码片段
<form method="POST">
@foreach(var product in Model.Products) {
<button type="submit" asp-page-handler="delete" asp-route-id="@product.Id">delete</button>
<!-- the one below doesn't work with my custom Javascript -->
<!-- <button data-confirm type="submit" asp-page-handler="delete" asp-route-id="@product.Id">delete</button> -->
}
</form>来自Products.cshtml.cs的代码片段
public async Task<IActionResult> OnPostDeleteAsync(int id)
{
var product = await _db.Products.FindAsync(id);
if (product != null)
{
//_db.Products.Remove(product);
//await _db.SaveChangesAsync();
}
return RedirectToPage();
}到目前为止，它是有效的。我可以点击delete按钮，我会看到一个成功的重定向回页面。
现在，我想使用Javscript添加一个自定义确认功能。我可以在这个上下文中使用jQuery，所以我基本上拦截了所有的data-confirm属性按钮，并阻止了默认操作，所以只有在用户确认的情况下才能提交。
$('button[data-confirm]').each(function() {
var currentElement = this;
var currentForm = currentElement.form;
$(currentElement).click(function (e) {
e.preventDefault();
var confirmValue = $(currentElement).attr('data-confirm');
var confirmText = confirmValue ? confirmValue : 'Are you sure?';
bootbox.confirm(confirmText, function (result) {
if (result) {
currentForm.submit();
}
});
});
});在我的新功能中，RazorPage机制不会调用OnPostDeleteAsync...我应该如何“手动”提交表单以符合RazorPages提交的要求？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-07 06:34:20
基本上，我必须说明在button元素上生成的formaction属性。将此值设置为表单操作可使其正常工作。
$('button[data-confirm]').each(function() {
var currentElement = this;
var currentForm = currentElement.form;
$(currentElement).click(function (e) {
e.preventDefault();
var confirmValue = $(currentElement).attr('data-confirm');
var confirmText = confirmValue ? confirmValue : 'Are you sure?';
var formAction = $(currentElement).attr('formaction'); //ADDED THIS LINE
bootbox.confirm(confirmText, function (result) {
if (result) {
currentForm.action = formAction; //ADDED THIS LINE
currentForm.submit();
}
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51217653
复制相关文章
相似问题