zoukankan      html  css  js  c++  java
  • Repeater控件

     Repeater控件和DataList控件,可以用来一次显示一组数据项。比如,可以用它们显示一个数据表中的所有行。 
        Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出格式。DataList控件也由模板驱动,和Repeater不同的是,DataList默认输出是HTML表格,DataList将数据源中的记录输出为HTML表格一个个的单元格。

    1. Repeater控件显示数据

        要使用Repeater控件显示数据,必须创建ItemTemplate。如下所示: 
    例1:使用ItemTemplate显示数据 


    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <ItemTemplate>
            <div class="movies">
                <h1><%#Eval("Title") %></h1>
            </div>
            <b>Directed by:</b><%#Eval("Director") %>
            <br />
            <b>Description:</b><%#Eval("Description") %>
        </ItemTemplate>
    </asp:Repeater> 

        以上代码,通过浏览器可以看到,.net不会改变里面的结构,模板里面怎么排列,数据显示也怎么样显示。它的HTML如下所示:、 


    <div class="movies">
         <h1>史密斯行动</h1>
    </div>
    <b>Directed by:</b>Doug Liman
    <br />
    <b>Description:</b>约翰(布拉德?皮特 Brad Pitt 饰)和
    <div class="movies">
         <h1>暴力街区</h1>
    </div>
    <b>Directed by:</b>Luc Besson
    <br />
    <b>Description:</b>卧虎藏龙而又凌乱不堪的13区… 

        所以,Repeater的灵活性就在这个上面,完全可以自由发挥,想怎么显示就怎么显示。例如,都可以把它放在Javascript代码中 


    <script type=”text/javascript”>
        <asp:Repeater id=”rptPhotos” Runat=”server”>
             <ItemTemplate>
                  <%# Eval(“Name”, "photos.push(‘Photos/{0}’)") %>
             </ItemTemplate>
        </asp:Repeater>
    </script> 

       以上,photos是一个Javscript数组对象。Repeater生成的数据,最后就像以下这样: 


    <script type="text/javascript">
            photos.push('Photos/1.jpg');
            photos.push('Photos/2.jpg');
            photos.push('Photos/3.jpg');
            photos.push('Photos/4.jpg');
            …
    </script> 

     

    2. Repeater中使用模板

        Repeater支持以下5种模板 
          ● ItemTemplate : 对每一个数据项进行格式设置 【Formats each item from the data source.】 
          ● AlternatingItemTemplate : 对交替数据项进行格式设置 
          ● SeparatorTemplate : 对分隔符进行格式设置 
          ● HeaderTemplate : 对页眉进行格式设置 
          ● FooterTemplate : 对页脚进行格式设置 
       以上,英文中使用了Formats item from datasource这样的话,就说明Repeater控件主要是用来对数据进行Format的,控制数据怎么样排列,怎么样显示。 
       Repeater必须使用的是Itemtemplate,其它的类型模板按需添加。 
    例2:以下通过CSS控制,显示了一个比较不错的列表项: 


    <style type="text/css">
        html {
            background-color:Silver
        }
        .content {
            600px;
            border:soild 1px black;
            background-color:White;
        }
        .movies {
            border-collapse:collapse;
        }
        .movies th,.movies td {
            padding:10px;
            border-bottom:1px solid black;
        }
        .alternating {
            background-color:#eeeeee;
            }
    </style>

    <div class="content">
    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate> <!-- 显示头部 -->
            <table class="movies"> <!-- table头部声明-->
             <tr>
                <th>Movie Title</th>
                <th>Movie Director</th>
                <th>Box Office Totals</th>
             </tr>
        </HeaderTemplate>
        <ItemTemplate>  <!-- 数据行 -->
            <tr>
                <td><%#Eval("Title") %></td>
                <td><%#Eval("Director") %></td>
                <td><%#Eval("BoxOfficeTotals","{0:c}") %></td> <!-- 格式化为货币形式 -->
            </tr>
        </ItemTemplate>
        <AlternatingItemTemplate> <!-- 交错行 -->
            <tr class="alternating">
                <td><%#Eval("Title") %></td>
                <td><%#Eval("Director") %></td>
                <td><%#Eval("BoxOfficeTotals","{0:c}") %></td>
            </tr>
        </AlternatingItemTemplate>
        <FooterTemplate> <!-- 脚注行 -->
            </table>    <!-- table尾 -->
        </FooterTemplate>
    </asp:Repeater>
    </div> 

        以上,显示的样式如下所示: 

    repeater 

    3. Repeater控件的事件处理

        Repeater控件有以下事件: 
          ● DataBinding : Repeater控件绑定到数据源时触发 
          ● ItemCommand : Repeater控件中的子控件触发事件时触发 
          ● ItemCreated : 创建Repeater每个项目时触发  
          ● ItemDataBound : Repeater控件的每个项目绑定数据时触发 
    例3:使用Repeater控件的事件支持编辑、更新、删除 
    === 后台代码 === 


    <script runat=”server”>
        // The name of the primary key column
        string DataKeyName = "Id";

        /// 把每个列的ID存储在ViewState["Keys"]对象中,ViewState["Keys"]是一个HashTable对象。
        Hashtable Keys
        {
            get
            {
                if (ViewState["Keys"] == null)
                    ViewState["Keys"] = new Hashtable();
                return (Hashtable)ViewState["Keys"];
            }
        }

        /// Repeater控件绑定到数据源时触发
        /// 每次更新,删除,增加后,都会触发这个事件,Keys中的值都会被清除。
        /// 在ItemDataBound事件发生时,被新的值填充
        protected void rptMovies_DataBinding(object sender, EventArgs e)
        {
            Keys.Clear();
        }

        /// 每个项目绑定数据时触发
        protected void rptMovies_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            // 如果是数据列,把ID列取出来,加入到ViewState["Keys"]中
            // DataBinder.Eval是在运行时计算数据绑定表达式。这样的用法要记住.
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==ListItemType.AlternatingItem)
            {
                Keys.Add(e.Item.ItemIndex, DataBinder.Eval(e.Item.DataItem, "Id"));
            }
        }

        /// 当点击Update,Insert,Delete按钮时触发
        protected void rptMovies_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            switch (e.CommandName)
            {
                case "Update":
                    UpdateMovie(e);
                    break;
                case "Insert":
                    InsertMovie(e);
                    break;
                case "Delete":
                    DeleteMovie(e);
                    break;
            }
        }
        /// Update a movie record
        protected void UpdateMovie(RepeaterCommandEventArgs e)
        {
            // 从一个数据项中获得相应的控件
            TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle");
            TextBox txtDirector = (TextBox)e.Item.FindControl("txtDirector");
            CheckBox chkInTheaters = (CheckBox)e.Item.FindControl("chkInTheaters");
            // 填充sqlDataSource的UpdateParameters值
            srcMovies.UpdateParameters["Id"].DefaultValue =
            Keys[e.Item.ItemIndex].ToString();
            srcMovies.UpdateParameters["Title"].DefaultValue = txtTitle.Text;
            srcMovies.UpdateParameters["Director"].DefaultValue = txtDirector.Text;
            srcMovies.UpdateParameters["InTheaters"].DefaultValue =
            chkInTheaters.Checked.ToString();
            // 进行Update
            srcMovies.Update();
        }

        /// Insert a movie record
        protected void InsertMovie(RepeaterCommandEventArgs e)
        {
            // 从一个数据项中获得相应的控件
            TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle");
            TextBox txtDirector = (TextBox)e.Item.FindControl("txtDirector");
            CheckBox chkInTheaters = (CheckBox)e.Item.FindControl("chkInTheaters");
            // 填充sqlDataSource的InsertParameters值
            srcMovies.InsertParameters["Title"].DefaultValue = txtTitle.Text;
            srcMovies.InsertParameters["Director"].DefaultValue = txtDirector.Text;
            srcMovies.InsertParameters["InTheaters"].DefaultValue =
            chkInTheaters.Checked.ToString();
            // Fire the InsertCommand
            srcMovies.Insert();
        }

        /// Delete a movie record
        protected void DeleteMovie(RepeaterCommandEventArgs e)
        {
            // 设置sqlDataSource的DeleteParameters值
            srcMovies.DeleteParameters["Id"].DefaultValue =  Keys[e.Item.ItemIndex].ToString();
            // Fire the DeleteCommand
            srcMovies.Delete();
        }
    </script> 

    === 前台页面 ===


    <asp:Repeater id="rptMovies" DataSourceID="srcMovies" Runat="server"
          OnItemCommand="rptMovies_ItemCommand" OnItemDataBound="rptMovies_ItemDataBound" OnDataBinding="rptMovies_DataBinding">
        <HeaderTemplate>
            <table class="movies">
            <tr> <th>Title</th><th>Director</th><th>In Theaters</th> </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td><asp:TextBox id="txtTitle" Text='<%#Eval("Title")%>' Runat="server" /></td>           
                <td><asp:TextBox id="txtDirector" Text='<%#Eval("Director")%>' Runat="server" /></td>
                <td><asp:CheckBox id="chkInTheaters" Checked='<%#Eval("InTheaters")%>'Runat="server" /></td>
                <td><asp:LinkButton id="lnkUpdate" CommandName="Update" Text="Update" Runat="server" />
                    &nbsp;|&nbsp;<asp:LinkButton id="lnkDelete" CommandName="Delete" Text="Delete"
                                      OnClientClick="return confirm(‘Are you sure?');" Runat="server" /></td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            <tr>
                <td><asp:TextBox id="txtTitle" Runat="server" /></td>
                <td><asp:TextBox id="txtDirector" Runat="server" /></td>
                <td><asp:CheckBox id="chkInTheaters" Runat="server" /></td>
                <td><asp:LinkButton id="lnkInsert" CommandName="Insert" Text="Insert" Runat="server" /></td>
            </tr>
            </table>
        </FooterTemplate>
    </asp:Repeater>

    <asp:SqlDataSource id="srcMovies" ConnectionString="<%$ ConnectionStrings:Movies %>"
        SelectCommand="SELECT Id,Title,Director,InTheaters FROM Movies"
        UpdateCommand="UPDATE Movies SET Title=@Title,Director=@Director,InTheaters=@InTheaters WHERE Id=@Id"
        InsertCommand="INSERT Movies(Title,Director,InTheaters) VALUES(@Title,@Director,@InTheaters)"
        DeleteCommand="DELETE Movies WHERE Id=@Id" Runat="server">
        <UpdateParameters>
            <asp:Parameter Name="Id" />
            <asp:Parameter Name="Title" />
            <asp:Parameter Name="Director" />
            <asp:Parameter Name="InTheaters" />
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="Title" />
            <asp:Parameter Name="Director" />
            <asp:Parameter Name="InTheaters" />
        </InsertParameters>
        <DeleteParameters>
            <asp:Parameter Name="Id" />
        </DeleteParameters>
    </asp:SqlDataSource>

    repeater控件灵活性很大,不止可以循环表格,还可以循环div等其他内容:

    例如循环div:

    代码:

            <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate></HeaderTemplate>
                <ItemTemplate>
                    <div class="div1"><%#Eval("NickName") %></div>
                </ItemTemplate>
                <FooterTemplate></FooterTemplate>
            </asp:Repeater>

    repeater的Command用法:
    1、ItemCommand事件 - Repeater中所有可以触发事件的控件,都会来执行这一个事件

    2、CommandName - 随意的起名,在后台事件中按照这个名字来区分你按下的是哪一个功能按钮

    3、CommandArgument - 事件数据,通常放置主键值,在后台使用 e.CommandArgument来获取主键数据

  • 相关阅读:
    使用Python操作MySQL数据库
    SQL server数据库语句
    SQL server数据库
    实施工程师
    Vue外卖项目
    每日思考记录(12)
    Vue核心知识点
    jQuery快速入门
    js
    css2
  • 原文地址:https://www.cnblogs.com/bosamvs/p/5689381.html
Copyright © 2011-2022 走看看