Asp.Net'te Repeater (Tekrarlayıcı) Kullanımı

Asp.Net ile yaptığınız bir çalışmada, listelenmesini istediğiniz veriler mevcut. İşte bu noktada Asp.Net kontrollerinden Repeater yardımımıza yetişmektedir. Daha detaylı anlamak için il (şehir) listelenmesini Repetar kontrollü ile yapacağız.

Öncelik olarak veritabanımızı oluşturalım (Access veritabanı)
Access SQL Sorgusu

CREATE Table tblIller
(
il_ID AutoIncrement,
il_adi TEXT(50)
)

Veritabanı Görünümü


Veritabanımız oluştu. Veritabanımıza birkaç il ekleyelim.
Veritabanı Kayıtları

Veritabanına ait kayıtları ekledik. Bu verilerin giydirileceği HTML - CSS taraflı betikleri hazırlayalım.
HTML Betiklerimiz

<ul class="liste">
    <li>Adana</li>
    <li>Adıyaman</li>
    <li>Afyon</li>
    <li>Ağrı</li>
</ul>

CSS Betiklerimiz

ul.liste{list-style-type:none;width:200px;}
ul.liste li{display:block;background:#E4E4E4;border-bottom:1px solid #D5D2D2;padding:2px 8px;line-height:20px;}
ul.liste li:last-child{border-bottom-width:0px;}

Oluşan tasarımın görünümünü paylaşalım
Oluşan HTML-CSS Tasarım

---

Şimdi ise Asp.Net taraflı olarak Repeater kontrolümüzü sayfamıza ekleyelim.
Repeater Kontolü

<asp:Repeater ID="rptIller" runat="server">
    <HeaderTemplate>

    </HeaderTemplate>
    <ItemTemplate>

    </ItemTemplate>
    <FooterTemplate>

    </FooterTemplate>
</asp:Repeater>

Repeater kontrolünün özelliklerine değinelim.

HeaderTemplate: Tekrarlanan öğelerin üst kısmında bulunmasını istediğimiz nesneler (div, ul, span vs...) buraya eklenerek sadece bir defa dahil edilmiş olur. Bu örnekte <ul class="liste"> , HeaderTemplate arasına eklenecektir.

ItemTemplate: Tekrarlanmasını istediğimiz nesneler buraya eklenerek, kayıt sayısı kadar bu nesneler tekrar eder. Bu örnekte <li><li/>, ItemTemplate arasına eklenecektir.

FooterTemplate: Tekrarlanan öğelerin alt kısmında bulunmasını istediğimiz nesneler (div, ul, span vs...) buraya eklenerek sadece bir defa dahil edilmiş olur. Bu örnekte </ul> , FooterTemplate arasına eklenecektir.

Bu açıklamalardan sonra yaptığımız HTML taslağını Repeater içerisine uyarlayalım
Repeater Kontrolüne Tasarım Öğreleri Ekleniyor

<asp:Repeater ID="rptIller" runat="server">
    <HeaderTemplate>
        <ul class="liste">
    </HeaderTemplate>
    <ItemTemplate>
        <li></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

---

Repater içerisine veritabanından verileri çağırmak için C# taraflı kodları yazalım
Sayfamıza Dahil Edeceğimiz Uzaylar

using System.Data.OleDb;
using System.Configuration;

Metodlarımızı hazırlayalım
Metodlarımız

public OleDbConnection fnBaglan()
{
	OleDbConnection bag = new OleDbConnection(ConfigurationManager.ConnectionStrings["accessDB"].ConnectionString);
	return bag;
}
private void fnIller()
{
	OleDbConnection bag = fnBaglan();
	OleDbCommand cmdSQL = new OleDbCommand("Select * FROM tblIller", bag);
	bag.Open();
	rptIller.DataSource = cmdSQL.ExecuteReader();
	rptIller.DataBind();
	cmdSQL.Dispose();
	bag.Close();
	bag.Dispose();
}

Oluşturduğumuz metodu Page_Load olayında, yani sayfa yüklenirken çağıralım
Page_Load Olayında Çağırılıyor

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

Son olarak Repeater içerisinde bulunacak veritabanı sütunlarını ekleyelim. Veritabanında iki sütun mevcuttu. Bu sütunlar il_ID ve il_adi alanlarıdır.
Repeater Son Hali

	<asp:Repeater ID="rptIller" runat="server">
	<HeaderTemplate>
		<ul class="liste">
	</HeaderTemplate>
	<ItemTemplate>
		<li><%#Eval("il_ID")%> - <%#Eval("il_adi")%></li>
	</ItemTemplate>
	<FooterTemplate>
		</ul>
	</FooterTemplate>
	</asp:Repeater>

Örnek ekte verilmiştir. İnceleyip daha da anlamanız dileğiyle.