JS获取代码后置添加的HTML元素属性值报错如何解决？

在ASP.NET用户控件开发中，通过VB.NET代码后置方式，在重写的OnInit生命周期方法内，为id为rowMenu的服务端div标签添加名为isadmin的自定义属性，属性值取自路由数据中的UserAdmn参数，后台实现代码如下：

Partial Class Controls_View_ViewOrder
Inherits System.Web.UI.UserControl
Protected Overrides Sub OnInit(e As EventArgs)
    Dim isAdmin = Page.RouteData.Values("UserAdmn")
    rowMenu.Attributes.Add("isadmin", isAdmin)
End Sub
End Class

前端对应标签及JavaScript取值代码如下：

<div class="rowMenu" id="rowMenu" runat="server"> </div>
<!-- 省略其他业务代码 -->
<script>
let isAdmin = document.getElementById("rowMenu").getAttribute("isadmin");
</script>

代码执行时抛出空引用错误，无法正常获取目标属性值。

ASP.NET WebForm的服务端控件默认会根据所在命名容器（用户控件、母版页内容区、列表控件项等）自动拼接生成客户端ID，最终渲染到页面的DOM元素ID不会是你写的原始rowMenu，而是类似ctl00_Content1_rowMenu的拼接格式。此时直接用写死的rowMenu作为ID调用getElementById会返回null，后续读取属性自然会抛出空引用错误。
另外存在一个隐性问题：如果路由参数UserAdmn取值为null（VB中为Nothing），后台添加的自定义属性不会被渲染到最终输出的HTML标签上，即便找对DOM元素也无法读取到属性值。

可任选以下一种方案修复：

• 方案1：JS中通过服务端表达式获取控件真实渲染的客户端ID
  直接修改JS取值代码，注意该段JS必须写在ascx/aspx页面内部，不能放在外部独立JS文件中，否则服务端表达式无法被解析：

  let isAdmin = document.getElementById("<%= rowMenu.ClientID %>").getAttribute("isadmin");
  

• 方案2：设置控件客户端ID模式为静态，强制渲染ID与编写的ID一致
  修改服务端div标签，添加ClientIDMode="Static"属性：

  <div class="rowMenu" id="rowMenu" runat="server" ClientIDMode="Static"> </div>
  

  修改后原生的getElementById("rowMenu")即可正常定位元素。注意同一页面存在多个同名控件时不要使用该模式，会引发ID重复冲突。
• 补充优化：后台添加空值兜底逻辑，避免参数为空时属性不渲染
  修改后台属性赋值代码，给空值场景设置默认值，保证自定义属性一定会被渲染到DOM上：

  Dim isAdmin = If(Page.RouteData.Values("UserAdmn")?.ToString(), "false")
  rowMenu.Attributes.Add("isadmin", isAdmin)
  

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