【转贴】ListView使用技巧

最新推荐文章于 2025-08-13 21:05:35 发布
转载 最新推荐文章于 2025-08-13 21:05:35 发布 · 83 阅读 · 0
文章标签：

#前端 #大数据 #ui #ViewUI

本文介绍了ASP.NET中ListView控件的各种实用技巧，包括鼠标悬停时改变行背景色、与下拉菜单结合、实现删除确认对话框等功能，并展示了如何进行高级分页、导出为Excel表格、内嵌DetailsView和GridView等操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【转贴】ListView使用技巧

作者：方明

原贴地址：http://www.cnblogs.com/nuaalfm/archive/2008/09/03/1282468.html

目录：

ListView控件学习系列1-了解ListView控件

ListView控件学习系列2-编辑ListView

ListView控件学习系列3-ListView选择，排序，分页

ListView使用技巧

源码下载

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

ContractedBlock.gif ExpandedBlockStart.gif 前端代码
<asp:ListView ID="ListView1" runat="server" 
            onitemdatabound="ListView1_ItemDataBound">
            <LayoutTemplate>
                <table id="Table1" runat="server" border="0" style="">
                    <tr runat="server" id="itemPlaceholder" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr runat="server" id="Tr">
                    <td>
                        <%#Eval("ID") %>
                    </td>
                    <td>
                        <%# Eval("name") %>
                    </td>
                    <td>
                        <%# Eval("age") %>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>

后台代码： 

ContractedBlock.gif ExpandedBlockStart.gif 后台代码
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
    {
        if (e.Item.ItemType==ListViewItemType.DataItem)
        {
            (e.Item.FindControl("Tr") as HtmlTableRow).Attributes.
                Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#00A9FF'");
            (e.Item.FindControl("Tr") as HtmlTableRow).Attributes.
            Add("onmouseout", "this.style.backgroundColor=c");
        }
    }

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

ContractedBlock.gif ExpandedBlockStart.gif 前端代码
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
            <LayoutTemplate>
                <table id="Table1" runat="server" border="0" style="">
                    <tr runat="server" id="itemPlaceholder" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr runat="server" id="Tr">
                    <td>
                        <asp:Label ID="ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                    </td>
                    <td>
                        <%# Eval("name") %>
                    </td>
                    <td>
                        <%# Eval("age") %>
                    </td>
                    <td>
                        <asp:DropDownList ID="SexDropDownList" runat="server">
                        </asp:DropDownList>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>

模拟数据提供代码： 

后台代码： 

ContractedBlock.gif ExpandedBlockStart.gif 后台代码
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
    {
        DropDownList SexDropDownList = e.Item.FindControl("SexDropDownList") as DropDownList;
        int sex = da.Find(Convert.ToInt32((e.Item.FindControl("ID") as Label).Text)).Sex;
        ListItem listItem;
        if (sex == 0)
        {
            listItem = new ListItem("男", sex.ToString());
        }
        else
        {
            listItem = new ListItem("女", sex.ToString());
        }
        SexDropDownList.Items.Add(listItem);
        SexDropDownList.Enabled = false;
    }

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

ContractedBlock.gif ExpandedBlockStart.gif 前端代码
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
            <LayoutTemplate>
                <table id="Table1" runat="server" border="0" style="">
                    <tr runat="server" id="itemPlaceholder" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr runat="server" id="Tr">
                    <td>
                        <asp:Label ID="ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                    </td>
                    <td>
                        <%# Eval("name") %>
                    </td>
                    <td>
                        <%# Eval("age") %>
                    </td>
                    <td>
                        <asp:Button ID="Delete" runat="server" Text="Delete" />
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>

后台代码

ContractedBlock.gif ExpandedBlockStart.gif 后台代码
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
    {
        if (e.Item.ItemType == ListViewItemType.DataItem)
        {
            (e.Item.FindControl("Delete") as Button).Attributes.Add
                ("onclick", "javascript:return confirm('你确认要删除：\"" 
                + (e.Item.FindControl("id") as Label).Text + "\"吗?')");

        }
    }

