摘自:http://blog.ashchan.com/archive/2007/08/28/listview-control-insert-edit-amp-delete-part-1aspx/
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>
我们为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功能。