VS2008脚本调试的一点经验

今天在做一个为GridView添加Checkboxes的小练习时，想在HeaderTemplate里放置一个checkbox，并且用脚本控制ItemTemplate里的checkbox全选或全不选，主要代码如下：

<script type="text/javascript">
        function ChangeCheckBoxState(id, checkState) {
            var cb = document.getElementById(id);
            if (cb != null)
                cb.checked = checkState;
        }
        function ChangeAllCheckBoxState(checkState) {
            if (CheckBoxIDs != null) {
                for (var i = 0; i < CheckBoxIDs.length; i++)
                    ChangeCheckBoxState(CheckBoxIDs[i], checkState);
            }
        }
        function ChangeHeaderAsNeeded() {
            if (CheckBoxIDs != null) {
                for (var i = 1; i < CheckBoxIDs.length; i++) {
                    var cb = document.getElementById(CheckBoxIDs[i]);
                    if (!cb.checked) {
                        ChangeCheckBoxState(CheckBoxIDs[0], false);
                        return;
                    }
                }
                ChangeCheckBoxState(CheckBoxIDs[0], true);
            }
        }
    </script>


<asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox runat="server" ID="HeaderLevelCheckbox" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="ProductSelector" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>


protected void Products_DataBound(object sender, EventArgs e)
    {
        GridViewRow row = Products.HeaderRow;
        CheckBox cbHeader = (CheckBox)row.FindControl("HeaderLevelCheckbox");
        cbHeader.Attributes["onclick"] = "ChangeAllCheckBoxState(this.checked);";
        List<String> ArrayValues = new List<string>();
        ArrayValues.Add(String.Concat("'", cbHeader.ClientID, "'"));
        foreach (GridViewRow grv in Products.Rows)
        {
            CheckBox cb = (CheckBox)grv.FindControl("ProductSelector");
            cb.Attributes["onclick"] = "ChangeHeaderAsNeeded();";
            ArrayValues.Add(String.Concat("'", cb.ClientID, "'"));
        }
        CheckBoxIDsArray.Text = @"<script type=""text/javascript"">" + String.Concat("var CheckBoxIDs =  new Array(", String.Join(",", ArrayValues.ToArray()), ");") + "</script>";
    }

在查看效果的时候发现了一个非常奇怪的现象：点击ItemTemplate里的一个checkbox时全部的checkbox会同时选中，这明显与实际期望产生了偏差，于是决定通过调试看看为啥出现了这个偏差，查了一下也没有显示处理这块的代码。郁闷了一会后，想到既然全部选中应该是调用了ChangeAllCheckBoxState()这个函数，但何时调用的呢，在脚本处放断点，结果显示运行也正常啊，貌似也没什么问题。于是又很失望，就在要放弃的时候突然发现ChangeAllCheckBoxState(CheckBoxIDs[0], false);这句代码，再一看ChangeAllCheckBoxState()没有两个参数的方法，赶紧把它改回来，再看效果时已经好用了。只是纳闷，调试脚本的时候明明没有合适的方法为什么不报错呢？

    个人总结：有时候我们不可过分相信脚本调试器，在遇到异常的时候还是应该仔细分析可能出错的原因。