4、ListView实现自动编号

ContractedBlock.gifExpandedBlockStart.gif前端代码
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
            <LayoutTemplate>
                <table id="Table1" runat="server" border="0" style="">
                    <tr runat="server" id="itemPlaceholder" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr runat="server" id="Tr">
                    <td>
                        <asp:Label ID="Num" runat="server"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                    </td>
                    <td>
                        <%# Eval("name") %>
                    </td>
                    <td>
                        <%# Eval("age") %>
                    </td>
                    <td>
                        <asp:Button ID="Delete" runat="server" Text="Delete" />
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>

后台代码 

ContractedBlock.gifExpandedBlockStart.gif后台代码
int Num = 1;
    protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
    {
        if (e.Item.ItemType == ListViewItemType.DataItem)
        {
            (e.Item.FindControl("Num") as Label).Text = Num.ToString();
            Num++;
        }
    }

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

前端代码：

ContractedBlock.gifExpandedBlockStart.gif前端代码
<div>
     <asp:ListView ID="ListView1" runat="server">
        <ItemTemplate>
            <tr>
                <td id="Td1" runat="server" style="">
                    <asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' />
                    <br />
                </td>
                <td>
                    <asp:Label ID="xLabel" runat="server" Text='<%# Eval("Age") %>' />
                    <br />
                </td>
            </tr>
        </ItemTemplate>
        <LayoutTemplate>
            <table id="Table1" runat="server" border="0" style="">
                <tr runat="server" id="itemPlaceholder" />
                
            </table>
        </LayoutTemplate>
    </asp:ListView>
    </div><asp:Button ID="Button1" runat="server" Text="Button" 
            onclick="Button1_Click" />

 

后台代码

 

ContractedBlock.gifExpandedBlockStart.gif后台代码
public partial class ListView技巧_Code13 : System.Web.UI.Page
{
    DataAccess da;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["da"] == null)
        {
            da = new DataAccess();
            Session["da"] = da;
        }
        else
        {
            da = Session["da"] as DataAccess;
        }
        if (!IsPostBack)
        {
            Bind();
        }
    }
    private void Bind()
    {
        ListView1.DataSource = da.List;
        ListView1.DataBind();
    }
    private void Export(string FileType, string FileName)
    {
        Response.Charset = "GB2312";
        Response.ContentEncoding = System.Text.Encoding.UTF7;
        Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode(FileName, Encoding.UTF8).ToString());
        Response.ContentType = FileType;
        this.EnableViewState = false;
        StringWriter tw = new StringWriter();
        HtmlTextWriter hw = new HtmlTextWriter(tw);
        ListView1.RenderControl(hw);
        Response.Write(tw.ToString());
        Response.End();
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Export("application/ms-excel", "employee.xls");

    }
}

6、高级分页

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

前端代码：  

ContractedBlock.gifExpandedBlockStart.gif前端代码
 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>

<asp:ListView ID="ListView1" runat="server">
        <LayoutTemplate>
            <table id="Table1" runat="server" border="0" style="">
                <tr runat="server" id="itemPlaceholder" />
            </table>
        </LayoutTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <%#Eval("ID") %>
                </td>
                <td>
                    <%# Eval("name") %>
                </td>
                <td>
                    <%# Eval("age") %>
                </td>
            </tr>
        </ItemTemplate>
    </asp:ListView>
    <webdiyer:AspNetPager ID="AspNetPager1" runat="server" UrlPaging="false" ShowPageIndexBox="Always"
        PageIndexBoxType="DropDownList" ShowCustomInfoSection="Left" PageIndexBoxStyle="width:19px"
        CustomInfoHTML="共%PageCount%页，%RecordCount%条记录，当前第%CurrentPageIndex%页，每页显示%PageSize%条"
        HorizontalAlign="Center" PageSize="2" FirstPageText="首页" LastPageText="末页" NextPageText="下一页"
        PrevPageText="前一页" TextAfterPageIndexBox="页" TextBeforePageIndexBox="转到第" EnableTheming="true"
        OnPageChanging="AspNetPager1_PageChanging">
    </webdiyer:AspNetPager>

 

