ListView经典使用技巧

返回此系列教程目录         【学习源码下载】

1、鼠标移到ListView某一行时改变该行的背景色方法

前端代码：

1. <asp:ListView ID="ListView1" runat="server"  
2.             onitemdatabound="ListView1_ItemDataBound"> 
3.             <LayoutTemplate> 
4.                 <table id="Table1" runat="server" border="0" style=""> 
5.                     <tr runat="server" id="itemPlaceholder" /> 
6.                 </table> 
7.             </LayoutTemplate> 
8.             <ItemTemplate> 
9.                 <tr runat="server" id="Tr"> 
10.                     <td> 
11.                         <%#Eval("ID") %> 
12.                     </td> 
13.                     <td> 
14.                         <%# Eval("name") %> 
15.                     </td> 
16.                     <td> 
17.                         <%# Eval("age") %> 
18.                     </td> 
19.                 </tr> 
20.             </ItemTemplate> 
21.         </asp:ListView> 

后台代码：

1. protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e) 
2.     { 
3.         if (e.Item.ItemType==ListViewItemType.DataItem) 
4.         { 
5.             (e.Item.FindControl("Tr") as HtmlTableRow).Attributes. 
6.                 Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#00A9FF'"); 
7.             (e.Item.FindControl("Tr") as HtmlTableRow).Attributes. 
8.             Add("onmouseout", "this.style.backgroundColor=c"); 
9.         } 
10.     } 

2、ListView和和下拉菜单DropDownList结合（其他控件其实也差不多）：
前端代码：

1. <asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound"> 
2.             <LayoutTemplate> 
3.                 <table id="Table1" runat="server" border="0" style=""> 
4.                     <tr runat="server" id="itemPlaceholder" /> 
5.                 </table> 
6.             </LayoutTemplate> 
7.             <ItemTemplate> 
8.                 <tr runat="server" id="Tr"> 
9.                     <td> 
10.                         <asp:Label ID="ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label> 
11.                     </td> 
12.                     <td> 
13.                         <%# Eval("name") %> 
14.                     </td> 
15.                     <td> 
16.                         <%# Eval("age") %> 
17.                     </td> 
18.                     <td> 
19.                         <asp:DropDownList ID="SexDropDownList" runat="server"> 
20.                         </asp:DropDownList> 
21.                     </td> 
22.                 </tr> 
23.             </ItemTemplate> 
24.         </asp:ListView> 

模拟数据提供代码：

1. namespace Data 
2. { 
3.     /// <summary> 
4.     ///DataAccess 的摘要说明 
5.     /// </summary> 
6.     public class DataAccess 
7.     { 
8.         public List<Employee> List; 
9.         public DataAccess() 
10.         { 
11.             List = new List<Employee>(); 
12.             Employee e1 = new Employee { ID = 1, Name = "A", Age = 10 ,Sex=1}; 
13.             Employee e2 = new Employee { ID = 3, Name = "M", Age = 30 ,Sex=0}; 
14.             Employee e3 = new Employee { ID = 2, Name = "B", Age = 40,Sex=1 }; 
15.             Employee e4 = new Employee { ID = 4, Name = "S", Age = 19,Sex=0 }; 
16.             Employee e5 = new Employee { ID = 6, Name = "X", Age = 18 ,Sex=1}; 
17.             Employee e6 = new Employee { ID = 5, Name = "W", Age = 20 ,Sex=0}; 
18.             List.Add(e1); 
19.             List.Add(e2); 
20.             List.Add(e3); 
21.             List.Add(e4); 
22.             List.Add(e5); 
23.             List.Add(e6); 
24.         } 
25.         public Employee Find( int id) 
26.         { 
27.             foreach (var item in List) 
28.             { 
29.                 if (item.ID == id) 
30.                     return item; 
31.             } 
32.             return null; 
33.         } 
34.     } 
35.     public class Employee 
36.     { 
37.         public int ID { get; set; } 
38.         public string Name { get; set; } 
39.         public int Age { get; set; } 
40.         public int Sex { get; set; } 
41.     } 
42. } 

后台代码：

1. protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e) 
2.     { 
3.         DropDownList SexDropDownList = e.Item.FindControl("SexDropDownList") as DropDownList; 
4.         int sex = da.Find(Convert.ToInt32((e.Item.FindControl("ID") as Label).Text)).Sex; 
5.         ListItem listItem; 
6.         if (sex == 0) 
7.         { 
8.             listItem = new ListItem("男", sex.ToString()); 
9.         } 
10.         else 
11.         { 
12.             listItem = new ListItem("女", sex.ToString()); 
13.         } 
14.         SexDropDownList.Items.Add(listItem); 
15.         SexDropDownList.Enabled = false; 
16.     } 

3、ListView实现删除时弹出确认对话框：
前端代码

1. <asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound"> 
2.             <LayoutTemplate> 
3.                 <table id="Table1" runat="server" border="0" style=""> 
4.                     <tr runat="server" id="itemPlaceholder" /> 
5.                 </table> 
6.             </LayoutTemplate> 
7.             <ItemTemplate> 
8.                 <tr runat="server" id="Tr"> 
9.                     <td> 
10.                         <asp:Label ID="ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label> 
11.                     </td> 
12.                     <td> 
13.                         <%# Eval("name") %> 
14.                     </td> 
15.                     <td> 
16.                         <%# Eval("age") %> 
17.                     </td> 
18.                     <td> 
19.                         <asp:Button ID="Delete" runat="server" Text="Delete" /> 
20.                     </td> 
21.                 </tr> 
22.             </ItemTemplate> 
23.         </asp:ListView> 

后台代码

1. protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e) 
2.     { 
3.         if (e.Item.ItemType == ListViewItemType.DataItem) 
4.         { 
5.             (e.Item.FindControl("Delete") as Button).Attributes.Add 
6.                 ("onclick", "javascript:return confirm('你确认要删除：\""  
7.                 + (e.Item.FindControl("id") as Label).Text + "\"吗?')"); 
8.  
9.         } 
10.     } 

4、ListView实现自动编号

1. <asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound"> 
2.             <LayoutTemplate> 
3.                 <table id="Table1" runat="server" border="0" style=""> 
4.                     <tr runat="server" id="itemPlaceholder" /> 
5.                 </table> 
6.             </LayoutTemplate> 
7.             <ItemTemplate> 
8.                 <tr runat="server" id="Tr"> 
9.                     <td> 
10.                         <asp:Label ID="Num" runat="server"></asp:Label> 
11.                     </td> 
12.                     <td> 
13.                         <asp:Label ID="ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label> 
14.                     </td> 
15.                     <td> 
16.                         <%# Eval("name") %> 
17.                     </td> 
18.                     <td> 
19.                         <%# Eval("age") %> 
20.                     </td> 
21.                     <td> 
22.                         <asp:Button ID="Delete" runat="server" Text="Delete" /> 
23.                     </td> 
24.                 </tr> 
25.             </ItemTemplate> 
26.         </asp:ListView> 

后台代码

1. int Num = 1; 
2.     protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e) 
3.     { 
4.         if (e.Item.ItemType == ListViewItemType.DataItem) 
5.         { 
6.             (e.Item.FindControl("Num") as Label).Text = Num.ToString(); 
7.             Num++; 
8.         } 
9.     } 

5、将ListView中的内容以Excel导出

前端代码：

1. <div> 
2.      <asp:ListView ID="ListView1" runat="server"> 
3.         <ItemTemplate> 
4.             <tr> 
5.                 <td id="Td1" runat="server" style=""> 
6.                     <asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' /> 
7.                     <br /> 
8.                 </td> 
9.                 <td> 
10.                     <asp:Label ID="xLabel" runat="server" Text='<%# Eval("Age") %>' /> 
11.                     <br /> 
12.                 </td> 
13.             </tr> 
14.         </ItemTemplate> 
15.         <LayoutTemplate> 
16.             <table id="Table1" runat="server" border="0" style=""> 
17.                 <tr runat="server" id="itemPlaceholder" /> 
18.                  
19.             </table> 
20.         </LayoutTemplate> 
21.     </asp:ListView> 
22.     </div><asp:Button ID="Button1" runat="server" Text="Button"  
23.             onclick="Button1_Click" /> 

后台代码

