Merhaba arkadaşlar! Bu makalemizde Asp.NET’ te verileri listelemek için kullanılan Repeater ve Datalist kontrollerinde sayfalama işlemini pratik yoldan nasıl yaparız ondan bahsedeceğim. Sayfalama işlemi Gridview kontrolünde yapabiliyoruz ancak bu kontrol bazen ihtiyaçlarımızı karşılamıyor bunun yerine Datalist ve Repeater gibikontrollerden yararlanıyoruz. Bu kontrollerde de sayfalama problemi yaşıyoruz ve sayfalama yapmak için çok fazla kod yazıp sayfalama yapmaya çalışıyorduk. Artık bu problem ortadan kalktı ve imdadımıza CollectionPager yetişti. Bu kontrol kullanmak için öncelikle buradan dll dosyamızı indiriyoruz. İndirdiğimiz dosyayı Solution Explorer bölümünde sağ tıklayıp dll dosyasını projemize entegre ediyoruz.
Dll dosyamızı projemize ekledikten sonra bir örnek uygulama ile sayfalama işleminin nasıl yapıldığını görelim. Ben örnekte MS Access veritabanını kullanacağım. Sayfalama.mdb adında bir veritabanı oluşturalım. Oluşturduktan sonra aşağıdaki gibi bir tablo oluşturalım.
Tablomuzu oluşturduktan sonra içine veriler giriniz. Sonra ilk olarak data source kısmında aşağıdaki gibi kodlarımızı yazıyoruz.
<%@ Register assembly="CollectionPager" namespace="SiteUtils" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register assembly="CollectionPager" namespace="SiteUtils" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="ds" runat="server">
<ItemTemplate>
<b><%# Eval("OgrenciID") %>.</b> <%# Eval("AdSoyad") %>
</ItemTemplate>
</asp:DataList>
</div>
<cc1:CollectionPager ID="Sayfalama" runat="server" BackNextDisplay="Buttons"
BackNextLinkSeparator="" BackNextLocation="Split" BackNextStyle=""
BackText="Geri" ControlCssClass="Sayfalama" ControlStyle=""
FirstText="İlk Sayfa" HideOnSinglePage="True" IgnoreQueryString="True"
LabelStyle="" LabelText="Sayfalar :" LastText="Son Sayfa" MaxPages="100"
NextText="İleri" PageNumbersDisplay="Numbers"PageNumbersSeparator="&nbsp;"
PageNumbersStyle="" PageNumberStyle="" PageSize="5"PagingMode="PostBack"
QueryStringKey="Sayfa"
ResultsFormat="{2} tane makaleden {0} - {1} arası gösteriliyor"
ResultsLocation="None" ResultsStyle="" SectionPadding="10"ShowFirstLast="True"
ShowLabel="False" ShowPageNumbers="True" SliderSize="15"UseSlider="True">
</cc1:CollectionPager>
</form>
</body>
</html>
Yukarıdaki kodlarımızı yazdıktan sonra cs kısmına geçerek aşağıdaki şekilde kodlarımızı yazıyoruz.. Bu işlemi yaptıktan sonra CollectionPager ile datalist nesnemizi ilişkilendiriyoruz.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OleDb;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Doldur();
}
void Doldur()
{
OleDbConnection bg = newOleDbConnection("Provider=Microsoft.jet.oledb.4.0; data source=" + Server.MapPath("\\App_Data\\Sayfalama.mdb"));
bg.Open();
OleDbCommand cmd = new OleDbCommand("Select * From Ogrenciler", bg);
OleDbDataAdapter adap = new OleDbDataAdapter(cmd);
DataTable veriler = new DataTable();
adap.Fill(veriler);
Session["table"] = veriler;
DataTable dt = new DataTable();
dt = (DataTable)Session["table"];
Sayfalama.DataSource = dt.DefaultView;
Sayfalama.BindToControl = ds;
ds.DataSource = Sayfalama.DataSourcePaged;
ds.DataBind();
}
}
Kodlarımızı yazdıktan sonra sayfamızı çalıştırdığımızda aşağıdaki gibi verilerimiz listelenecektir.
Sayfalama işlemi oldu ama bunu biraz görselliştirmek istediğimizde ne yapacağız?
Collection nesnesinin bazı style ayarları olsada en sağlıklısı css ile ilişkilendirmek olacak
İlk olarak üst menüden Web Site / New Item / StyleSheet dosyası seçip ismine Style.css veriyoruz.
Açtığımız bu dosyaya aşağıdaki kodlarımızı yazıyoruz.
.Sayfalama a:link, .Sayfalama a:visited, .Sayfalama a:active
{
background-image:url('images/sayfabg.jpg');
border:solid 1px #e4e4e4;
padding:3px 5px 3px 5px;
margin:1px;
font-size:9pt;
color:#2f2f2f;
font-weight:bold;
text-decoration:none;
font-family:Trebuchet MS;
cursor:pointer;
}
.Sayfalama a:hover
{
background-image:url('images/sayfabg2.jpg');
border:solid 1px #e4e4e4;
padding:3px 5px 3px 5px;
font-size:9pt;
color:White;
font-family:Trebuchet MS;
cursor:pointer;
}
.Sayfalama INPUT
{ background-image:url('images/sayfabg.jpg');
border:solid 1px #e4e4e4;
padding:3px 5px 3px 5px;
margin:1px;
font-size:9pt;
color:#2f2f2f;
font-weight:bold;
font-family:Trebuchet MS;
cursor:pointer;
}
.Sayfalama span
{
margin:1px;
}
.Sayfalama B
{
background-image:url('images/sayfabg2.jpg');
border:solid 1px #e4e4e4;
padding:3px 5px 3px 5px;
font-size:9pt;
color:White;
font-family:Trebuchet MS;
cursor:pointer;
}
Style dosyamızıda oluşturduktan sonra data source kısmında head tagları arasına aşağıdaki kodu yazıyoruz.
<link href="Style.css" rel="Stylesheet" type="text/css" />
Bu makalemizin de sonuna geldik, makalenin uygulaması sitemde kullandığım sayfalama tekniğidir. Bu makalenin örnek çalışmasını buradan indirebilirsiniz.
Hiç yorum yok:
Yorum Gönder
Yorumunuz için teşekkür ederim.