【ASP.NET】第九课——使用DataList控件和Repeater控件绑定数据

知识点：掌握 DataList 控件呈现数据的方法； 掌握 Repeater 控件呈现数据的方法；掌握处理 Repeater 控件中的按钮事件。

 

1、 使用 DataList 控件呈现数据

          在用 ASP.NET 开发 Web 应用程序时，DataList 是非常重要的数据绑定控件。DataList 控件 可用于创建模板化的列表数据，如果重复结构比较复杂，那么建议使用 DataList 和 Repeater 控件，因为 GridView 控件比较适合显示多行多列的表格类数据。

 

示例练习1：DataList控件的使用

要求：制作一个车型展示页面，使用DataList控件。

前提：在【ASP.NET第八课】的基础之上完成。

第一步，添加Web窗体：在VS中打开已有项目【WebApplication7】，右键单击项目名称【WebApplication7】，依次点击【添加】→【Web窗体】，将窗体命名为CarList，然后单击【确定】。

第二步，添加DataList控件：在默认打开的CarList.aspx文件中，从工具箱拖放一个DataList控件到适合的位置。

第三步，绑定数据源：打开CarList.aspx文件，切换到【拆分】视图。

①选中DataList控件后，点击右上角，在弹出的【DataList任务】中，点击【选择数据源】，然后点击下拉箭头，点击【<新建数据源…>】

②在弹出的【数据源配制向导】窗体中，选择默认应用程序从哪里获取数据？【数据库】，为数据源指定ID，使用默认名称，然后点击【确定】

③在弹出的【配制数据源】窗口中，点击【新建连接】按钮

④在弹出的【添加连接】窗口中，输入服务器名，这个一般可以使用英文的点即可。如果无法使用英文点，则需要写数据库按照时的服务器名。然后再下面点选要连接的数据库名称，最后点击【确定】

⑤此时会自动填写一行代码，直接点击【下一步】

⑥单击【下一步】

⑦在【配置数据源】窗口中，设置想要查询的数据，我们这查询Scar表的所有列，然后点击【下一步】

⑧可以点击【测试查询】看一下结果，最后点击【完成】按钮。

⑨注意分析查看此时源代码文件

代码分析：DataList 的模板类型包括：ItemTemplate 用于显示项，AlternatingItemTemplate 用于显 示交替项，EditItemTemplate 用于显示编辑项，同时也支持 HeaderTemplate、FooterTemplate 等模板，这些模板的作用与 GridView 控件中模板列的模板相同。另外，DataList 还支持间隔项 模板 SeparatorTemplate，用于在两个项之间显示。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CarList.aspx.cs" Inherits="WebApplication7.CarList" %>






    


    

        

            
                
                    CarId:
                    
                    

                    CarName:
                    
                    

                    BrandId:
                    
                    

                    Picture:
                    
                    

                    OfficialPrice:
                    
                    

                    Click:
                    
                    



                
            
            
        
    

第四步，运行测试：在CarList.aspx页面单击鼠标右键，然后点击【在浏览器中查看】

我们看到数据源中的所有数据显示出来，但是一行只显示一列数据。

观察一下页面源代码：DataList控件默认输出是一个table表格。

 

第五步，设置列数：给DataList控件添加一个RepeatColumns属性。

 

第六步，设计样式：

①先制作一个样式出来，写div+css实现图中效果。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CarList.aspx.cs" Inherits="WebApplication7.CarList" %>






    
    


    

        

            
汽车名称
            
            

                
编号：
                
官方价格：
                
点击量：
            
        
        

            
                
                    CarId:
                    
                    

                    CarName:
                    
                    

                    BrandId:
                    
                    

                    Picture:
                    
                    

                    OfficialPrice:
                    
                    

                    Click:
                    
                    



                
            
            
        
    

②将写好的样式，套用到DataList控件中。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CarList.aspx.cs" Inherits="WebApplication7.CarList" %>






    
    


    

        

            
                
                   

                            
<%# Eval("CarName") %>
                            " />
                            

                                
编号：<%# Eval("CarId") %>
                                
官方价格：<%# Eval("OfficialPrice") %>
                                
点击量：<%# Eval("Click") %>
                            
                    
                   
                
            
            
        
    

运行测试：

细节调整：如每个产品之间增加一些间隔，可以设置div的margin属性，如margin:0px 10px 20px 0px;

 

 

2、Repeater 控件

         Repeater 控件专门用于精确内容的显示，它也是基于模板的方式，不过它不会自动生成任 何用于布局的代码。Repeater 控件甚至没有一个默认的外观，它完全是通过模板来控制。而且也只能通过源代码视图进行模板的编辑。

2.1  使用 Repeater 控件呈现数据

         GridView 和 DataList 自动生成