后台代码：

 

ContractedBlock.gifExpandedBlockStart.gif后台代码
public partial class ListView技巧_Code14 : System.Web.UI.Page
{
    DataAccess da;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["da"] == null)
        {
            da = new DataAccess();
            Session["da"] = da;
        }
        else
        {
            da = Session["da"] as DataAccess;
        }
        if (!IsPostBack)
        {
            Bind();
        }
    }
    private void Bind()
    {
        ListView1.DataSource = da.GetEmployee(1,2);
        AspNetPager1.RecordCount = da.List.Count;
        ListView1.DataBind();
    }


    protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
    {
        ListView1.DataSource = da.GetEmployee(e.NewPageIndex*2-1, 2);
        ListView1.DataBind();
    }
}

 

模拟数据提供代码：

 

ContractedBlock.gifExpandedBlockStart.gif模拟数据提供代码
public class DataAccess
{
    public List<Employee> List;
    public DataAccess()
    {
        List = new List<Employee>();
        List = new List<Employee>();
        Employee e1 = new Employee { ID = 1, Name = "A", Age = 10, Sex = 1 };
        Employee e2 = new Employee { ID = 3, Name = "M", Age = 30, Sex = 0 };
        Employee e3 = new Employee { ID = 2, Name = "B", Age = 40, Sex = 1 };
        Employee e4 = new Employee { ID = 4, Name = "S", Age = 19, Sex = 0 };
        Employee e5 = new Employee { ID = 6, Name = "X", Age = 18, Sex = 1 };
        Employee e6 = new Employee { ID = 5, Name = "W", Age = 20, Sex = 0 };
        List.Add(e1);
        List.Add(e2);
        List.Add(e3);
        List.Add(e4);
        List.Add(e5);
        List.Add(e6);

    }
    public List<Employee> GetEmployee(int startIndex, int rowsCount)
    {
        List<Employee> listTemp = new List<Employee>();
        for (int i = startIndex; i < startIndex+rowsCount; i++)
        {
            listTemp.Add(List[i-1]);
        }
        return listTemp;
    }
}

 

7、内嵌DetailsView控件

前端代码

ContractedBlock.gifExpandedBlockStart.gif前端代码
<asp:ListView ID="ListView1" runat="server" OnSelectedIndexChanging="ListView1_SelectedIndexChanging">
            <LayoutTemplate>
                <table id="Table1" runat="server" border="0" style="">
                    <tr runat="server" id="itemPlaceholder" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:LinkButton ID="SelectButton" CommandName="Select" runat="server" Text="Details" />
                    </td>
                    <td>
                        <%#Eval("ID") %>
                    </td>
                    <td>
                        <asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' />
                    </td>
                    <td>
                        <asp:Label ID="xLabel" runat="server" Text='<%# Eval("age") %>' />
                    </td>
                </tr>
            </ItemTemplate>
            <SelectedItemTemplate>
            <tr><td>
                <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px">

                </asp:DetailsView></td></tr>
            </SelectedItemTemplate>
        </asp:ListView>

 

后台代码：

 

ContractedBlock.gifExpandedBlockStart.gif后台代码
public partial class ListView技巧_Code15 : System.Web.UI.Page
{
    DataAccess da;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["da"] == null)
        {
            da = new DataAccess();
            Session["da"] = da;
        }
        else
        {
            da = Session["da"] as DataAccess;
        }
        if (!IsPostBack)
        {
            Bind();
        }
    }

    private void Bind()
    {
        ListView1.DataSource = da.List;
        ListView1.DataBind();
    }
    protected void ListView1_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
    {
        ListView1.SelectedIndex = e.NewSelectedIndex;
       
        
        Bind();
        DetailsView dv = ListView1.Items[e.NewSelectedIndex].FindControl("DetailsView1") as DetailsView;
        dv.DataSource = da.List;
        dv.DataBind();
    }
}

 

8、内嵌GridView带修改

前端代码

 

 

