您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET GridView 簡化編輯介面：以 ItemTemplate 取代 EditItemTemplate 實作即時編輯

編輯：ASP.NET 基礎

問題背景

傳統 GridView 編輯流程要求使用者點擊「編輯」按鈕進入編輯模式，修改完再點「更新」或「取消」，操作步驟繁瑣。若能直接在列表中顯示可編輯的文字方塊，使用者即可就地修改，體驗將大幅提升。

解決思路

核心在於：捨棄 EditItemTemplate，直接在 ItemTemplate 中放置 TextBox 控制項，並搭配 CommandName="Update" 的按鈕觸發更新事件。如此一來，GridView 永遠處於「顯示模式」，但每一列其實都是可編輯狀態。

前端標記範例

以下結合 asp:Table 作為新增列，GridView 負責列表顯示與編輯：

<asp:Table ID="Table1" runat="server" CssClass="table" CellPadding="2" CellSpacing="0">
    <asp:TableHeaderRow Height="20" BackColor="#efebde" BorderWidth="1" BorderColor="#c0c0c0">
        <asp:TableHeaderCell BackColor="#efebde" BorderWidth="1" BorderColor="#c0c0c0">Chinese Name</asp:TableHeaderCell>
        <asp:TableHeaderCell BackColor="#efebde" BorderWidth="1" BorderColor="#c0c0c0" Width="50%">English Name</asp:TableHeaderCell>
        <asp:TableHeaderCell BackColor="#efebde" BorderWidth="1" BorderColor="#c0c0c0" Width="10%">Edit</asp:TableHeaderCell>
    </asp:TableHeaderRow>
    <asp:TableRow Height="20">
        <asp:TableCell BorderWidth="1" BorderColor="#c0c0c0"><asp:TextBox ID="txt_CName" runat="Server" /></asp:TableCell>
        <asp:TableCell BorderWidth="1" BorderColor="#c0c0c0"><asp:TextBox ID="txt_EName" runat="Server" /></asp:TableCell>
        <asp:TableCell BorderWidth="1" BorderColor="#c0c0c0"><asp:Button ID="ButtonInsert" Text="Insert" runat="Server" OnClick="ButtonInsert_Click" /></asp:TableCell>
    </asp:TableRow>
</asp:Table>

<asp:GridView ID="GvCutterType" runat="server" DataKeyNames="CutterTypeId" AutoGenerateColumns="false"
    CellPadding="2" CellSpacing="0" Width="100%" BorderWidth="0" BorderColor="#c0c0c0"
    OnRowDeleting="GvCutterType_OnDeleteCommand" OnRowUpdating="GvCutterType_OnUpdateCommand"
    RowStyle-Height="20" ShowHeader="false">
    <Columns>
        <asp:TemplateField>
            <ItemStyle BorderWidth="1" BorderColor="#c0c0c0" />
            <ItemTemplate>
                <asp:TextBox ID="txtCName" runat="server" Text='<%# Eval("CName") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemStyle BorderWidth="1" BorderColor="#c0c0c0" Width="50%" />
            <ItemTemplate>
                <asp:TextBox ID="txtEName" runat="server" Text='<%# Eval("EName") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="編輯">
            <ItemStyle BorderWidth="1" BorderColor="#c0c0c0" Width="5%" />
            <ItemTemplate>
                <asp:Button ID="Button1" runat="server" CommandName="Update" Text="Update" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="刪除">
            <ItemStyle BorderWidth="1" BorderColor="#c0c0c0" Width="5%" />
            <ItemTemplate>
                <asp:Button ID="Button2" runat="server" CommandName="Delete" Text="Delete" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

後端程式碼

protected void ButtonInsert_Click(object sender, EventArgs e)
{
    // 新增邏輯
}

protected void GvCutterType_OnUpdateCommand(object sender, GridViewUpdateEventArgs e)
{
    // 更新邏輯：從 e.NewValues 或透過 FindControl 取得 TextBox 值
}

protected void GvCutterType_OnDeleteCommand(object sender, GridViewDeleteEventArgs e)
{
    // 刪除邏輯
}

優缺點分析

優點	缺點
介面簡潔，無模式切換閃爍	所有列同時顯示編輯控制項，資料量大時效能較差
程式碼較簡單，不需處理 Edit/Cancel 事件	缺乏內建驗證機制，需自行實作前後端驗證
適合少量資料、頻繁微調的後台管理	不支援 `EditItemTemplate` 的進階樣式切換