ASP.NET GridView 進階教學（五）：CommandField 觸發單行編輯與獨立編輯面板

前端標記

<asp:Panel ID="pnlEdit" runat="server" Visible="False">
    姓名：<asp:TextBox ID="txtUserName" runat="server" />
    地址：<asp:TextBox ID="txtAddress" runat="server" />
    郵編：<asp:TextBox ID="txtPostCode" runat="server" />
    <asp:Button ID="btnOK" runat="server" Text="確定" OnClick="btnOK_Click" />
    <asp:Button ID="btnCancel" runat="server" Text="取消" OnClick="btnCancel_Click" />
</asp:Panel>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ClientID" AllowPaging="True" 
    OnPageIndexChanging="GridView1_PageIndexChanging" OnSelectedIndexChanging="GridView1_SelectedIndexChanging">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ClientName" HeaderText="姓名" />
        <asp:BoundField DataField="AddressStr" HeaderText="地址" />
        <asp:BoundField DataField="PostCode" HeaderText="郵編" />
    </Columns>
</asp:GridView>

運作流程

1. 使用者點擊 GridView 的「選取」按鈕觸發 SelectedIndexChanging。
2. 後台取得該行資料，填入 pnlEdit 的 TextBox，顯示面板。
3. 使用者修改後點「確定」更新資料庫，隱藏面板並重新綁定 GridView。

此模式將編輯介面與列表分離，適合欄位較多或需複雜驗證的情境。