如何在独立JS文件中查找Asp.net Web Forms控件？

首先明确原因：独立JS文件不会被ASP.NET服务器解析，所以代码里的<%= TextBox1.ClientID %>不会被替换成控件实际的客户端ID，而是作为纯字符串传递给getElementById，自然找不到目标控件。下面是几种实用的解决办法：

• 方法一：调用JS函数时传入控件ClientID
  在aspx页面里调用独立JS的函数时，直接把服务器控件的ClientID传过去：

  <%-- 在aspx页面的脚本中调用独立JS函数 --%>
  <script>
      myScriptInJsFile('<%= TextBox1.ClientID %>');
  </script>
  

  独立JS文件里修改函数接收参数：

  function myScriptInJsFile(clientId) {
      var obj = document.getElementById(clientId);
      if (obj) {                 
          obj.value = "My Text";                 
      }
  }
  

• 方法二：在aspx页面定义全局变量存ClientID
  在aspx页面的头部脚本里定义全局变量，把控件ClientID赋值进去，独立JS直接用这个变量：

  <%-- 在aspx页面定义全局变量 --%>
  <script>
      var textBox1ClientId = '<%= TextBox1.ClientID %>';
  </script>
  <%-- 引入独立JS文件 --%>
  <script src="your-script.js"></script>
  

  独立JS文件中的代码：

  function myScriptInJsFile() {
      var obj = document.getElementById(textBox1ClientId);
      if (obj) {                 
          obj.value = "My Text";                 
      }
  }
  

• 方法三：设置控件ClientIDMode为Static
  如果页面里不会出现重复ID的控件（比如不在Repeater、GridView这类循环控件里），可以直接给控件设置ClientIDMode="Static"，这样客户端ID就和服务器端ID完全一致：

  <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"></asp:TextBox>
  

  独立JS文件里直接用服务器端ID查找：

  function myScriptInJsFile() {
      var obj = document.getElementById("TextBox1");
      if (obj) {                 
          obj.value = "My Text";                 
      }
  }
  

  注意：如果控件在循环容器里，这种方法会导致ID冲突，别用。

• 方法四：用HTML5 data属性传递控件ID
  在aspx页面的容器元素（比如body）上设置data属性存储控件ID：

  <body data-textbox1-id="<%= TextBox1.ClientID %>">
      <!-- 页面内容 -->
  </body>
  

  独立JS文件里读取这个data属性：

  function myScriptInJsFile() {
      var textBoxId = document.body.getAttribute("data-textbox1-id");
      var obj = document.getElementById(textBoxId);
      if (obj) {                 
          obj.value = "My Text";                 
      }
  }
  

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