ASP.NET ListView 控件學習系列（二）：編輯、更新、插入、刪除完整實作

ListView 透過 EditItemTemplate、InsertItemTemplate、CommandName 標準化 CRUD 操作，無需手寫繁瑣的狀態管理程式碼。

前端模板完整定義

<asp:ListView ID="ListView1" runat="server"
    OnItemEditing="ListView1_ItemEditing"
    OnItemCanceling="ListView1_ItemCanceling"
    OnItemUpdating="ListView1_ItemUpdating"
    OnItemDeleting="ListView1_ItemDeleting"
    OnItemInserting="ListView1_ItemInserting">

  <LayoutTemplate>
    <table><tr runat="server" id="itemPlaceholder" /></table>
  </LayoutTemplate>

  <ItemTemplate>
    <tr>
      <td><%# Eval("ID") %></td>
      <td><%# Eval("Name") %></td>
      <td><asp:Button CommandName="Edit" Text="編輯" runat="server" /></td>
    </tr>
  </ItemTemplate>

  <EditItemTemplate>
    <tr>
      <td><asp:Label Text='<%# Eval("ID") %>' runat="server" /></td>
      <td><asp:TextBox ID="txtName" Text='<%# Bind("Name") %>' runat="server" /></td>
      <td>
        <asp:Button CommandName="Update" Text="更新" runat="server" />
        <asp:Button CommandName="Cancel" Text="取消" runat="server" />
      </td>
    </tr>
  </EditItemTemplate>

  <InsertItemTemplate>
    <tr>
      <td><asp:TextBox ID="txtNewName" Text='<%# Bind("Name") %>' runat="server" /></td>
      <td>
        <asp:Button CommandName="Insert" Text="新增" runat="server" />
        <asp:Button CommandName="Cancel" Text="取消" runat="server" />
      </td>
    </tr>
  </InsertItemTemplate>
</asp:ListView>

後端事件處理

protected void ListView1_ItemEditing(object sender, ListViewEditEventArgs e)
{
    ListView1.EditIndex = e.NewEditIndex;
    BindData();
}

protected void ListView1_ItemCanceling(object sender, ListViewCancelEventArgs e)
{
    ListView1.EditIndex = -1;
    BindData();
}

protected void ListView1_ItemUpdating(object sender, ListViewUpdateEventArgs e)
{
    string id = ListView1.DataKeys[e.ItemIndex].Value.ToString();
    string name = e.NewValues["Name"].ToString();
    // 執行資料庫更新
    DataAccess.Update(id, name);
    ListView1.EditIndex = -1;
    BindData();
}

protected void ListView1_ItemInserting(object sender, ListViewInsertEventArgs e)
{
    string name = e.Values["Name"].ToString();
    DataAccess.Insert(name);
    BindData();
}

protected void ListView1_ItemDeleting(object sender, ListViewDeleteEventArgs e)
{
    string id = ListView1.DataKeys[e.ItemIndex].Value.ToString();
    DataAccess.Delete(id);
    BindData();
}

模擬資料存取層

public class Employee { public int ID { get; set; } public string Name { get; set; } public int Age { get; set; } }

public class DataAccess
{
    public static List List = new List
    {
        new Employee { ID=1, Name="張三", Age=30 },
        new Employee { ID=2, Name="李四", Age=28 }
    };

    public static void Update(string id, string name) { /* DB 更新 */ }
    public static void Insert(string name) { /* DB 新增 */ }
    public static void Delete(string id) { /* DB 刪除 */ }
}

關鍵繫結差異：Eval vs Bind

• Eval("Name")：單向繫結（唯讀），用於 ItemTemplate、SelectedItemTemplate
• Bind("Name")：雙向繫結（可回寫），必須用於 EditItemTemplate、InsertItemTemplate 的輸入控件

InsertItemPosition 屬性

ListView1.InsertItemPosition = InsertItemPosition.FirstItem;  // 或 LastItem、None

控制插入列顯示位置，預設 None 隱藏。