ContractedBlock.gifExpandedBlockStart.gif前端代码
<asp:ListView ID="ListView1" runat="server" 
            onselectedindexchanging="ListView1_SelectedIndexChanging">
            <LayoutTemplate>
                <table id="Table1" runat="server" border="0" style="">
                    <tr runat="server" id="itemPlaceholder" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                <td>
                    <asp:LinkButton ID="SelectButton" CommandName="Select" runat="server" Text="选择" />
                    </td>
                    <td>
                        <%#Eval("ID") %>
                    </td>
                    <td>
                        <asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' />
                    </td>
                    <td>
                        <asp:Label ID="xLabel" runat="server" Text='<%# Eval("age") %>' />
                    </td>
                    
                    
                </tr>
            </ItemTemplate>
            <SelectedItemTemplate>
                
            <tr>
                    <td>
                      <asp:GridView ID="GridView1" runat="server" AutoGenerateEditButton="true"
                       OnRowEditing="GridView1_Editing"  OnRowUpdating="GridView1_Updating" 
                        OnRowCancelingEdit="GridView1_CancelingEdit" AutoGenerateColumns="false">
                        <Columns>
                        <asp:BoundField DataField="ID" ReadOnly="true" />
                        <asp:BoundField DataField="name" />
                        <asp:BoundField DataField="Age" />
  
                        </Columns>
                    </asp:GridView>
                    </td>
                   
                    
                </tr>
            </SelectedItemTemplate>
       </asp:ListView>

 

后台代码

 

ContractedBlock.gifExpandedBlockStart.gif后台代码
DataAccess da;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["da"] == null)
        {
            da = new DataAccess();
            Session["da"] = da;
        }
        else
        {
            da = Session["da"] as DataAccess;
        }
        if (!IsPostBack)
        {
            Bind();
        }
    }

    private void Bind()
    {
        ListView1.DataSource = da.List;
        ListView1.DataBind();
    }
    protected void ListView1_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
    {
        ListView1.SelectedIndex = e.NewSelectedIndex;
        Bind();
        ViewState["SelectedIndex"] = e.NewSelectedIndex;
        int selectIndex = (int)ViewState["SelectedIndex"];
        GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1");
        gv.DataSource = da.List;
        gv.DataBind();
    }
    protected void GridView1_Editing(object sender, GridViewEditEventArgs e)
    {
        int selectIndex = (int)ViewState["SelectedIndex"];
        GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1");
        gv.EditIndex = e.NewEditIndex;
        gv.DataSource = da.List;
        gv.DataBind();
    }
    protected void GridView1_Updating(object sender, GridViewUpdateEventArgs e)
    {
        int selectIndex = (int)ViewState["SelectedIndex"];
        GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1");
        string id=gv.Rows[e.RowIndex].Cells[1].Text;
        string name= ((TextBox)gv.Rows[e.RowIndex].Cells[2].Controls[0]).Text;
        string Age= ((TextBox)gv.Rows[e.RowIndex].Cells[3].Controls[0]).Text;
        Employee employee = da.Find(Convert.ToInt32(id));
        employee.Name = name;
        employee.Age = Convert.ToInt32(Age);
        gv.EditIndex = -1;
        gv.DataSource = da.List;
        gv.DataBind();
    }
    protected void GridView1_CancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        int selectIndex = (int)ViewState["SelectedIndex"];
        GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1");
        gv.EditIndex = -1;
        gv.DataSource = da.List;
        gv.DataBind();
    }

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

 

未完待续... ...

