如何在C# ASP.NET的GridView中实现每行复选框独立功能

问题描述 #

我正在开发一个系统，GridView的每个单元格里包含多个复选框，希望给每个复选框实现独立功能。比如勾选第1行的复选框时，把某个对象的Visible属性设为true，而勾选第2行的复选框则不执行任何操作。
我写的GridView的OnRowCommand方法代码既没报错，也没按预期工作。

现有代码 #

.aspx代码 #

<asp:GridView ID="GridView1" runat="server" class="table"
                            AutoGenerateColumns="False" OnRowCommand="GridView1_RowCommand">
                            <Columns>
                                <asp:BoundField DataField="EmpName" HeaderText="Employee Name" >

                                <ControlStyle Height="30px" />
                                <ItemStyle Height="30px"/>
                                </asp:BoundField>

                                <asp:TemplateField HeaderText="Monday" ItemStyle-HorizontalAlign="Center">
                                    <ItemTemplate>
                                        <asp:Label ID="lblVisitMon" runat="server" Text="Visit"></asp:Label>
                                        <asp:CheckBox ID="chkMonday" runat="server" AutoPostBack="true" OnCheckedChanged="SelectMon_OnCheckedChanged"/>
                                        <asp:Label ID="lblPermitMon" runat="server" Text="Permit" Visible="false"></asp:Label>
                                        <asp:CheckBox ID="chkWorkPermitMonday" runat="server" Visible="false" />
                                        <asp:DropDownList ID="ddlMon" runat="server" Visible="false">
                                            <asp:ListItem>SM Batangas</asp:ListItem>
                                            <asp:ListItem>SM Bacoor</asp:ListItem>
                                        </asp:DropDownList>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center"></ItemStyle>
                                </asp:TemplateField>
</asp:GridView>

.cs代码 #

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    GridViewRow row3 = (GridViewRow)(((Control)e.CommandSource).NamingContainer);
    int requesitionID = Convert.ToInt32(e.CommandArgument);
    CheckBox mon = row3.FindControl("chkMonday") as CheckBox;

    if (mon.Checked)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {
            var textbox = row.FindControl("lblPermitMon") as Label;
            textbox.Visible = true;
            var checkbox = row.FindControl("chkWorkPermitMonday") as CheckBox;
            checkbox.Visible = true;
            var ddl = row.FindControl("ddlMon") as DropDownList;
            ddl.Visible = true;
        }
    }
}

问题分析 #

1. 事件绑定不匹配：你的CheckBox已经绑定了OnCheckedChanged事件，但你却在GridView1_RowCommand里写逻辑，这两个事件完全独立，RowCommand不会触发——因为CheckBox没有设置CommandName和CommandArgument，GridView的RowCommand事件不会响应CheckBox的操作。
2. 逻辑不符合需求：就算RowCommand触发，你现在的代码是遍历所有行显示控件，而不是只操作指定的第1行。

解决方案 #

方案一：使用CheckBox的CheckedChanged事件（推荐） #

既然已经给CheckBox设置了AutoPostBack="true"和OnCheckedChanged，直接在这个事件里写逻辑更直接：

修改后的.cs代码

protected void SelectMon_OnCheckedChanged(object sender, EventArgs e)
{
    // 获取触发事件的CheckBox所在的行
    CheckBox chkMon = sender as CheckBox;
    GridViewRow currentRow = chkMon.NamingContainer as GridViewRow;

    // 只处理第1行（行索引从0开始，所以RowIndex == 0对应第一行）
    if (currentRow.RowIndex == 0 && chkMon.Checked)
    {
        // 显示当前行的目标控件
        Label lblPermit = currentRow.FindControl("lblPermitMon") as Label;
        CheckBox chkPermit = currentRow.FindControl("chkWorkPermitMonday") as CheckBox;
        DropDownList ddlMon = currentRow.FindControl("ddlMon") as DropDownList;

        lblPermit.Visible = true;
        chkPermit.Visible = true;
        ddlMon.Visible = true;
    }
    // 可选：取消第1行勾选时隐藏控件
    else if (currentRow.RowIndex == 0 && !chkMon.Checked)
    {
        Label lblPermit = currentRow.FindControl("lblPermitMon") as Label;
        CheckBox chkPermit = currentRow.FindControl("chkWorkPermitMonday") as CheckBox;
        DropDownList ddlMon = currentRow.FindControl("ddlMon") as DropDownList;

        lblPermit.Visible = false;
        chkPermit.Visible = false;
        ddlMon.Visible = false;
    }
    // 其他行勾选不执行任何操作，无需额外代码
}

方案二：强制使用GridView的RowCommand事件 #

如果一定要用RowCommand，需要给CheckBox添加CommandName和CommandArgument属性：

修改后的.aspx中CheckBox部分

<asp:CheckBox ID="chkMonday" runat="server" AutoPostBack="true" 
    CommandName="ToggleMonday" CommandArgument='<%# Container.DataItemIndex %>'/>

修改后的.cs代码

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    // 判断是否是CheckBox触发的命令
    if (e.CommandName == "ToggleMonday")
    {
        int rowIndex = Convert.ToInt32(e.CommandArgument);
        GridViewRow currentRow = GridView1.Rows[rowIndex];
        CheckBox chkMon = currentRow.FindControl("chkMonday") as CheckBox;

        // 只处理第1行
        if (rowIndex == 0 && chkMon.Checked)
        {
            Label lblPermit = currentRow.FindControl("lblPermitMon") as Label;
            CheckBox chkPermit = currentRow.FindControl("chkWorkPermitMonday") as CheckBox;
            DropDownList ddlMon = currentRow.FindControl("ddlMon") as DropDownList;

            lblPermit.Visible = true;
            chkPermit.Visible = true;
            ddlMon.Visible = true;
        }
    }
}

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