【转贴】ListView控件学习系列1-了解ListView控件

【转贴】ListView控件学习系列1-了解ListView控件

作者：方明

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

目录：

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

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

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

ListView使用技巧

源码下载

当你编写以用户为中心的应用程序时，总需要某种形式的数据集，起码来说，你需要从一个数据源如关系数据库或XML文件检索数据，在显示给用户之前先要进行格式化，尽管ASP.NET之前的版本就提供了以数据为中心的显示控件如GridView，但 GridView的输出仍然是限制在一个table组件中的，而且这些控件缺乏专业Web开发人员需要的可自定义和可扩展特性，有时候你想要完全控制由数据绑定控件产生的HTML标记的外观，这正是ListView控件的优势，ListView控件不是使用额外的标记来封装它的输出内容，而是靠你指定的精确的HTML描述，使用ListView控件内置的模板就可以指定精确的标记，它提供了非常优秀的自定义和扩展特性，使用这些特性，你可以以任何格式显示数据，使用模板和样式，同时用最少的代码执行CURD（创建、读取、更新、删除）操作。

我们先看一下ListView支持的模板

ListView演示前端代码
<asp:ListView ID="ListView1" runat="server">
        <ItemTemplate>
            <tr>
                <td 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 runat="server" border="0" style="">
                <tr runat="server" id="itemPlaceholder" />
            table>
        LayoutTemplate>
    asp:ListView>

后台代码：

ListView演示后台代码
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Employee e1 = new Employee { Name = "lfm1", Age = 30 };
        Employee e2 = new Employee { Name = "lfm2", Age = 30 };
        Employee e3 = new Employee { Name = "lfm3", Age = 30};
        Employee e4 = new Employee { Name = "lfm4", Age = 30};
        Employee e5 = new Employee { Name = "lfm5", Age = 30};
        Employee e6 = new Employee { Name = "lfm6", Age = 30 };
        Employee[] employees = { e1,e2,e3,e4,e5,e6};
        ListView1.DataSource = employees;
        ListView1.DataBind();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        
    }
}
class Employee
{
    public string Name { get; set; }
    public int Age { get; set; }
    public int Sex { get; set; }
}

浏览器中得到的代码为：

浏览器中显示的代码
<table border="0" style="">
        <tr>
            <td style="">
                <span id="ListView1_ctrl0_idLabel">lfm1span>
                <br />
            td>
            <td>
                <span id="ListView1_ctrl0_xLabel">30span>
                <br />
            td>
        tr>
        <tr>
            <td style="">
                 var cpro_id = "u6885494";