ASP中动态显示自定义用户控件时如何强制加载其JavaScript？

原因说明 #

ASP.NET中设置Visible=false的控件，服务器端不会将其HTML及内嵌JS渲染到客户端。后续通过服务器端代码将Visible设为true时，仅会渲染控件的DOM结构，但原本内嵌在用户控件中的JS并未被输出到页面，导致无法执行。

可行解决方案 #

• 分离JS代码，提前加载
  将用户控件中的JS代码提取到独立的.js文件中，或者在页面初始化时通过ScriptManager注册到页面。确保页面加载完成后JS已存在，后续用户控件显示时，直接调用对应的JS方法即可。
  示例代码（后台注册JS文件）：

  protected void Page_Load(object sender, EventArgs e)
  {
      if (!IsPostBack)
      {
          ScriptManager.RegisterClientScriptInclude(this, typeof(Page), "UC_Script", ResolveUrl("~/Scripts/UC_Script.js"));
      }
  }
  

• 动态注册JS到页面
  在用户控件的后台代码中，监听控件的可见性变化，当控件变为可见时，通过ScriptManager将需要执行的JS代码动态注册到页面。
  示例代码：

  protected void Page_PreRender(object sender, EventArgs e)
  {
      if (this.Visible)
      {
          string ucScript = @"
              console.log('test');
              // 这里写入用户控件的其他JS逻辑或初始化方法
          ";
          // 使用唯一的Key避免重复注册
          ScriptManager.RegisterStartupScript(this, this.GetType(), $"UC_Init_{this.ClientID}", ucScript, true);
      }
  }
  

• 改用CSS隐藏替代Visible属性
  不使用ASP.NET的Visible=false，而是通过CSS的display:none来隐藏Panel。这样Panel和用户控件的DOM结构及内嵌JS会在页面加载时就渲染到客户端，仅通过CSS控制显示状态。当需要显示时，通过JS修改CSS属性即可：

  <asp:Panel ID="Panel1" runat="server" Style="display:none;">
      <!-- 自定义用户控件 -->
  </asp:Panel>
  

  显示时的JS代码：

  document.getElementById('<%= Panel1.ClientID %>').style.display = 'block';
  

• 手动触发JS初始化方法
  在用户控件的JS代码中封装一个初始化函数，当服务器端将Panel设为可见后，注册调用该初始化函数的脚本，确保控件显示时JS逻辑执行。
  用户控件中的JS：

  function initMyUC() {
      console.log('test');
      // 其他初始化逻辑，比如绑定事件、渲染内容等
  }
  

  后台注册调用脚本：

  // 当设置Panel.Visible=true后执行
  ScriptManager.RegisterStartupScript(this, this.GetType(), "InitMyUC", "initMyUC();", true);
  

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