在 Js (JavaScript) 文件中的脚本中查找 Asp.net Web Forms 控件

Question

我在 Web 表单项目中有以下脚本：

function myScriptInAspxFile() {
         var obj = document.getElementById("<%= TextBox1.ClientID %>");
         if (obj) {                 
             obj.value = "My Text";                 
         }
     }

当我将脚本放入 Web 表单 aspx 文件中时，效果很好，但是当我将脚本更改为 Js (JavaScript) 文件时，该行：

var obj = document.getElementById("<%= TextBox1.ClientID %>");

该赋值返回 obj 变量的空值。如何从 Js (JavaScript) 文件中的脚本中找到控件？预先问候并感谢您。

Answer 1

当然，问题是您希望有一个硬编码的文本框名称，然后使用外部 .js 文件。外部文件无法获取也不享受服务器端表达式处理。

这里有两种方法：

对文本框使用 clientidMode="static"。

因此：

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

现在你的js代码变成了这样：

var obj = document.getElementById("TextBox1");

另一种方法？

将控件和 JavaScript 都放置在用户控件中。

那么，这样说：

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

<script>
    function mytest() {
        var tBox = document.getElementById('<%=TextBox1.ClientID%>')
        alert(tBox.value)
    }

</script>

现在，我们的标记变成这样：

        <asp:Button ID="Button1" runat="server" Text="Show text box value"
            OnClientClick="mytest();return false"
            />
             <br />

        <uc1:MyScriptControl runat="server" id="MyScriptControl" />

结果是这样的：

当然，您也可以在当前页面中放置一些小的 js 代码存根来调用/使用/享受外部 .js 代码库，但因此您必须在当前页面中使用较小的代码存根“传递”控制值。

那么，这样说：

   <script>

        function mytestlocal() {
            var obj = document.getElementById("<%= TextBox1.ClientID %>");
            mytest(obj)
        }
   </script>

因此在外部文件中我们有这个：

  function mytest(tBox) {
    alert(tBox.value)
}

因此，外部 .js 文件的“非常”概念意味着外部文件不能具有硬代码控制，也不能使用或具有 <%=%>（服务器端）表达式。