.NET Core如何将页面隐藏输入值传递至ViewComponent/Action方法

你当前拿不到值、多标签页串值的问题本质是几个认知偏差导致的：

• 隐藏域的值是存储在客户端页面DOM中的，不会自动随普通页面请求、ViewComponent渲染请求传递到服务端，不管是Request.Form还是Request.Query都不会自动填充这个值，除非你主动在请求里携带。
• TempData、Session的存储是浏览器会话级共享的，同浏览器新开标签页会复用同一份存储数据，从设计上就无法满足多标签页值隔离的需求。
• 你当前用@await Component.InvokeAsync是在服务端做页面同步渲染：执行顺序是先跑ViewComponent的业务逻辑，再把整个页面（包括你写的隐藏域input）拼成HTML返回给浏览器。渲染ViewComponent的时候页面上的隐藏域还没生成，自然不可能从Request或者DOM里读到对应的值。
• 非表单提交的场景下，Request.Form集合本身就是空的，写读Form的代码必然拿不到值。

根据你的渲染场景选对应实现即可，两种方案都天然支持多标签页值隔离，不会串数据。

方案1：保留同步渲染ViewComponent的写法（和你当前代码结构最匹配） #

不需要走隐藏域传值、不需要读QueryString，直接在服务端渲染时把标识值当参数传入即可：

1. 进入页面的Action中，为每个页面请求生成独立的TabGuid，直接绑定到页面Model，不要存入TempData/Session：

   public IActionResult PartPage()
   {
       var pageModel = new LNPartVM
       {
           // 每次请求页面生成独立Guid，多标签页打开时会生成不同值，天然隔离
           TabGuid = Guid.NewGuid().ToString("N")
       };
       return View(pageModel);
   }
   

2. 页面中隐藏域直接绑定Model值即可，去掉TempData相关的取值逻辑：

   <input id="txthguid" name="txthguid" type="hidden" value="@Model.TabGuid" />
   <input asp-for="TabGuid" type="hidden" />
   @* 调用ViewComponent时直接把Model中的TabGuid作为参数传入 *@
   @await Component.InvokeAsync("DataPage", new { 
       sessionID = Context.Session.Id, 
       txthguid = Model.TabGuid, 
       model = Model 
   })
   

3. 这时候你ViewComponent的InvokeAsync方法中，txthguid参数会直接拿到当前页面对应的独立Guid，不需要额外从Request、TempData中读取，也不会出现多标签页串值的问题。

方案2：如果是AJAX异步加载ViewComponent #

这种场景需要主动把当前页面的隐藏域值拼在请求参数中传递，服务端不会自动读取客户端DOM内容：

1. 页面加载完成后，通过JS读取当前页面内的隐藏域值，拼在请求地址的Query参数中：

   document.addEventListener('DOMContentLoaded', () => {
       // 读取当前标签页内的隐藏域值，不同标签页读的是各自页面的DOM，不会串
       const currentTabGuid = document.getElementById('txthguid').value;
       // 携带参数请求后端渲染接口
       fetch(`/YourController/LoadDataPage?txthguid=${currentTabGuid}`)
           .then(res => res.text())
           .then(html => {
               document.getElementById('dataPageWrap').innerHTML = html;
           })
   })
   

2. 后端增加对应的加载接口，接收Query参数后传入ViewComponent：

   public IActionResult LoadDataPage(string txthguid)
   {
       var model = new LNPartVM();
       return ViewComponent("DataPage", new
       {
           sessionID = HttpContext.Session.Id,
           txthguid = txthguid,
           model = model
       });
   }
   

3. 这种写法下，你在ViewComponent中既可以直接取txthguid参数值，也可以通过Request.Query["txthguid"]拿到对应值。

• 所有和单页面实例绑定的标识值，不要存在Session、TempData这类会话级共享存储中，否则必然出现多标签页串值问题。
• 服务端渲染阶段不存在DOM概念，不要试图在服务端渲染逻辑中读取页面上的input、隐藏域值，这些内容是服务端输出给客户端之后才生成的。
• 只有POST表单提交的场景，Request.Form集合才会填充表单内的参数值，普通GET请求、AJAX请求如果没传表单格式数据，读Form永远是空值。

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