1. public partial class ListView技巧_Code13 : System.Web.UI.Page 
2. { 
3.     DataAccess da; 
4.     protected void Page_Load(object sender, EventArgs e) 
5.     { 
6.         if (Session["da"] == null) 
7.         { 
8.             da = new DataAccess(); 
9.             Session["da"] = da; 
10.         } 
11.         else 
12.         { 
13.             da = Session["da"] as DataAccess; 
14.         } 
15.         if (!IsPostBack) 
16.         { 
17.             Bind(); 
18.         } 
19.     } 
20.     private void Bind() 
21.     { 
22.         ListView1.DataSource = da.List; 
23.         ListView1.DataBind(); 
24.     } 
25.     private void Export(string FileType, string FileName) 
26.     { 
27.         Response.Charset = "GB2312"; 
28.         Response.ContentEncoding = System.Text.Encoding.UTF7; 
29.         Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode(FileName, Encoding.UTF8).ToString()); 
30.         Response.ContentType = FileType; 
31.         this.EnableViewState = false; 
32.         StringWriter tw = new StringWriter(); 
33.         HtmlTextWriter hw = new HtmlTextWriter(tw); 
34.         ListView1.RenderControl(hw); 
35.         Response.Write(tw.ToString()); 
36.         Response.End(); 
37.     } 
38.  
39.     protected void Button1_Click(object sender, EventArgs e) 
40.     { 
41.         Export("application/ms-excel", "employee.xls"); 
42.  
43.     } 
44. } 

6、高级分页

使用DataPager分页虽然简单但是对于大数据量时性能会成问题，因为这种分页仍然是一次性将数据载入到控件中的，暂时没找到使用DataPager好的解决方案，这里使用一个网上比较流行的开源的.net分页控件AspNetPager，下载地址为: http://www.webdiyer.com/

前端代码：

1. <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %> 
2.  
3. <asp:ListView ID="ListView1" runat="server"> 
4.         <LayoutTemplate> 
5.             <table id="Table1" runat="server" border="0" style=""> 
6.                 <tr runat="server" id="itemPlaceholder" /> 
7.             </table> 
8.         </LayoutTemplate> 
9.         <ItemTemplate> 
10.             <tr> 
11.                 <td> 
12.                     <%#Eval("ID") %> 
13.                 </td> 
14.                 <td> 
15.                     <%# Eval("name") %> 
16.                 </td> 
17.                 <td> 
18.                     <%# Eval("age") %> 
19.                 </td> 
20.             </tr> 
21.         </ItemTemplate> 
22.     </asp:ListView> 
23.     <webdiyer:AspNetPager ID="AspNetPager1" runat="server" UrlPaging="false" ShowPageIndexBox="Always" 
24.         PageIndexBoxType="DropDownList" ShowCustomInfoSection="Left" PageIndexBoxStyle="width:19px" 
25.         CustomInfoHTML="共%PageCount%页，%RecordCount%条记录，当前第%CurrentPageIndex%页，每页显示%PageSize%条" 
26.         HorizontalAlign="Center" PageSize="2" FirstPageText="首页" LastPageText="末页" NextPageText="" 
27.         PrevPageText="前一页" TextAfterPageIndexBox="页" TextBeforePageIndexBox="转到第" EnableTheming="true" 
28.         OnPageChanging="AspNetPager1_PageChanging"> 
29.     </webdiyer:AspNetPager> 

后台代码：

1. public partial class ListView技巧_Code14 : System.Web.UI.Page 
2. { 
3.     DataAccess da; 
4.     protected void Page_Load(object sender, EventArgs e) 
5.     { 
6.         if (Session["da"] == null) 
7.         { 
8.             da = new DataAccess(); 
9.             Session["da"] = da; 
10.         } 
11.         else 
12.         { 
13.             da = Session["da"] as DataAccess; 
14.         } 
15.         if (!IsPostBack) 
16.         { 
17.             Bind(); 
18.         } 
19.     } 
20.     private void Bind() 
21.     { 
22.         ListView1.DataSource = da.GetEmployee(1,2); 
23.         AspNetPager1.RecordCount = da.List.Count; 
24.         ListView1.DataBind(); 
25.     } 
26.  
27.  
28.     protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e) 
29.     { 
30.         ListView1.DataSource = da.GetEmployee(e.NewPageIndex*2-1, 2); 
31.         ListView1.DataBind(); 
32.     } 
33. } 

