在行單擊時更新 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 放置在頁面的中心。