将 JavaScript 放在外部文件中。文件不起作用？答案

【问题标题】：Place JavaScript in external file. File doesn't works?将 JavaScript 放在外部文件中。文件不起作用？
【发布时间】：2009-08-18 21:56:45
【问题描述】：

我有 GridView 和 CheckBox 在它的标题和每行另一个：

<asp:GridView runat="server">
<Columns>
<asp:TemplateField>
    <HeaderTemplate>
        <input type="checkbox" onclick="checkAll(this.checked)" />
    </HeaderTemplate>
    <ItemTemplate>
        <input name="checkSelect" type="checkbox" value='<%# Eval("ID") %>' />
    </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

我希望主复选框（取消）选中所有其他复选框。

所以我有JavaScript函数：

function checkAll(checked) {
    var grid = document.getElementById("<%= gridViewStatement.ClientID %>");
    for (i = 1; grid.rows.length - 1; i++) {
        grid.rows[i].getElementsByTagName("input")[0].checked = checked;
    }
}

如果我把它放在<script> 标签内，它的工作原理

<script type="text/javascript" language="javascript">       
</script>

如果我把函数放在文件中

<script type="text/javascript" language="javascript" src="scripts.js"></script>

它停止工作！根目录下的文件，名称写正确。

我做错了什么？？

附：有什么可以改善我的功能的吗？

附言我使用HtmlCheckBox 而不是asp:CheckBox，因为我将每个绑定到“ID”列并在Request.Form 中获取ID 列表。我说的对吗？

【问题讨论】：

标签： .net javascript

【解决方案1】：

恕我直言，是什么扼杀了你的脚本：

var grid = document.getElementById("<%= gridViewStatement.ClientID %>");

您正在混合服务器端和客户端代码。由于首先呈现服务器端代码，如果该行存在于 ASPX 页面中，则 <%= gridViewStatement.ClientID %> 的值会及时评估以供 JavaScript 使用。通过将其放入稍后包含的文件中，您可以确保该值不会被解释。

这是一个简短的解决方案：
在 ASPX 的顶部包括以下几行：

<script type="text/javascript" language="javascript">
    var gridID = "<%= gridViewStatement.ClientID %>";
</script>
<script type="text/javascript" language="javascript" src="scripts.js"></script>

并将函数中的第一行更改为：

var grid = document.getElementById(gridID);

【讨论】：

+1。我更喜欢将ClientID 作为<input onclick> 中的参数传递，因为它将所有JavaScript 保存在一起。唯一的问题是它污染了全局命名空间。我可以看到一些解决方案，例如var serverValues = { 'gridViewStatement.ClientID': "<%= gridViewStatement.ClientID %>", 'nextServer.Key': "<%= another.Value %>" }; 然后var grid = document.getElementById(serverValues['gridViewStatement.ClientID']);
serverValues 映射的另一个好处是客户端代码现在可以更准确地反映服务器值的来源。当然，缺点是您将客户端映射键绑定到服务器端变量名称，但原始代码也具有这种依赖性。
好主意。我想我将从现在开始使用它，而不是在全局范围内拥有一个变量列表。谢谢。

【解决方案2】：

您的脚本包含一个参考 gridViewStatement.ClientID，它作为内联脚本在 asp.net 页面上进行评估。如果您将其放在外部文件中，则不会对其进行评估，并且该脚本文本将位于客户端的 javascript 文件中，这将无法正常工作，因为它没有正确的 id

【讨论】：

【解决方案3】：

感谢 LorenVS！

<input type="checkbox" onclick="checkAll('<%= gridViewStatement.ClientID %>', this.checked)" />

和

function checkAll(grid, checked) {
    var grid = document.getElementById(grid);
    for (i = 1; grid.rows.length - 1; i++) {
        var row = grid.rows[i];
        row.getElementsByTagName("input")[0].checked = checked;
    }
}

【讨论】：

【解决方案4】：

正如 LorenVS 所说。也许您可以更改您的 ASPX，以便将网格的客户端 ID 传递给 javascript 函数：

<input type="checkbox"
  onclick='checkAll(this.checked, "<%= gridViewStatement.ClientID %>")' />

然后更改您的函数以将网格的客户端 ID 作为参数：

function checkAll(checked, gridId) {
  var grid = document.getElementById(gridId);
  ...
}

}

【讨论】：