在行单击时更新 Gridview

如果我们可以根据需要更新视图，则 Gridview 更有用。考虑每行中具有锁定/解锁功能的视图。可以这样做：

添加更新面板：

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> </asp:UpdatePanel>

在 UpdatePanel 中添加 ContentTemplate 和 Trigger：

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate>
    </ContentTemplate>

    <Triggers>
    </Triggers>
</asp:UpdatePanel>

在 ContentTemplate 中添加 GridView：

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server">
          <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
                            CommandName="togglelock"
                            CommandArgument='<%#Container.DataItemIndex%>'/>
                        
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>

</ContentTemplate>

这里我们给 GridView1 一个常量列，用于锁定按钮。记住它，databind 直到现在还没有发生。

DataBind 的时间:(在 PageLoad 上）

using (SqlConnection con= new SqlConnection(connectionString)) 
{
            SqlCommand sqlCommand = new SqlCommand(" ... ", con);
            SqlDataReader reader = sqlCommand.ExecuteReader();
            GridView1.DataSource = reader;
            GridView1.DataBind();
}

根据 GridView 中某列的值，锁定/解锁图像将有所不同。考虑一下你的表包含标题为锁定状态的属性/列的情况。现在你希望（1）在 DataBind 之后和页面渲染之前隐藏该列，以及（2）根据该隐藏列值为每一行分配不同的图像，即如果一行的锁定状态为 0，则将其指定为锁定。jpg“，如果状态为 1 则指定它”unlock.jpg“。为此，我们将使用 GridView 的 OnRowDataBound 选项，它与 GridView 混合，就在将每一行渲染到 HTML 页面之前。

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"> ...

在 cs 文件中

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Cells[8].Visible = false; //hiding the desired column which is column number 8 in this case
            GridView1.HeaderRow.Cells[8].Visible = false; //hiding its header
            ImageButton imgDownload = (ImageButton)e.Row.FindControl("imgDownload");
            string lstate = ((CheckBox)e.Row.Cells[8].Controls[0]).Checked.ToString();
            if (lstate == "True")
            { imgDownload.ImageUrl = "images/lock.png"; }
            else
            {
                imgDownload.ImageUrl = "images/unlock.png";
            }
        }
    }

现在 GridView 将根据需要进行渲染，现在让我们在 Lock / Unlock 图像按钮上实现按钮点击事件。要明白，要对特定行执行特定操作，必须为该行指定一个命令，GridView 为我们提供了名为 OnRowCommand 的相同功能。

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" OnRowCommand="GridView1_RowCommand">
...
</ContentTemplate>

它将在 cs 文件中创建一个函数，它接受 object sender 和 GridViewCommandEventArgs e 使用 e.CommandArgument 我们可以获得给出命令的行的索引这里要注意的是，一行可以有多个按钮，而 cs 代码需要知道该行的哪个按钮给出了命令。所以我们将使用 CommandName

<asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
                            CommandName="togglelock"
                            CommandArgument='<%#Container.DataItemIndex%>'/>

现在在后端，可以区分不同行和不同按钮的命令。

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "togglelock")
        {
            using (SqlConnection con= new SqlConnection(connectionString)) 
            {
               int index = Convert.ToInt32(e.CommandArgument);
               SqlCommand sqlCommand = new SqlCommand(" ... ", con);
               SqlDataReader reader = sqlCommand.ExecuteReader();
               GridView1.DataSource = reader;
               GridView1.DataBind();
            }
        }
    }

将 <asp:PostBackTrigger ControlID="GridView1"/> 添加到 Trigger，一旦 DataBind 完成，它将更新 GridView。

使用 HorizontalAlign="Center" 将 GridView 放置在页面的中心。