代码之家 › 专栏 › 技术社区 › Ropstah

由于javascript拦截,Razorpage后处理程序机制未执行

razor-pages confirm jquery

0

Ropstah · 技术社区 · 7 年前

我是 implementing an example 基于 EF Core 和 RazorPages 用于执行简单的积垢。

现在特别是第2页( index.cshtml(索引.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 ……我应该如何“手动”提交表格以符合Razorpage提交的要求?

1 回复 | 直到 7 年前

1

0

Ropstah 7 年前

formaction button

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