Repeater, ASP.NET veri listeleme kontrollerinden birisidir. Veritabanından verileri belirli bir formata göre listelememizi sağlar. Adından da anlaşılacağı gibi tekrarlayıcıdır. Birden fazla veri listeleyeceğimiz için şablonumuz tekrarlanacaktır. Bu yüzden repeater kontrolüne belirli bir formata göre şablonumuzun tekrarlanıp verilerimizin bu şablonlarda listelenmesi olarak düşünebiliriz.
Repeater, listeleme konusunda esnek bir yapıdadır çünkü sunduğu template yapısı ile HTML formatında istediğimiz tasarımı yapabiliriz. Veritabanımız,Collection yapıları(List,Array) repeatera bağlayacağımız veri kaynağı olabilir.
Repeater'da şablon tasarımında kullanabileceğimiz 5 adet template vardır. Bu şablonları <asp:Repeater> </asp:Repeater> tagları arasına yazarız. HTML ve CSS kodları kullanarak istediğimiz şekilde bu şablonları tasarlayabiliriz. Bunların ne işe yaradığına değinecek olursak
ItemTemplate <ItemTemplate>
Repeater'da listelenecek verileri barındıran şablondur. Bu şablonu kullanmazsak verilerimiz listelenmeyecektir. Listelenmesini istediğimiz veriyi Eval() metodu ile çağırırız. Metod string bir parametre alarak veri tabanından görüntülenecek sütunun adı veya class'a ait property adı olabilir.
Veriler ardışık olarak alt alta listelenecektir.
AlternatingItemTemplate <AlternatingItemTemplate>
Veriler ardışık olarak listelendiğini biliyoruz. Bu ardışık olarak listelenen verilerin farklı stillerde listelenmesini istiyorsak bu şablonu kullanırız. Örneğin, listelenen bir verinin arka plan rengi kırmızı ise diğeri sarı olabilir.
HeaderTemplate <HeaderTemplate >
Listelenen verilere başlık olarak tanımlayabiliriz.Kontrolümüzün başlık şablonudur.Liste hakkında bilgi veren alan olabilir.
FooterTemplate <FooterTemplate>
Kontrolümüzün en altında yazdığımız şablondur. Telif hakkı bildirimi veya alt bilgi vereceksek bu şablonu kullanabiliriz.
SeparatorTemplate <SeparatorTemplate >
Ardışık olarak listelenen verileri ayırıcı özellik katan bir şablondur. En çok kullanılan ayraç HTML'deki düz çizgi tagı olan </hr> tagıdır. Listelenen her veriden sonra ayracımız gelir ve bu işlem ardışık olarak devam eder.
Örneğimizde NORTHWND veritabanımızdaki ürünler ve kategori listesini listeleyebildiğimiz bir uygulamamız var. Repeater ve şablonların kullanımını daha iyi anlayabilirsiniz.
Data Source kısmımız web formumuz yüklendiğinde çalışacaktır. LINQ sorgulama ile Products ve Categories tablolarını join kullanarak birleştirdim ve listelenmesini istediğimiz sütunları alias vererek çağırdım.Repeater'a DataBind() metodu ile veri kaynağımızı bağladık. Son iki satır repeater'da verileri listelemek için mutlaka bilmemiz gerekir.
Repeater, listeleme konusunda esnek bir yapıdadır çünkü sunduğu template yapısı ile HTML formatında istediğimiz tasarımı yapabiliriz. Veritabanımız,Collection yapıları(List,Array) repeatera bağlayacağımız veri kaynağı olabilir.
Repeater'da şablon tasarımında kullanabileceğimiz 5 adet template vardır. Bu şablonları <asp:Repeater> </asp:Repeater> tagları arasına yazarız. HTML ve CSS kodları kullanarak istediğimiz şekilde bu şablonları tasarlayabiliriz. Bunların ne işe yaradığına değinecek olursak
ItemTemplate <ItemTemplate>
Repeater'da listelenecek verileri barındıran şablondur. Bu şablonu kullanmazsak verilerimiz listelenmeyecektir. Listelenmesini istediğimiz veriyi Eval() metodu ile çağırırız. Metod string bir parametre alarak veri tabanından görüntülenecek sütunun adı veya class'a ait property adı olabilir.
Veriler ardışık olarak alt alta listelenecektir.
<asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <div> <%#Eval("KolonAdi") %> </div> </ItemTemplate> </asp:Repeater>
AlternatingItemTemplate <AlternatingItemTemplate>
Veriler ardışık olarak listelendiğini biliyoruz. Bu ardışık olarak listelenen verilerin farklı stillerde listelenmesini istiyorsak bu şablonu kullanırız. Örneğin, listelenen bir verinin arka plan rengi kırmızı ise diğeri sarı olabilir.
HeaderTemplate <HeaderTemplate >
Listelenen verilere başlık olarak tanımlayabiliriz.Kontrolümüzün başlık şablonudur.Liste hakkında bilgi veren alan olabilir.
FooterTemplate <FooterTemplate>
Kontrolümüzün en altında yazdığımız şablondur. Telif hakkı bildirimi veya alt bilgi vereceksek bu şablonu kullanabiliriz.
SeparatorTemplate <SeparatorTemplate >
Ardışık olarak listelenen verileri ayırıcı özellik katan bir şablondur. En çok kullanılan ayraç HTML'deki düz çizgi tagı olan </hr> tagıdır. Listelenen her veriden sonra ayracımız gelir ve bu işlem ardışık olarak devam eder.
Örneğimizde NORTHWND veritabanımızdaki ürünler ve kategori listesini listeleyebildiğimiz bir uygulamamız var. Repeater ve şablonların kullanımını daha iyi anlayabilirsiniz.
Data Source kısmımız web formumuz yüklendiğinde çalışacaktır. LINQ sorgulama ile Products ve Categories tablolarını join kullanarak birleştirdim ve listelenmesini istediğimiz sütunları alias vererek çağırdım.Repeater'a DataBind() metodu ile veri kaynağımızı bağladık. Son iki satır repeater'da verileri listelemek için mutlaka bilmemiz gerekir.
protected void Page_Load(object sender, EventArgs e) { NORTHWNDEntities db = new NORTHWNDEntities(); var urunler = from u in db.Products join k in db.Categories on u.CategoryID equals k.CategoryID select new { ÜrünAdı = u.ProductName, Kategori = k.CategoryName, Stok = u.UnitsInStock, Fiyat = u.UnitPrice }; Repeater1.DataSource = urunler.ToList(); Repeater1.DataBind(); }
<asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <div style="background-color:aquamarine"> <b>Ürün Adı:</b> <%#Eval("ÜrünAdı") %> <br /> <b>Kategorisi:</b><%#Eval("Kategori") %> <br /> <b>Birim Fiyatı:</b><%#Eval("Fiyat") %> <br /> <b>Stok Miktarı:</b><%#Eval("Stok") %> </div> </ItemTemplate> <AlternatingItemTemplate > <div style="background-color:aqua"> <b><i>Ürün Adı:</i></b> <%#Eval("ÜrünAdı") %> <br /> <b><i>Kategorisi:</i></b><%#Eval("Kategori") %> <br /> <b><i>Birim Fiyatı:</i></b><%#Eval("Fiyat") %> <br /> <b><i>Stok Miktarı:</i></b><%#Eval("Stok") %> </div> </AlternatingItemTemplate> <SeparatorTemplate> <hr /> </SeparatorTemplate> <HeaderTemplate> <div style="background-color:blueviolet"> <b>ÜRÜNLERİMİZ</b> </div> </HeaderTemplate> <FooterTemplate> <div style="background-color:chartreuse"><b>NORTHWIND VERİTABANINDAN ALINMIŞTIR</b></div> </FooterTemplate> </asp:Repeater>
Yorumlar
Yorum Gönder