天天看點

asp.net學習之Repeater控件

    Repeater控件和DataList控件,可以用來一次顯示一組資料項。比如,可以用它們顯示一個資料表中的所有行。

    Repeater控件完全由模闆驅動,提供了最大的靈活性,可以任意設定它的輸出格式。DataList控件也由模闆驅動,和Repeater不同的是,DataList預設輸出是HTML表格,DataList将資料源中的記錄輸出為HTML表格一個個的單元格。

    要使用Repeater控件顯示資料,必須建立ItemTemplate。如下所示:

例1:使用ItemTemplate顯示資料

asp.net學習之Repeater控件
asp.net學習之Repeater控件

Code

<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如下所示:、

asp.net學習之Repeater控件
asp.net學習之Repeater控件

<div class="movies">

     <h1>史密斯行動</h1>

</div>

<b>Directed by:</b>Doug Liman

<br />

<b>Description:</b>約翰(布拉德?皮特 Brad Pitt 飾)和

     <h1>暴力街區</h1>

<b>Directed by:</b>Luc Besson

<b>Description:</b>卧虎藏龍而又淩亂不堪的13區… 

    是以,Repeater的靈活性就在這個上面,完全可以自由發揮,想怎麼顯示就怎麼顯示。例如,都可以把它放在Javascript代碼中

asp.net學習之Repeater控件
asp.net學習之Repeater控件

<script type=”text/javascript”>

    <asp:Repeater id=”rptPhotos” Runat=”server”>

         <ItemTemplate>

              <%# Eval(“Name”, "photos.push(‘Photos/{0}’)") %>

         </ItemTemplate>

    </asp:Repeater>

</script> 

   以上,photos是一個Javscript數組對象。Repeater生成的資料,最後就像以下這樣:

asp.net學習之Repeater控件
asp.net學習之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');

        …

    Repeater支援以下5種模闆

      ● ItemTemplate : 對每一個資料項進行格式設定 【Formats each item from the data source.】

      ● AlternatingItemTemplate : 對交替資料項進行格式設定

      ● SeparatorTemplate : 對分隔符進行格式設定

      ● HeaderTemplate : 對頁眉進行格式設定

      ● FooterTemplate : 對頁腳進行格式設定

   以上,英文中使用了Formats item from datasource這樣的話,就說明Repeater控件主要是用來對資料進行Format的,控制資料怎麼樣排列,怎麼樣顯示。

   Repeater必須使用的是Itemtemplate,其它的類型模闆按需添加。

例2:以下通過CSS控制,顯示了一個比較不錯的清單項:

asp.net學習之Repeater控件
asp.net學習之Repeater控件

<style type="text/css">

    html {

        background-color:Silver

    }

    .content {

        width: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">

    <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>

    <AlternatingItemTemplate> <!-- 交錯行 -->

        <tr class="alternating">

            <td><%#Eval("BoxOfficeTotals","{0:c}") %></td>

    </AlternatingItemTemplate>

    <FooterTemplate> <!-- 腳注行 -->

        </table>    <!-- table尾 -->

    </FooterTemplate>

</asp:Repeater>

</div> 

    以上,顯示的樣式如下所示:

asp.net學習之Repeater控件

    Repeater控件有以下事件:

      ● DataBinding : Repeater控件綁定到資料源時觸發

      ● ItemCommand : Repeater控件中的子控件觸發事件時觸發

      ● ItemCreated : 建立Repeater每個項目時觸發 

      ● ItemDataBound : Repeater控件的每個項目綁定資料時觸發

例3:使用Repeater控件的事件支援編輯、更新、删除

=== 背景代碼 ===

asp.net學習之Repeater控件
asp.net學習之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);

            case "Delete":

                DeleteMovie(e);

    /// 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)

        // 填充sqlDataSource的InsertParameters值

        srcMovies.InsertParameters["Title"].DefaultValue = txtTitle.Text;

        srcMovies.InsertParameters["Director"].DefaultValue = txtDirector.Text;

        srcMovies.InsertParameters["InTheaters"].DefaultValue =

        // 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();

=== 前台頁面 ===

asp.net學習之Repeater控件
asp.net學習之Repeater控件

<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>

            <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" />

                 | <asp:LinkButton id="lnkDelete" CommandName="Delete" Text="Delete"

                                  OnClientClick="return confirm(‘Are you sure?');" Runat="server" /></td>

    <FooterTemplate>

            <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>

        </table>

<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>

    </InsertParameters>

    <DeleteParameters>

    </DeleteParameters>

</asp:SqlDataSource>

繼續閱讀