GridView編輯、取消按鈕自定義控件

這個需求來自于論壇一位壇友提出的問題，他希望能夠自定義編輯、取消按鈕，而不是用GridView自帶的編輯和取消。這里只當拋磚引玉，提出一些解決方案。

首先在頁面前臺設置一個GridView。

<div> 
    <asp:GridView ID="GridView1" runat="server"> 
        <Columns> 
            <asp:TemplateField HeaderText="操作"> 
                <ItemTemplate> 
                    <table> 
                        <td align="center"> 
                            <asp:Button ID="Edit" runat="server" Text="編輯" Visible="true" OnClick="Edit_Click" 
                                CommandArgument="<%# Container.DataItemIndex %>" /> 
                            <asp:Button ID="Cancel" runat="server" Text="取消" Visible="false" OnClick="Cancel_Click" /> 
                        </td> 
                    </table> 
                </ItemTemplate> 
            </asp:TemplateField> 
        </Columns> 
    </asp:GridView> 
</div>

這里注意，我通過給按鈕Edit的CommandArgument屬性設置一個DataItemIndex值，這個值就是默認行的索引值。通過這個參數可以獲取GridView的行號。

然后我在首頁加載的時候綁定數據源。

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!Page.IsPostBack) 
    { 
        DataTable dt = new DataTable(); 
        dt.Columns.Add("id", typeof(int)); 
        dt.Columns.Add("name", typeof(string)); 
              
        dt.Rows.Add(10001, "guwei40371"); 
        dt.Rows.Add(10002, "guwei40372"); 
              
        this.GridView1.DataSource = dt.DefaultView; 
        this.GridView1.DataBind(); 
    } 
}

這里很簡單，就是綁定了兩列，給GridView綁定上。

接下來兩個按鈕事件：

protected void Edit_Click(object sender, EventArgs e) 
{ 
    int index = Convert.ToInt32((sender as Button).CommandArgument);//獲取到行號 
    Button button = this.GridView1.Rows[index].FindControl("Cancel") as Button;//找到當前行的Cancel按鈕 
    button.Visible = true;//設置按鈕的Visible為true 
} 
        
protected void Cancel_Click(object sender, EventArgs e) 
{ 
    int row = ((GridViewRow)((Button)sender).NamingContainer).RowIndex;//通過按鈕直接找到命名容器（GridViewRow）的RowIndex 
    Response.Write("<script>alert('" + this.GridView1.Rows[row].Cells[1].Text + "')</script>");//直接彈出當前行單元格索引為1的內容 
}

具體代碼的含義，上面已經注釋明了，這里不重復。

最后看下執行的效果。

當點擊編輯按鈕的時候，顯示取消按鈕。

當點擊取消按鈕的時候，彈出10001。