Using the Repeater Control with PagedDataSource in C#

In this tutorial, we will cover how to use PagedDataSource with a Repeater. This will allow us to spread out large amounts of information on several pages. We will be collecting the information from a SQL database. C#.

Databases usually contain a large amount of information. When displaying this information, you don't want to overload your visitor with all of it on one page. Not only does this decrease ad revenue, but it increases server load. ASP.NET has a class called PagedDataSource which gives you the ability to only display as much information as you'd like per page.

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

First you can start a new Web Application in Visual Studio 2008. We are going to first setup the SQL database. Right-click on the App_Data folder and add a SQL database. In this database we are going to create a table called cities with columns name varchar(50) and state varchar(50). Here is a visual example of the table. Now fill this database with at least 4 cities.

cities
name	varchar(50)
state	varchar(50)

Now we will need to add our Repeater control and 2 Button controls to the aspx page. The repeater control will contain our information from the database. Inside the <ItemTemplate> tag you will need to place the Eval("name") and Eval("state") functions where you'd like each column. Now we need to create a Previous and Next Button below the Repeater control. It should look like the following.

<form id="form1" runat="server">      <table>      <tr><th>City</th><th>State</th></tr>      <asp:Repeater ID="rptList" runat="server">           <ItemTemplate>                <tr><td><%#Eval("name") %></td><td><%#Eval("state") %></td></tr>           </ItemTemplate>      </asp:Repeater>      </table>      <asp:Button ID="btnPrev" runat="server" Text="Previous" onclick="btnPrev_Click" />      <asp:Button ID="btnNext" runat="server" Text="Next" onclick="btnNext_Click" /> </form>

We have displayed our information in a <Table> tag but you are welcomed to do it any way you wish. It is important to take note of the Repeater ID and Button ID values. We will reference these controls in the next section.

If you were to run the application now it would only display an empty table and the Previous and Next buttons. We will now need to add our PagedDataSource to the code behind the page. Before we add the PagedDataSource we need to connect to our database. The simple SQL statement will grab all of the cities we previously added. This code will be placed in the Page_Load method and look like the following.

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

//setup connection string to SQL database SqlConnection cn = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database.mdf;Integrated Security=True;User Instance=True"); //SQL statement to collection all information from cities SqlCommand cmd = new SqlCommand("SELECT * FROM cities", cn); cn.Open(); //place table information into DataSet DataSet ds = new DataSet(); SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(ds); cn.Close();

Now that we have stored all of our database information, we will need to add it to the PagedDataSource. This will also be placed in the Page_Load method under the above code snippet. We will also need to specify a few settings for the PagedDataSource. The AllowPaging property must be set to True for us to display a different list of cities on different pages. We have set the PageSize to 3 which will allow us to display 3 cities on each page. The CurrentPageIndex has been set to the variable pageNum which we will declare in a minute.

//set pagedData settings PagedDataSource pagedData = new PagedDataSource(); pagedData.DataSource = ds.Tables[0].DefaultView; pagedData.AllowPaging = true; pagedData.PageSize = 3; pagedData.CurrentPageIndex = pageNum; //bind to repeater rptList.DataSource = pagedData; rptList.DataBind();

Notice towards the bottom of the code snippet we bound the PagedDataSource to the Repeater control on the aspx page. This is important for the cities to be displayed on the page.

The pageNum variable hasn't been declared yet because we are going to allow the Next and Previous buttons to change that number. In design view double-click each button so that an onClick method is created for each. We will tell the Next button to reload the page with the next page number. The Previous button will reload the page with the previous page number.

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

protected void btnNext_Click(object sender, EventArgs e) {      //send to next page      Response.Redirect("?Page="+Convert.ToString(pageNum+1)); } protected void btnPrev_Click(object sender, EventArgs e) {      //send to previous page      Response.Redirect("?Page=" + Convert.ToString(pageNum - 1)); }

We will need to add two more pieces of code for the application to function properly. First, we will need to declare the pageNum integer before the Page_Load method so it can be shared by all methods. Next, we will need to set the pageNum to 0 if it is the first time the visitor is accessed the page. If the visitor has clicked a button, then we will need to set the pageNum to either the next or previous page.

int pageNum; protected void Page_Load(object sender, EventArgs e) {      //check if querstring Page exists      if (Request.QueryString["Page"] == null)      {           pageNum = 0;      }      else      {           pageNum = Convert.ToInt32(Request.QueryString["Page"]);      }      //other code snippets mentioned above }

You have successfully created and used the PagedDataSource to display information from a database on several pages. One last tweak you might want to add is to change the visibility of each button if it isn't need. These two IF statements will need to be placed between the sql database interaction and the pagedData settings. It will remove the Previous button if you are on the first page, and it will remove the Next button if you are on the last page.

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

//check if previous or next button is needed if (pageNum == 0) {      btnPrev.Visible = false; } if (pageNum >= Math.Floor((decimal)ds.Tables[0].Rows.Count/3)) {      btnNext.Visible = false; }

Looking for more ASP.NET Database Tutorials? Click Here!