.NET Core 6 Razor Page中form_Download表单无法提交求助

我正在.NET Core 6环境下开发Razor Page，遇到一个问题：id为form_Download的表单无法提交，但其他页面使用几乎相同的代码却能正常运行，想请教原因。

相关代码 #

General.cshtml #

@page "{order_id}"
@model MyNameSpace.Pages.OrderSheet.Approve.GeneralModel
...
<form id="form_update" method="post" /> @*用于其他POST请求*@
...
<form id="form_Download" method="post" asp-page-handler="DownloadAttachment">
    <input id="hdn_AttachId" name="attach_id" type="hidden" />
</form>
@section Scripts {
    <script src="~/lib/DevExtreme/dx.all.js"></script>
    <script type="text/javascript">

        const formUpdate = document.querySelector("#form_update");

        $(() => {

            //...

            $('#grid_Attachment').dxDataGrid({
                dataSource: attachmentStore,
                columns: [{
                    caption: 'No',
                    dataField: 'attach_id',
                }, {
                    caption: 'Type',
                    dataField: 'type',
                }, {
                    caption: 'Name',
                    dataField: 'file_name',
                    cellTemplate(cell, info) {
                        const { data: { attach_id, file_name, file_extension } } = info.row;
                        $('<div>')
                            .html(`<a href="#" class="dx-link dx-link-edit" onclick="DownloadAttachment(${attach_id})">${file_name}${file_extension}</a>`)
                            .appendTo(cell);
                    },
                }, {
                    caption: 'Remark',
                    dataField: 'remark',
                }],
                remoteOperations: false,
                showBorders: true,
            });
        });

        //...

        function DownloadAttachment(attach_id) {
            $("#hdn_AttachId").val(attach_id);
            $("#form_Download").submit();
        }
    </script>
}

General.cshtml.cs #

public class GeneralModel : PageModel
{
    //...

    public IActionResult OnPostDownloadAttachment(int order_id, int attach_id)
    {
        (byte[] bytes, string contentType, string filename) = _attachmentManager.DownloadFile(order_id, attach_id)!;
        return File(bytes, contentType, filename);
    }
}

可能的原因及解决方案 #

1. 缺少防伪验证令牌 #

Razor Pages默认启用防伪验证，POST请求必须携带防伪令牌，否则会被拦截。其他页面可能通过表单标签助手自动生成了令牌，但这个表单漏加了。

解决方法：在form_Download内添加防伪令牌：

<form id="form_Download" method="post" asp-page-handler="DownloadAttachment">
    @Html.AntiForgeryToken()
    <input id="hdn_AttachId" name="attach_id" type="hidden" />
</form>

2. 路由参数order_id缺失 #

页面路由定义为@page "{order_id}"，但表单没有传递order_id参数，后端处理方法OnPostDownloadAttachment需要这个参数，导致请求无法匹配到正确的处理逻辑。

解决方法：通过隐藏字段或路由属性传递order_id：

• 方法1：添加隐藏字段

<form id="form_Download" method="post" asp-page-handler="DownloadAttachment">
    @Html.AntiForgeryToken()
    <input type="hidden" name="order_id" value="@Context.Request.RouteValues["order_id"]" />
    <input id="hdn_AttachId" name="attach_id" type="hidden" />
</form>

• 方法2：使用asp-route属性

<form id="form_Download" method="post" asp-page-handler="DownloadAttachment" asp-route-order_id="@Context.Request.RouteValues["order_id"]">
    @Html.AntiForgeryToken()
    <input id="hdn_AttachId" name="attach_id" type="hidden" />
</form>

3. 链接默认行为干扰表单提交 #

<a href="#">的默认跳转行为会触发页面刷新，可能打断表单提交流程。

解决方法：在点击事件中阻止默认行为：

• 修改链接的onclick事件：

<a href="#" class="dx-link dx-link-edit" onclick="DownloadAttachment(${attach_id}); return false;">${file_name}${file_extension}</a>

• 或者在函数内处理：

function DownloadAttachment(attach_id, event) {
    event.preventDefault();
    $("#hdn_AttachId").val(attach_id);
    $("#form_Download").submit();
}

调用时传递事件对象：

onclick="DownloadAttachment(${attach_id}, event)"

4. 表单元素未被正确选中 #

检查页面是否有重复的form_Download id，或者DOM加载问题导致选择器无法找到表单。

调试方法：在DownloadAttachment函数内添加日志：

function DownloadAttachment(attach_id) {
    const form = $("#form_Download");
    console.log("找到的表单数量：", form.length);
    if (form.length === 0) {
        alert("未找到表单元素");
        return;
    }
    $("#hdn_AttachId").val(attach_id);
    form.submit();
}

内容的提问来源于stack exchange，提问作者Pawich S.