如何在TypeScript文件中获取ASP.NET HiddenField的值？

问题原因 #

你原来的TS代码无法运行，核心问题有两个：

• TypeScript文件是静态资源，ASP.NET服务器不会解析其中的<%= %>服务器端标签，所以<%= hdnGOfromLocalStorage.ClientID %>不会被替换成实际的客户端ID，导致找不到目标控件。
• document.getElementById返回的是HTMLElement|null类型，不能直接赋值给string类型变量，需要获取控件的value属性。

解决方案 #

提供两种可行的实现方式：

方式1：在ASPX页面定义全局变量传递ClientID

在ASPX页面的<script>标签中，先将服务器控件的客户端ID输出为全局变量，再在TypeScript中引用：

<!-- ASPX页面中添加 -->
<script>
    // 输出控件的客户端ID到全局变量
    window.hdnGOfromLocalStorageId = '<%= hdnGOfromLocalStorage.ClientID %>';
</script>

TypeScript中获取值：

// 获取控件元素，断言为HTMLInputElement（HiddenField渲染后是input[type=hidden]）
const hiddenField = document.getElementById(window.hdnGOfromLocalStorageId) as HTMLInputElement;
// 安全获取值，默认回退到初始值"-1"
const xxx: string = hiddenField?.value || '-1';

方式2：设置ClientIDMode为Static（推荐）

直接修改ASPX页面的HiddenField控件，设置ClientIDMode="Static"，这样客户端ID会和服务器端ID完全一致，无需动态获取：

<asp:HiddenField ID="hdnGOfromLocalStorage" runat="server" Value="-1" ClientIDMode="Static" />

TypeScript中直接通过固定ID获取值：

const hiddenField = document.getElementById('hdnGOfromLocalStorage') as HTMLInputElement;
const xxx: string = hiddenField?.value || '-1';

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