如何在ASP.NET中使用Repeater控件進行分頁？

Question

<asp:Repeater ID="RepCourse" runat="server"> 

    <ItemTemplate> 

    <div style="width:400px"></div> 

    <div class="course" style="float: left; margin-left: 100px; margin-top: 100px"> 

     <div class="image"> 
     <asp:Image ID="imgteacher" runat="server" Height="150" Width="248" ImageUrl='<%# "ShowImage.ashx?id="+ DataBinder.Eval(Container.DataItem, "CourseID") %>'/> 
     </div> 

     <div style="margin-left: 3px; width: 250px"> 
     <div class="name"> 
      <a href="#"><asp:Label runat="server" ID="lblname" Text='<%#Eval("CourseName") %>'></asp:Label></a> 
     </div> 
     <div style="height: 13px"></div> 
     <div id="teacher"> 
      <a href="#"><%#Eval("UserName") %> </a> 
     </div> 
     </div> 

     <div style="height: 4px"></div> 

     <div class="date"> 
     <div id="datebegin"> 
      <asp:Label ID="lbldatebegin" runat="server" Text='<%#Eval("BeginDate") %>'></asp:Label> 
     </div> 
     <div id="dateend"> 
      <asp:Label ID="lbldateend" runat="server" Text='<%#Eval("ClosingDate") %>'></asp:Label> 
     </div> 
     </div> 

    </div> 

    </ItemTemplate> 

</asp:Repeater> 

在我的項目Repeater Control工作正常。現在我需要分頁來替換這些數據。但我沒有任何關於此的信息。可能是有人給我這個問題的建議。

如下圖所示。

Answer 1

有沒有內置Repeater控件中的分頁，但基於this文章，你可以通過創建頁面另一個Repeater控件實現Repeater控件中的分頁和使用PagedDataSource，因爲它的來源。

首先，將它添加到您的標記：

<div style="overflow: hidden;"> 

<asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand"> 
<ItemTemplate> 
    <asp:LinkButton ID="btnPage" 
    style="padding:8px;margin:2px;background:#ffa100;border:solid 1px #666;font:8pt tahoma;" 
    CommandName="Page" CommandArgument="<%# Container.DataItem %>" 
    runat="server" ForeColor="White" Font-Bold="True"> 
    <%# Container.DataItem %> 
    </asp:LinkButton> 
</ItemTemplate> 
</asp:Repeater> 

</div> 

接下來，在代碼中添加以下屬性後面：

//This property will contain the current page number 
public int PageNumber 
{ 
    get 
    { 
     if (ViewState["PageNumber"] != null) 
     { 
      return Convert.ToInt32(ViewState["PageNumber"]); 
     } 
     else 
     { 
      return 0; 
     } 
    } 
    set { ViewState["PageNumber"] = value; } 
} 

最後添加以下方法：

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

private void BindRepeater() 
{ 
    //Do your database connection stuff and get your data 
    SqlConnection cn = new SqlConnection(yourConnectionString); 
    SqlCommand cmd = new SqlCommand(); 
    cmd.Connection = cn; 
    SqlDataAdapter ad = new SqlDataAdapter(cmd); 
    cmd.CommandText = "Select * from YourTable"; 

    //save the result in data table 
    DataTable dt = new DataTable(); 
    ad.SelectCommand = cmd; 
    ad.Fill(dt); 

    //Create the PagedDataSource that will be used in paging 
    PagedDataSource pgitems = new PagedDataSource(); 
    pgitems.DataSource = dt.DefaultView; 
    pgitems.AllowPaging = true; 

    //Control page size from here 
    pgitems.PageSize = 4; 
    pgitems.CurrentPageIndex = PageNumber; 
    if (pgitems.PageCount > 1) 
    { 
     rptPaging.Visible = true; 
     ArrayList pages = new ArrayList(); 
     for (int i = 0; i <= pgitems.PageCount - 1; i++) 
     { 
      pages.Add((i + 1).ToString()); 
     } 
     rptPaging.DataSource = pages; 
     rptPaging.DataBind(); 
    } 
    else 
    { 
     rptPaging.Visible = false; 
    } 

    //Finally, set the datasource of the repeater 
    RepCourse.DataSource = pgitems; 
    RepCourse.DataBind(); 
} 

//This method will fire when clicking on the page no link from the pager repeater 
protected void rptPaging_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e) 
{ 
    PageNumber = Convert.ToInt32(e.CommandArgument) - 1; 
    BindRepeater(); 
} 

請試試看，如果您遇到任何問題，請通知我。

編輯：替代的解決方案

另一個極好的解決方案可以發現Here，該解決方案包括的頁面的導航按鈕。您需要從該鏈接下載文件以查看功能分頁，並用您的Repeater控件替換DataList控件。

希望這會有所幫助。