由于 Javascript 拦截，Razor Pages Post 句柄机制未执行

Question

我 implementing an example 基于 EF Core 和 RazorPages 执行简单的 CRUD。

现在特别是第 2 页（Index.cshtml）代表 "List" 视图。每行包含一个要删除的 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();
}

到此为止它是有效的。我可以单击删除按钮，然后看到成功重定向回页面。

现在我想使用 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...我应该如何提交表单 "manually" 以符合 RazorPages 提交？

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

由于 Javascript 拦截，Razor Pages Post 句柄机制未执行

RazorPages Post handler mechanism not executed due to Javascript interception

jquery

confirm

razor-pages