如何将View中h1动态文本连同隐藏参数传递给ASP.NET控制器

这个需求完全可以实现，先明确核心实现逻辑：@Url.Action是服务端渲染阶段执行的方法，只能拿到页面首次加载时的固定值，无法获取后续JS动态修改的h1实时文本，动态值必须通过前端JS在点击时采集。

⚠️ 安全提醒：所有直接输出到前端HTML代码里的内容，不管是拼在链接href里还是放在隐藏标签中，用户都可以通过浏览器开发者工具查看、修改，不存在前端层面“完全对用户不可见”的参数。如果是高敏感参数（比如权限标识、不可篡改的业务值），不要把明文传到前端，需要用服务端临时缓存+一次性令牌的方案传递，后文会具体说明。

推荐实现方式（POST表单提交，参数不显示在地址栏） #

这种方式参数放在请求体中，不会直接暴露在浏览器地址栏，适合不想让参数直接出现在URL里的场景。

1. 视图代码调整 #

<h1 class="sidebar-item custom-heading" id="heading-info" href="#">*Dynamically Changing Header*</h1>
<a class="sidebar-item" id="triggerLink" href="javascript:void(0)" onclick="javascriptFunction()">Link</a>

<!-- 隐藏表单，用于提交参数 -->
<form id="dataForm" asp-action="Action" asp-controller="Controller" method="post" style="display: none;">
    <!-- 动态h1文本将通过JS写入该字段 -->
    <input type="hidden" name="name" id="nameInput" />
    <!-- 服务端渲染时写入固定参数 -->
    <input type="hidden" name="importantPieceOfData1" value="@ViewBag.Piece1" />
    <input type="hidden" name="importantPieceOfData2" value="@ViewBag.Piece2" />
    <input type="hidden" name="importantPieceOfData3" value="@ViewBag.Piece3" />
</form>

<script>
document.getElementById('triggerLink').addEventListener('click', function() {
    // 点击时实时获取h1的最新文本
    const currentHeadingText = document.getElementById('heading-info').innerText.trim();
    // 将动态值写入隐藏字段
    document.getElementById('nameInput').value = currentHeadingText;
    // 提交表单到控制器
    document.getElementById('dataForm').submit();
});
</script>

2. 控制器代码调整 #

给Action加上POST请求标记，参数绑定和原来保持一致即可：

[HttpPost]
public IActionResult Action(string name, string importantPieceOfData1, string importantPieceOfData2, string importantPieceOfData3) 
{ 
    // 在此处对传入的name做合法性校验
    // 执行业务逻辑
    return RedirectToAction("YourTargetView"); // 按实际需求返回结果
}

高敏感参数的安全传递方案 #

如果importantPieceOfData系列参数属于高敏感内容，不允许用户看到明文、篡改，不要把值直接写到HTML里，按以下方式处理：

• 页面渲染阶段，服务端把三个敏感参数存入临时缓存（比如TempData、分布式缓存），设置短有效期，生成一个随机无意义的GUID作为关联key
• 把这个GUID写到表单的隐藏域里，前端只能拿到这个随机字符串
• 接收到请求时，服务端根据传入的GUID从缓存中取出对应的真实敏感参数使用
  这种方式用户无法接触到参数明文，也无法篡改参数值。

可选GET实现方式（参数显示在地址栏） #

如果不需要隐藏URL参数，也可以直接通过JS动态拼接链接地址实现，代码更简单：

<h1 class="sidebar-item custom-heading" id="heading-info" href="#">*Dynamically Changing Header*</h1>
<a class="sidebar-item" id="triggerLink" href="javascript:void(0)" onclick="javascriptFunction()">Link</a>

<script>
document.getElementById('triggerLink').addEventListener('click', function() {
    const currentHeadingText = encodeURIComponent(document.getElementById('heading-info').innerText.trim());
    // 服务端渲染生成带固定参数的基础路径
    const baseUrl = '@Url.Action("Action", "Controller", new { importantPieceOfData1 = ViewBag.Piece1, importantPieceOfData2 = ViewBag.Piece2, importantPieceOfData3 = ViewBag.Piece3 })';
    // 拼接动态name参数后跳转
    window.location.href = `${baseUrl}&name=${currentHeadingText}`;
});
</script>

这种方式不需要调整控制器的请求标记，缺点是所有参数都会明文显示在浏览器地址栏，仅适合非敏感场景。

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