如何在外部 JavaScript 中从 ServerControl 访问 ClientID

Posted 2023-02-22

【中文标题】如何在外部 JavaScript 中从 ServerControl 访问 ClientID

【英文标题】：How to access the ClientID from a ServerControl in an external JavaScript

【发布时间】：2011-12-14 04:10:38

【问题描述】：

目前，如果我在我的 SharePoint 项目中使用 javascript，我会将代码添加到 *.ascx 文件的 <script type="text/javascript"></script> 块中，并为每个元素创建一个用于 ClientID 的变量。

例如：

var test = '<%= TextBox1.ClientID %>';

现在我想在我的项目中添加一个外部 JavaScript 并在其中插入代码。 但是我怎样才能访问ClientID？在外部 JavaScript 中我不能使用<%= TextBox1.ClientID %>。我发现了这个：referencing server controls in external file 但我不明白，这应该如何工作。如果有人能解释我如何访问这些 ID，那就太棒了。

顺便问一下，为什么会这样：

<script type="text/javascript">
    var ClientIDs = 
        test1   : '<%= TextBox1.ClientID %>',
        test2   : '<%= TextBox2.ClientID %>'
        

    function SetButtonStatus()     
            alert($(ClientIDs.test1).value);
        
</script>

不起作用，不会显示任何消息？

问候

编辑 1：

好的，我可以在我的外部脚本中使用 textBox1 吗？ 我是这样做的，这是在我的 *.ascx 文件中：

<script type="text/javascript">
    var ClientIDs = 
        textBox1:    '<%= textBox1.ClientID %>',
        textBox2:    '<%= textBox2.ClientID %>'
    
</script>

在我的外部脚本中，我只有一个函数来测试它：

function test () 
alert($(ClientIDs.textBox1).val();

我还用"#" + 对其进行了测试。每次执行 test() 时，都会出现以下错误：

"document.getElementById(...)" is null or not an object

编辑 2： 我错过了警报中的)。但现在我收到一条消息，指出该变量未定义。 如果我使用：$('#' + ClientIDs.SumbitSearch).val() 我只得到文本而不是我的控件的 ID。

编辑 3： 目前我使用：

<script type="text/javascript">
    var ClientIDs = 
        test1 :    '<%= TextBox1.ClientID %>',
        test2 :    '<%= TextBox2.ClientID %>'
    

    function test() 
       alert($('#' + ClientIDs.test1).attr("id")));
    
</script>

在我的 *.ascx 文件中，它可以工作。我不喜欢这种方式......它在外部 JS 中不起作用，引用不起作用。如果有人有其他想法，可以与 .net 3.5 一起使用，如果他让我知道，那就太好了。

【问题讨论】：

我会避免在您的 ASCX 文件中定义 JS 变量：一个页面可能包含多个控件（或同一控件的多个实例）。如果每个控件都定义了“var ClientIDs”，它们就会相互冲突（该死的 JS 全局命名空间！）。如果您只允许 .ASPX 文件定义 JS var，那么至少您知道每页只有一个。

其实我是手动定义 JS var。我找到了一个小工具，它可以自动创建ClientIDs link。但我无法从我的外部 JS 访问该变量。问候。

我不确定您的意思是“手动定义 JS var”，以及如果同一个控件定义了同一个 var 但被多次包含在页面中，它如何防止冲突。跨度>

...同一个控件定义同一个变量...对不起，我不明白，有什么问题？你的意思是，如果一个wepart被多次添加，控件使用相同的id？我测试了它。如果我在一个网站上多次使用同一个webpart，每个控件的控件id是不同的。 Webpart 1：TextBox1 ID：..._yyyyyy_ctl00_TextBox1ID Webpart 2：TextBox1 ID：..._xxxxxx_ctl00_TextBox1ID 或者你的意思是JS var，在这种情况下ClientIDs 存在不止一次？如果 ClientID 是私有的并且完整的 JS 代码在 ascx 文件中，它在乎什么。还是我理解有误？

如果您在 ASCX 文件中编写 javascript“var ClientIDs”，然后在页面上包含该控件的 2 个实例，则“var ClientIDs”将在呈现的页面中包含两次。因为 JS vars 是全局的，所以你的两个“var ClientIDs”定义会发生冲突。它会导致 JS 错误，或者更有可能的是，当 JS 访问“ClientIDs”时，您不知道将使用哪个。

【参考方案1】：

为了解释和简化您链接到的问题，他们所做的只是从页面/服务器控件设置一个 JavaScript 变量，然后从外部 JavaScript 文件中读取该变量。

例如，您的 *.ascx 文件将包含以下 JavaScript：

var textBox1 = '<%= TextBox1.ClientID %>';

然后，您的外部 JavaScript 文件可以只引用变量 textBox1。

现在，还有其他方法可以做到这一点。如果您使用的是 ASP.NET 4，则可以使用新属性 ClientIDMode 来防止 ASP.NET 更改您的 ID。如果您不使用 ASP.NET 4，也可以简单地将 CSS 类添加到要选择的元素中，然后将 jQuery 选择器更改为使用类（虽然比使用 ID 稍慢）。

最后，在评估元素 id 的 jQuery 选择器时，您需要使用 #，所以这将起作用：

alert($('#' + ClientIDs.test1).val());

【讨论】：

查看我的编辑 1：。感谢您的回答。问候。

更新了 jQuery 选择器，我的完全错误。另外，方法是val() 而不是values。

支持 ClientIDMode - 我忘记了。它解决了 .JS / ClientID 问题。当然，它增加了每个控件/页面负责确保其元素的唯一命名的问题。

没错，使用clientIDMode="Static" 会迫使您提前进行一些思考/仔细检查。但是对于只有一个控件实例的情况，从 CSS/JS 的角度来看会更好。

好的，我将尝试使用“clientIDMode”。但现在我要休息了。如果一切正常，我明天会给你反馈。问候。

【参考方案2】：

我从来没有找到我喜欢的解决方案，但我已经实施了一些不是完全可怕的变通办法：

对于必须引用特定页面元素的 JS 代码，在 .aspx 文件中定义它，这样您就可以访问 。这些函数可以在您的 .js 文件中调用常见的繁重函数。 在 .aspx 文件中定义 javascript 变量以保存 ClientID 值。 .js 文件中的函数可以引用这些变量来获取客户端 ID。当然，这些函数只能在定义了预期变量的页面上正常工作。

也许其他 SO'ers 会有更优雅的解决方案来解决这个问题 - 我期待看到其他回应。

【讨论】：

确实如此。我也没有找到解决方案，这非常好。问候。

如果页面上没有多个用户控件实例，最优雅的解决方案是在 web.config 文件的<pages> 节点中设置clientIDMode="Static"。这是在 ASP.NET 4 中引入的。

【参考方案3】：

使用明确的全局参数。

window.clientId= '';

这意味着你有全局变量“cilentId”。然后你可以在任何地方使用它。

【讨论】：

我的理解是，在 JS 中对“var”关键字的任何使用都与将 thing var 应用于“window”对象是一样的（除了在函数范围内专门定义的 var）。也许我的理解有误？

【参考方案4】：

在 ASP 页面中：

<script>
    var test2 = '<%= TextBox2.ClientID %>'
</script> 

并在外部JavaScript中以这种方式访问​​TextBox2：

documnet.getelementByid(test2);