模拟数据提供代码：

1. public class DataAccess 
2. { 
3.     public List<Employee> List; 
4.     public DataAccess() 
5.     { 
6.         List = new List<Employee>(); 
7.         List = new List<Employee>(); 
8.         Employee e1 = new Employee { ID = 1, Name = "A", Age = 10, Sex = 1 }; 
9.         Employee e2 = new Employee { ID = 3, Name = "M", Age = 30, Sex = 0 }; 
10.         Employee e3 = new Employee { ID = 2, Name = "B", Age = 40, Sex = 1 }; 
11.         Employee e4 = new Employee { ID = 4, Name = "S", Age = 19, Sex = 0 }; 
12.         Employee e5 = new Employee { ID = 6, Name = "X", Age = 18, Sex = 1 }; 
13.         Employee e6 = new Employee { ID = 5, Name = "W", Age = 20, Sex = 0 }; 
14.         List.Add(e1); 
15.         List.Add(e2); 
16.         List.Add(e3); 
17.         List.Add(e4); 
18.         List.Add(e5); 
19.         List.Add(e6); 
20.  
21.     } 
22.     public List<Employee> GetEmployee(int startIndex, int rowsCount) 
23.     { 
24.         List<Employee> listTemp = new List<Employee>(); 
25.         for (int i = startIndex; i < startIndex+rowsCount; i++) 
26.         { 
27.             listTemp.Add(List[i-1]); 
28.         } 
29.         return listTemp; 
30.     } 
31. } 

7、内嵌DetailsView控件

前端代码

1. <asp:ListView ID="ListView1" runat="server" OnSelectedIndexChanging="ListView1_SelectedIndexChanging"> 
2.             <LayoutTemplate> 
3.                 <table id="Table1" runat="server" border="0" style=""> 
4.                     <tr runat="server" id="itemPlaceholder" /> 
5.                 </table> 
6.             </LayoutTemplate> 
7.             <ItemTemplate> 
8.                 <tr> 
9.                     <td> 
10.                         <asp:LinkButton ID="SelectButton" CommandName="Select" runat="server" Text="Details" /> 
11.                     </td> 
12.                     <td> 
13.                         <%#Eval("ID") %> 
14.                     </td> 
15.                     <td> 
16.                         <asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' /> 
17.                     </td> 
18.                     <td> 
19.                         <asp:Label ID="xLabel" runat="server" Text='<%# Eval("age") %>' /> 
20.                     </td> 
21.                 </tr> 
22.             </ItemTemplate> 
23.             <SelectedItemTemplate> 
24.             <tr><td> 
25.                 <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px"> 
26.  
27.                 </asp:DetailsView></td></tr> 
28.             </SelectedItemTemplate> 
29.         </asp:ListView> 

后台代码：

1. public partial class ListView技巧_Code15 : System.Web.UI.Page 
2. { 
3.     DataAccess da; 
4.     protected void Page_Load(object sender, EventArgs e) 
5.     { 
6.         if (Session["da"] == null) 
7.         { 
8.             da = new DataAccess(); 
9.             Session["da"] = da; 
10.         } 
11.         else 
12.         { 
13.             da = Session["da"] as DataAccess; 
14.         } 
15.         if (!IsPostBack) 
16.         { 
17.             Bind(); 
18.         } 
19.     } 
20.  
21.     private void Bind() 
22.     { 
23.         ListView1.DataSource = da.List; 
24.         ListView1.DataBind(); 
25.     } 
26.     protected void ListView1_SelectedIndexChanging(object sender, ListViewSelectEventArgs e) 
27.     { 
28.         ListView1.SelectedIndex = e.NewSelectedIndex; 
29.         
30.          
31.         Bind(); 
32.         DetailsView dv = ListView1.Items[e.NewSelectedIndex].FindControl("DetailsView1") as DetailsView; 
33.         dv.DataSource = da.List; 
34.         dv.DataBind(); 
35.     } 
36. } 

8、内嵌GridView带修改

前端代码