WPF DataGrid、ListView 简单绑定
imJaron的博客
04-13 910
DataGrid运行效果： xaml 代码： DataGridName= dtgData ItemsSource= {Binding} AutoGenerateColumns= False DataGrid.Columns DataGridTextColumnBinding= {BindingPath=id} Header= ID HeaderStringFormat= id / DataGrid
C# DataGridView控件与ListView控件的对比学习（一）：DataGridView控件学习
热门推荐
zs过客的小屋
12-22 1万+
一、DataGridView控件介绍：     1、定义：         DataGridView控件是一种方便用户浏览和编辑来自不同类型数据源的数据的一种表格式控件。从这个定义中，我们可以获取几点有关DataGridView控件的特性。首先，DataGridView控件对于获取的数据有两个重要的功能：第一，浏览；第二，编辑。当然，重点学习的肯定是“编辑”这一功能；其次，DataGr
ListView使用技巧
weixin_34259232的博客
09-03 115
目录：  ListView控件学习系列1-了解ListView控件 ListView控件学习系列2-编辑ListView ListView控件学习系列3-ListView选择，排序，分页 ListView使用技巧   源码下载   作者 1、鼠标移到ListView某一行时改变该行的背景色方法 前端代码：   前端代码 &lt;asp:ListView ID="Lis...
OnItemDataBound事件的用法
08-22 1万+
OnItemDataBound事件是在项被绑定数据后触发的事件
【转贴】ListView控件学习系列2-编辑ListView
weixin_30246221的博客
05-10 111
【转贴】ListView控件学习系列2-编辑ListView 作者：方明 原贴地址：http://www.cnblogs.com/nuaalfm/archive/2008/09/02/1281885.html< p> 目录： ListView控件学习系列1-了解ListView控件 ListView控件学习系列2-编辑ListView ListView控件学习系列...
【转贴】ListView控件学习系列3-ListView选择，排序，分页
weixin_30367945的博客
05-10 73
【转贴】ListView控件学习系列3-ListView选择，排序，分页 作者：Lance 原贴地址：http://www.cnblogs.com/nuaalfm/archive/2008/09/02/1282437.html 目录： ListView控件学习系列1-了解ListView控件 ListView控件学习系列2-编辑ListView ...
Android ListView使用技巧
08-14
本篇文章将深入探讨几个关键的Android ListView使用技巧，帮助你提升应用的用户体验和性能。 1. **适配器Adapter的使用** ListView的核心在于适配器，它负责将数据集转化为ListView可显示的视图。常见的适配器有...
ListView的使用技巧
12-08
本文将详细介绍ListView的使用技巧，包括如何优化性能、拓展功能以及常见应用场景。 一、ListView的基本使用 1. 布局文件：在XML布局文件中，我们需要创建一个ListView，并设置其ID，例如：`android:id="@+id/...
基于Android ListView之加载使用技巧
01-20
在Android开发中，ListView是一...通过以上讨论，我们可以看出，ListView的加载使用技巧不仅涉及UI设计，还涵盖了性能优化和用户体验。理解并熟练运用这些技巧，能够使Android应用在数据展示和用户体验方面更上一层楼。
第四章：ListView使用技巧.md
07-21
# 第四章：ListView使用技巧 ## 一、ListView简介及应用场景 ### 1. ListView概念 `ListView` 是 Android 开发中一个非常重要的控件，用于展示一系列数据（如列表项）。它允许用户通过滚动操作查看数据集合，并且...
使用gridview时出现"无法确定 MetaTable。无法为数据源“SqlDataSource1”确定 MetaTable,且无法从所...."错误...
weixin_30338461的博客
04-02 3803
修改你的查询，删除，更新语句。 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MySchoolConnectionString %>" SelectCommand="SELECT * FROM [Student]" De...
electron进程间通信- 从渲染进程到主进程
最新发布
唐璜Taro的博客
08-13 806
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
基于SpringBoot校园管理系统
2501_90968670的博客
08-13 1020
校园管理系统是一个基于Spring Boot + Vue.js的全栈应用，专注于高校内部的多角色协作管理。系统实现了院校管理、单位管理、用户管理、通知推送、投票管理等功能模块，满足管理员、院校管理员、普通用户三类角色的不同操作需求。核心目标是提升校园管理效率，实现通知精准推送与数据可视化统计。
掌握ListView使用技巧与优化方法
对于初学者和专业开发者而言，了解和掌握ListView的使用技巧，能够极大提升应用性能，增强用户体验。 首先，我们来探讨ListView的常用优化技巧。由于ListView是用于显示大量数据项的控件，因此优化其性能尤为重要。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值