如何在无表单的Razor视图中通过POST提交复杂对象至Controller并跳转

完全符合你的需求！我们可以通过JavaScript动态创建临时表单来完成POST提交，不需要提前在页面写任何表单，也不用给每行列表项单独创建表单。核心思路是：点击商品项时，生成一个包含所有参数的隐藏表单，用POST方式提交到目标Action，Action处理后返回详情视图，浏览器就会自动跳转到详情页。

步骤1：调整Controller代码 #

首先确保你的Action标记为[HttpPost]，并且参数直接绑定到DetailedViewModel（ASP.NET MVC会自动帮你完成复杂对象的绑定，包括数组）：

[HttpPost]
public async Task<ActionResult> ReportDetailed(DetailedViewModel detailedViewModel)
{
    // 这里写你的业务逻辑，比如根据参数获取商品详情
    // ...

    // 返回详情视图，把需要的数据传给视图
    return View(detailedViewModel);
}

注意：不需要保留原来的Route特性，因为POST提交不会用路由参数传递复杂对象，而是用表单数据绑定。

步骤2：编写POST提交的JavaScript函数 #

替换你原来的openDetailsPage函数，用动态表单来实现POST提交。这里用jQuery简化DOM操作，你也可以用原生JS实现：

function openDetailsPage(commodityID, commodityName) {
    // 1. 处理日期参数（保留你原来的逻辑）
    let dateFrom = convertNumbers2English('@(((FilterViewModel)ViewBag.ViewModel).dateValue_1)');
    let dateTo = convertNumbers2English('@(((FilterViewModel)ViewBag.ViewModel).dateValue_2)');
    dateFrom = changeDateSeparator(dateFrom);
    dateTo = changeDateSeparator(dateTo);
    dateFrom = dateFrom || "0";
    dateTo = dateTo || "0";

    // 2. 获取ViewBag中的其他参数
    const commodityType = '@(((FilterViewModel)ViewBag.ViewModel).commodityType)';
    const department = '@(((FilterViewModel)ViewBag.ViewModel).department)';
    const repository = '@(((FilterViewModel)ViewBag.ViewModel).repository)';
    const purchaseReportTypes = @Html.Raw(Json.Serialize(((FilterViewModel)ViewBag.ViewModel).purchaseReportTypes)); // 直接序列化数组

    // 3. 动态创建临时表单
    const $form = $('<form>', {
        method: 'POST',
        action: '@Url.Action("ReportDetailed", "BuyReport")' // 目标Action路径
    });

    // 4. 添加所有参数为隐藏字段
    // 单个参数
    $form.append($('<input>', { type: 'hidden', name: 'commodityType', value: commodityType }));
    $form.append($('<input>', { type: 'hidden', name: 'commodityName', value: commodityName }));
    $form.append($('<input>', { type: 'hidden', name: 'department', value: department }));
    $form.append($('<input>', { type: 'hidden', name: 'repository', value: repository }));
    $form.append($('<input>', { type: 'hidden', name: 'commodity', value: commodityID }));
    $form.append($('<input>', { type: 'hidden', name: 'dateValue_1', value: dateFrom }));
    $form.append($('<input>', { type: 'hidden', name: 'dateValue_2', value: dateTo }));

    // 数组参数：为每个元素创建一个隐藏字段，name对应ViewModel中的数组属性名
    if (purchaseReportTypes && purchaseReportTypes.length > 0) {
        purchaseReportTypes.forEach(type => {
            $form.append($('<input>', { type: 'hidden', name: 'purchaseReportTypes', value: type }));
        });
    }

    // 5. 将表单添加到页面并提交
    $('body').append($form);
    $form.submit();

    // 6. 提交后移除表单（可选，避免DOM冗余）
    setTimeout(() => $form.remove(), 100);
}

关键细节说明： #

• 数组绑定：ASP.NET MVC会自动识别多个同名的purchaseReportTypes参数，并绑定到ViewModel的purchaseReportTypes数组中。
• 特殊字符处理：POST提交的参数放在请求体里，不会像GET那样暴露在URL中，完全不用担心/等特殊字符破坏路由的问题。
• ViewBag数组序列化：用@Html.Raw(Json.Serialize(...))把ViewBag中的数组直接转成JS数组，避免手动拼接字符串的麻烦。

步骤3：保持列表项的点击调用不变 #

你的列表项HTML代码不需要做大改动，依然保留原来的onclick调用即可：

<a onclick="openDetailsPage(@item.CommodityId,'@Html.DisplayFor(modelItem => item.CommodityName)')">
    <div class="ios-content-box px-4 py-1 mb-3 ios-hover-box">
        <!-- 这里是你的商品信息内容，和原来一样 -->
    </div>
</a>

额外注意事项 #

• 如果不想用jQuery，也可以用原生JS实现表单创建，逻辑完全一致，只是DOM操作代码稍显繁琐。
• 如果你的ViewModel中有更多复杂属性，只需要继续添加对应的隐藏字段即可，ASP.NET MVC的模型绑定会自动处理。
• 提交后，Controller返回的View会让浏览器直接跳转到详情页面，完全符合你的需求。

内容的提问来源于stack exchange，提问作者VSB