1. <asp:ListView ID="ListView1" runat="server"  
2.             onselectedindexchanging="ListView1_SelectedIndexChanging"> 
3.             <LayoutTemplate> 
4.                 <table id="Table1" runat="server" border="0" style=""> 
5.                     <tr runat="server" id="itemPlaceholder" /> 
6.                 </table> 
7.             </LayoutTemplate> 
8.             <ItemTemplate> 
9.                 <tr> 
10.                 <td> 
11.                     <asp:LinkButton ID="SelectButton" CommandName="Select" runat="server" Text="选择" /> 
12.                     </td> 
13.                     <td> 
14.                         <%#Eval("ID") %> 
15.                     </td> 
16.                     <td> 
17.                         <asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' /> 
18.                     </td> 
19.                     <td> 
20.                         <asp:Label ID="xLabel" runat="server" Text='<%# Eval("age") %>' /> 
21.                     </td> 
22.                      
23.                      
24.                 </tr> 
25.             </ItemTemplate> 
26.             <SelectedItemTemplate> 
27.                  
28.             <tr> 
29.                     <td> 
30.                       <asp:GridView ID="GridView1" runat="server" AutoGenerateEditButton="true" 
31.                        OnRowEditing="GridView1_Editing"  OnRowUpdating="GridView1_Updating"  
32.                         OnRowCancelingEdit="GridView1_CancelingEdit" AutoGenerateColumns="false"> 
33.                         <Columns> 
34.                         <asp:BoundField DataField="ID" ReadOnly="true" /> 
35.                         <asp:BoundField DataField="name" /> 
36.                         <asp:BoundField DataField="Age" /> 
37.    
38.                         </Columns> 
39.                     </asp:GridView> 
40.                     </td> 
41.                     
42.                      
43.                 </tr> 
44.             </SelectedItemTemplate> 
45.        </asp:ListView> 

后台代码

1. DataAccess da; 
2.     protected void Page_Load(object sender, EventArgs e) 
3.     { 
4.         if (Session["da"] == null) 
5.         { 
6.             da = new DataAccess(); 
7.             Session["da"] = da; 
8.         } 
9.         else 
10.         { 
11.             da = Session["da"] as DataAccess; 
12.         } 
13.         if (!IsPostBack) 
14.         { 
15.             Bind(); 
16.         } 
17.     } 
18.  
19.     private void Bind() 
20.     { 
21.         ListView1.DataSource = da.List; 
22.         ListView1.DataBind(); 
23.     } 
24.     protected void ListView1_SelectedIndexChanging(object sender, ListViewSelectEventArgs e) 
25.     { 
26.         ListView1.SelectedIndex = e.NewSelectedIndex; 
27.         Bind(); 
28.         ViewState["SelectedIndex"] = e.NewSelectedIndex; 
29.         int selectIndex = (int)ViewState["SelectedIndex"]; 
30.         GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1"); 
31.         gv.DataSource = da.List; 
32.         gv.DataBind(); 
33.     } 
34.     protected void GridView1_Editing(object sender, GridViewEditEventArgs e) 
35.     { 
36.         int selectIndex = (int)ViewState["SelectedIndex"]; 
37.         GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1"); 
38.         gv.EditIndex = e.NewEditIndex; 
39.         gv.DataSource = da.List; 
40.         gv.DataBind(); 
41.     } 
42.     protected void GridView1_Updating(object sender, GridViewUpdateEventArgs e) 
43.     { 
44.         int selectIndex = (int)ViewState["SelectedIndex"]; 
45.         GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1"); 
46.         string id=gv.Rows[e.RowIndex].Cells.Text; 
47.         string name= ((TextBox)gv.Rows[e.RowIndex].Cells.Controls[0]).Text; 
48.         string Age= ((TextBox)gv.Rows[e.RowIndex].Cells.Controls[0]).Text; 
49.         Employee employee = da.Find(Convert.ToInt32(id)); 
50.         employee.Name = name; 
51.         employee.Age = Convert.ToInt32(Age); 
52.         gv.EditIndex = -1; 
53.         gv.DataSource = da.List; 
54.         gv.DataBind(); 
55.     } 
56.     protected void GridView1_CancelingEdit(object sender, GridViewCancelEditEventArgs e) 
57.     { 
58.         int selectIndex = (int)ViewState["SelectedIndex"]; 
59.         GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1"); 
60.         gv.EditIndex = -1; 
61.         gv.DataSource = da.List; 
62.         gv.DataBind(); 
63.     } 

模拟数据提供和前边一样这里就不贴了