无回发实现ASP.NET GridView行颜色随CheckBox选中切换

问题描述 #

我有一个带CheckBox列的GridView控件，需求是：CheckBox选中时，对应行背景色改成蓝色；取消选中时恢复白色。之前用C#代码实现了功能，但需要回发，不符合无回发要求；尝试用JavaScript实现，但没法获取行相关信息。求客户端实现方式，或者无需回发的C#实现方式。

原C#代码 #

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
    foreach (GridViewRow row in GridView1.Rows)
    {
        if (row.RowType == DataControlRowType.DataRow)
        {
            CheckBox chk = (CheckBox)row.FindControl("checkbox1");
            if (chk.Checked == true)
            {
                row.BackColor = System.Drawing.Color.FromArgb(220,220,255);
            }
            else
            {
                row.BackColor = System.Drawing.Color.White;
            }
        }
    }
}

原ASP.NET代码 #

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate >
                <div style="position:absolute;height:60px;width:60px;">
                    <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="false"  onclick="functionName(this);"  />
                </div>
                <asp:Button ID="Button100" runat="server" Height="60px" Width="60px" BackColor="Transparent"/>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Id" ItemStyle-Width="5%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
        <asp:BoundField DataField="PatientName" ItemStyle-Width="15%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
        <asp:BoundField DataField="AccessionNumber" ItemStyle-Width="10%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
        <asp:BoundField DataField="SeriesDescription" ItemStyle-Width="10%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
        <asp:BoundField DataField="Status" ItemStyle-Width="8%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
        <asp:BoundField DataField="CreationDateTime" ItemStyle-Width="10%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
        <asp:BoundField DataField="PrintDateTime" ItemStyle-Width="10%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
        <asp:BoundField DataField="CallingAetitle" ItemStyle-Width="12%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
        <asp:BoundField DataField="CalledAetitle" ItemStyle-Width="12%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
        <asp:BoundField DataField="Pages" ItemStyle-Width="8%" ItemStyle-Height="60px" ItemStyle-Wrap="false" />
    </Columns>
    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#999999" Font-Bold="True" ForeColor="Black"/>
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#0000A9" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>

<script type="text/javascript">
    function functionName(obj) {
        if (obj.checked) {
            alert('check box checked')
        } else {
            alert('check box not checked')
        }
    }
</script>

解决方案 #

客户端JavaScript实现（无回发） #

你之前的JS没法获取行，是因为CheckBox嵌套在<div>里，只要通过DOM遍历找到对应的GridView行就行。替换原有脚本为以下代码：

function functionName(obj) {
    // 向上遍历找到CheckBox所在的GridView行
    let row = obj.closest('div').closest('tr');
    if (obj.checked) {
        // 和C#代码一致的蓝色背景
        row.style.backgroundColor = '#dcdcff';
    } else {
        // 恢复白色背景
        row.style.backgroundColor = '#ffffff';
    }
}

说明

• closest()方法会向上查找最近的匹配元素，这里先找到包裹CheckBox的div，再找到对应的<tr>行
• #dcdcff是你C#里Color.FromArgb(220,220,255)的十六进制颜色值，视觉效果完全一致
• 不需要修改GridView的结构，直接替换脚本就能生效

关于无需回发的C#实现 #

ASP.NET WebForms的服务器控件默认依赖回发才能更新UI，没有原生的无回发C#实现方式。如果一定要用服务器端逻辑，只能结合UpdatePanel做局部回发，但本质还是有回发（只是页面不整页刷新），不符合你要的“无回发”要求，所以优先推荐纯JS方案。

内容的提问来源于stack exchange，提问作者Hugo Sa