标签，但是 Repeater 控件不会自动生成任何 HTML 标签，所以带来了效率上的提升，也使精确展示内容成为可能。

示例练习2：使用 Repeater 控件呈现数据

要求：在当前项目中，新添加一个Web窗体，并使用 Repeater 控件呈现车型列数据。

第一步，添加Web窗体：右键单击项目名称【WebApplication7】，依次点击【添加】→【Web窗体】，将窗体命名为CarListRepeater，然后单击【确定】。

第二步，添加Repeater控件：在默认打开的CarListRepeater.aspx文件中，从工具箱拖放一个Repeater控件到适合的位置。

第三步，绑定数据源：在CarListRepeater.aspx文件中，单击鼠标右键，然后点击【查看代码】，打开后置代码文件CarListRepeater.aspx.cs

        //声明一个方法，绑定数据源
        public void BindRepeater()
        {
            this.Repeater1.DataSource = DBHelper.getDataSet("select * from Scar").Tables[0];
            this.Repeater1.DataBind();
        }

第四步，调用绑定方法：在“CarListRepeater.aspx.cs”文件的Page_Load方法里，调用刚才写的方法。

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindRepeater();
            }
        }

第五步，运行测试：直接将“CarListRepeater.aspx”文件在浏览器中运行测试

页面上似乎没有内容，因为Repeater控件不会自动生成任何用于布局的代码。想要将数据显示出来，我们需要继续操作。

第六步，编辑Repeater控件：回到CarListRepeater.aspx文件，将视图切换到【拆分】模式，选中Repeater控件，注意观察Repeater控件不同于DataList控件，没有编辑模板功能。只能在“源视图里编辑控件模板”。当我们在Repeater控件标签之间，输入尖括号<，会自动提示可以使用标签：

模板属性	说明	标签之间内容出现次数
AlternatingItemTemplate	包含要为数据源中每个数据项都要呈现一次的 HTML 元素和控件。 通常，可以使用此模板为交替项创建不同的外观，例如指定一种与在 ItemTemplate 中指定的颜色不同的背景色。	itemtemplate轮换出现
FooterTemplate	包含在列表的结束处呈现的文本和控件。	标签之间的内容只出现一次。
HeaderTemplate	包含在列表的开始处呈现的文本和控件。	标签之间的内容只出现一次。
ItemTemplate	包含要为数据源中每个数据项都要呈现一次的 HTML 元素和控件。	标签之间的内容循环出现
SeparatorTemplate	包含在每项之间呈现的元素。典型的示例可能是一条直线（使用 hr 元素）。	间隔的内容

①简单编写模板：这里使用HeaderTemplate、ItemTemplate和FooterTemplate

运行测试：注意观察页面，总结规律。Repeater控件默认一行展示，除了用户自定义的模板，不会自动生成任何用于布局 的代码。

②优化模板：比如增加换行标签

③呈现数据：如呈现数据源里的车型名称，使用<%#Eval("CarName") %> 获取

④编写完整样式：呈现数据、美化样式

完整代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CarListRepeater.aspx.cs" Inherits="WebApplication7.CarListRepeater" %>






    
    


    

        

            
                <%--车型展示——头部
--%>
                
                    

                        

                            

                                
                            
                            
                            
<%#Eval("OfficialPrice") %>
                            
<%#Eval("Click") %>
                            
<%#Eval("CarName") %>
                        
                    
                
                <%--展示完毕——尾部--%>
            
        
    

 

 

示例练习3：在页面增加搜索功能

要求：在当前页面中，增加一个搜索功能，允许通过汽车名称搜索

第一步，设计搜索框：在CarListRepeater.aspx文件，设计搜索框，调用控件

        

            请输入：
        

第二步，给按钮添加事件：双击【搜索】按钮，进入事件编写

        protected void Button1_Click(object sender, EventArgs e)
        {
            //获取用户输入的内容
            string name = this.TextBox1.Text;
            //声明查询语句，这里使用like进行模糊查询
            string sql = "select * from Scar where CarName like '%"+name+"%'";
            this.Repeater1.DataSource = DBHelper.getDataSet(sql).Tables[0];
            this.Repeater1.DataBind();
        }

第三步，允许测试：

案例思考：如果用户在搜索框里，什么都没有输入，搜索结果会是什么？为什么会是这样的结果？

 

2.2  在 Repeater 控件中删除数据

         Repeater 控件不支持编辑、删除、排序等功能，所有的事件必须自行编写代码处理。当点 击 Repeater 中的按钮控件时会触发 Repeater 控件的 ItemCommand 事件。为了标识单击的按钮， 可以设置按钮的 CommandName 属性。在进行删除或者编辑操作时，都需要本行车型的编号，可以 设置按钮的 CommandArgument 属性来保存本行的车型编号。

示例练习4：在 Repeater 控件中删除数据