ASPX中jQuery设置HiddenField后后台无法获取值的问题

问题原因分析 #

1. jQuery选择器错误：带runat="server"的ASP.NET服务器控件，渲染后的客户端ID会自动添加容器前缀（比如MainContent_），直接用$(MainContent_HiddenField_TabID)是错误写法，正确ID选择器需加#前缀；或者控件未设置静态ID，导致前后端ID不匹配。
2. 控件在命名容器内：如果HiddenField放在ContentPlaceHolder这类命名容器中，直接用Page.FindControl无法定位控件，需从对应命名容器内查找。
3. 提交流程异常：若通过普通HTML按钮触发提交而非ASP.NET回发控件，表单可能未正确提交HiddenField的值。

具体解决方案 #

方案1：修正jQuery选择器，定位正确控件

有两种方式确保前端选中真实的服务器控件：

• 方式A：使用ASP.NET内置ClientID属性
  直接输出控件的客户端ID，避免硬编码前缀：

  $(document).ready(function () {
      $("#<%= HiddenField_TabID.ClientID %>").val("234w2");
  });
  

• 方式B：设置控件ClientIDMode="Static"
  修改ASPX中的HiddenField，让客户端ID与服务器端ID保持一致：

  <asp:HiddenField ID="HiddenField_TabID" runat="server" ClientIDMode="Static" />
  

  此时前端可直接用ID选择器：

  $(document).ready(function () {
      $("#HiddenField_TabID").val("234w2");
  });
  

方案2：后台正确查找控件

如果HiddenField位于ContentPlaceHolder（比如母版页的MainContent容器），需先获取命名容器再查找控件：

// 先获取母版页中的ContentPlaceHolder容器
ContentPlaceHolder mainContent = (ContentPlaceHolder)Page.Master.FindControl("MainContent");
// 从容器内查找HiddenField
HiddenField hdnCheck = (HiddenField)mainContent.FindControl("HiddenField_TabID");
if(hdnCheck != null)
{
    string HidV = hdnCheck.Value;
}

若控件不在命名容器内，直接用服务器端ID取值即可：

string HidV = HiddenField_TabID.Value;

方案3：确保提交流程正确

必须通过ASP.NET回发控件（比如<asp:Button>）触发回发；如果用普通HTML按钮，需手动添加回发触发代码：

<button onclick="__doPostBack('','');">提交</button>

测试验证代码 #

ASPX代码：

<asp:HiddenField ID="HiddenField_TabID" runat="server" ClientIDMode="Static" />
<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () { 
   $("#HiddenField_TabID").val("qwerq");
   console.log($("#HiddenField_TabID").val());
});
</script>

后台代码（file.aspx.cs）：

protected void btnSubmit_Click(object sender, EventArgs e)
{
    string value = HiddenField_TabID.Value;
    // 此时可正常获取到"qwerq"
}

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