ListView控件的Insert、Edit和Delete功能（第一部分）

ListView是ASP.NET 3.5新提供的一个控件，它支持GridView类似的功能，并将HTML渲染的责任交由使用者来把控，而这正是GridView的一大劣势（它生成的乱七八糟的HTML输出，即使通过CSS Friendly Control Adapters来净化，也还是让人头痛得不行）。使用ListView两周以来，我已经没有一丁点儿再次使用GridView的欲望了。

由于VS2008还属于Beta2阶段，关于ListView的文档似乎不大容易找到。ScottGu正在写一个关于ListView的系列文章，不过目前还只完成了第一篇；Rick Strahl写的ListView and DataPager in ASP.NET 3.5较深入地讲述了ListView的一些特性。这两篇文章，是学习ListView很精彩的资料。

本系列文章将通过一个简单的实例，结合我自己使用ListView的情况，展示如何用该控件进行基本的Insert、Edit和Delete操作。

系统要求

Windows XP SP2 or higher
VS2008 Beta 2 or Visual Web Developer 2008 Express Edition Beta 2

建立Web Site

按默认配置，新建一个名为ListViewDemo的ASP.NET Web Site。

编写数据源

为了演示的简单性，我们创建一个数据对象DataEntry，它仅包含名为Name和Value的两个成员：

[Serializable]
public class DataEntry
{
    public string Name { get; set; }
    public int Value { get; set; }
}

为了方便在演示页面每次PostBack的时候获取数据对象列表，我们会把数据对象列表存放在Session中，所以为DataEntry类设置上Serializable属性。获取数据对象列表的逻辑很简单，从Session里取得，如果为空则进行简单的初始化，非空则直接返回使用：

protected List<DataEntry> Data
{
    get
    {
        List<DataEntry> data = Session[SESSION_KEY] as List<DataEntry>;
        if (data == null)
        {
            data = new List<DataEntry>();
            data.Add(new DataEntry { Name = "James", Value = 1 });
            data.Add(new DataEntry { Name = "Ash", Value = 2 });
            data.Add(new DataEntry { Name = "Lulu", Value = 3 });
            ViewState[SESSION_KEY] = data;
        }

        return data;
    }
    set { Session[SESSION_KEY] = value; }
}

static readonly string SESSION_KEY = "_sk_dataentry_";

使用ListView

在页面上添加一个ListView。为其编写LayoutTemplate，使用ul作为输出数据的HTML空器，而每一条数据将使用li来组织。ListView通过将数据输出至ItemContainer来渲染结果。我们在LayoutTemplate中添加一个PlaceHolder作为ItemContainer，这样生成的HTML中不会有任何多余的元素（比方说，如果使用Panel，则会生成一个空的div）。将ListView的ItemContainerID属性设置为这个PlaceHolder的ID：

<asp:ListView ID="ListView1" runat="server" ItemContainerID="Layout">
   <LayoutTemplate>
      <ul><asp:PlaceHolder runat="server" ID="Layout" /></ul>
   </LayoutTemplate>
</asp:ListView>

然后编写ItemTemplate，将每一个数据对象的Name和Value值输出到一个li中：

<ItemTemplate>
    <li><%# Eval("Name") %> (#<%# Eval("Value") %>)</li>
</ItemTemplate>

在Page_Load方法中为ListView绑定上面编写的数据源：

ListView1.DataSource = Data;
ListView1.DataBind();

运行该网站工程，显示效果如下：

James (# 1)
Ash (# 2)
Lulu (# 3)

实现Insert功能

ListView的Insert Mode通过其属性InsertItemPosition来控制，该属性的取值有三种：

None：非Insert状态 FirstItem：Insert状态，且编辑模板显示于ListView所有item的最前面 LastItem ：Insert状态，且编辑模板显示于ListView所有item的最后面

我们先添加一个InsertItemTemplate，在里边放置两个TextBox用于接收Name和Value的用户输入，以及一个Save按钮：

<InsertItemTemplate>
    <li>Name: <asp:TextBox runat="server" ID="NewName" Text='<%# Bind("Name") %>' /><br />    Value: <asp:TextBox runat="server" ID="NewValue" Text='<%# Bind("Value") %>' />
    <asp:Button runat="server" ID="Insert" Text="Save" CommandName="Insert" /> </li><br />
</InsertItemTemplate>

Save按钮的CommandName设置为Insert，这样当用户保存新添加的数据时，Insert相应的事件会被触发。

然后，我们在LayoutTemplate中添加一个New按钮，并将其CommandName设为Create。因为当ListView中数据为空时，不显示LayoutTemplate而是显示EmptyDataTemplate，我们再编写一个EmptyDataTemplate，并在它下面也放一个New按钮。这样当数据被删光时，不至于没有New按钮可用：P

<LayoutTemplate>
    <ul><asp:PlaceHolder runat="server" ID="Layout" /></ul><br />    <asp:Button runat="server" ID="Create" CommandName="Create" Text="New" />
</LayoutTemplate>
<EmptyDataTemplate>
    <asp:Button runat="server" ID="Create" CommandName="Create" Text="New" />
</EmptyDataTemplate>

我们为New按钮的CommandName设置了Create值。现在为ListView添加ItemCommand的事件处理方法，然后在里边处理New按钮单击事件，将ListView切换至Insert状态：

protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    if (e.CommandName == "Create")
    {
        ListView1.InsertItemPosition = InsertItemPosition.LastItem;
        BindData();
    }
}

注：BindData仅仅是对ListView控件重新进行数据源绑定。

为ListView添加ItemInserting事件处理方法，当Save按钮点击时，在这个方法内处理新数据保存的逻辑。这里遇到一个问题，在这个事件中，如何去获取用户输入的数据？我想ASP.NET应该有很方便又优雅的机制来实现这个功能，比方说这个事件的参数ListViewInsertEventArgs中有一个Values的属性，貌似是用来存储这些数据的。不过我没有弄明白怎使用么用这个属性，只好用土办法来解决：ListViewInsertEventArgs参数中的Item属性以及ListView控件的InsertItem属性，均是当前要插入的Template Item，我们用FindControl方法来获取输入控件并取值保存。保存完毕后，将ListView的InsertItemPosition属性设为None以退出Insert状态：

protected void ListView1_ItemInserting(object sender, ListViewInsertEventArgs e)
{
    ListViewItem item = e.Item;
    try
    {
        string name = (item.FindControl("NewName") as TextBox).Text;
        int value = int.Parse((item.FindControl("NewValue") as TextBox).Text);
        List<DataEntry> data = Data;
        data.Add(new DataEntry { Name = name, Value = value });
        Data = data;

        ListView1.InsertItemPosition = InsertItemPosition.None;

        BindData();
    }
    catch  { }
}

运行网站测试一下，功能正常：

接下来

ListView的Insert功能已经实现。在下一篇里，我们将实现Edit功能。

To be continued…