由于 Javascript 拦截，Razor Pages Post 处理程序机制未执行答案

【问题标题】：RazorPages Post handler mechanism not executed due to Javascript interception由于 Javascript 拦截，Razor Pages Post 处理程序机制未执行
【发布时间】：2018-12-15 11:47:18
【问题描述】：

我是 implementing an example，基于 EF Core 和 RazorPages 执行简单的 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();
}

到目前为止，它可以工作。我可以单击删除按钮，然后我看到成功重定向回页面。

现在我想使用 JavaScript 添加自定义确认功能。我可以在这种情况下使用 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 提交？

【问题讨论】：

在执行RedirectToPage 时，您在浏览器开发工具（F12 > 网络选项卡）中看到了什么？
我可以看到我犯了一个错误，它没有进入OnPostDeleteAsync 处理程序。网络选项卡在Products 上显示500 错误。没有我的data-confirm 机制 RazorPages 发布到Products?id=11&handler=delete （所以我的机制不包括查询字符串部分）。我猜 RazorPages 有一个自定义客户端机制，可以将 asp- 属性转换为请求。所以基本上我的问题没有改变......
您能否展示完整的视图以及当前表单与删除按钮的关系？
为了简洁起见，我实际上把它省略了，但我把它放回去了。
我没有正确查看生成的源代码。该按钮实际上包含一个formaction 属性，我可以使用它在提交之前更改表单操作。

标签： jquery confirm razor-pages

【解决方案1】：

我基本上必须考虑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();
            }
        });
    });        
});

【讨论】：