javascript - 如何从外部 JavaScript 中的 ServerControl 访问 ClientID

Question

目前，如果我在我的 SharePoint 项目中使用 JavaScript，我会将代码添加到 *.ascx 文件中，位于 <script type="text/javascript"></script> 中。 block 并为每个元素创建一个变量 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 一起使用，那就太好了，如果他让我知道的话。

Answer 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());