Veysel Uğur KIZMAZ

  Bir önceki makalemizde ASP.NET’te Repeater kontrolünün kullanımını incelemiştik. Şimdi bu kontrole HeaderTemplate, FooterTemplate ve SeparatorTemplate ekleme işlemlerinin nasıl yapıldığını inceleyelim.

Bu işlemleri örnek uygulama üzerinde inceleyelim. Örnek uygulamamızda ürün listemizi ekranda gösterelim.

Bu işlem için yeni bir Asp.Net Web Application oluşturalım.

 

 

Oluşturduğumuz projede Default.aspx dosyamıza gidelim ve Toolbox’tan Data sekmesi altından Repeater kontrolünü sürükleyip ekrana bırakalım.

 

 

Sürükle bırak işleminden sonra sayfamızın Source kodu aşağıdaki gibi olacaktır.

1. <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
2.     CodeBehind="Default.aspx.cs" Inherits="AspNetRepeaterControl._Default" %>
3.  
4. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
5. </asp:Content>
6. <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
7.     <asp:Repeater ID="Repeater1" runat="server">
8.     </asp:Repeater>
9. </asp:Content>

 

Ekranda ürünlerimizi listeleyeceğimiz bir yapı oluşturalım. Bunun için öncelikle bir ürün model sınıfı oluşturalım.

 

Urun.cs

1. public class Urun
2. {
3.     public string UrunAd { get; set; }
4.     public double UrunFiyat { get; set; }
5. }

Default.aspx sayfamızın Page_Load methoduna gidelim ve ürünlerimi Repeater kontrolümüze bağlayalım.

 

Default.aspx.cs

1. protected void Page_Load(object sender, EventArgs e)
2. {
3.     List<Urun> urunler = new List<Urun>
4.     {
5.         new Urun{UrunAd = "Kola",UrunFiyat = 2},
6.         new Urun{UrunAd = "Meyve Suyu",UrunFiyat = 1},
7.         new Urun{UrunAd = "Gazoz",UrunFiyat = 1},
8.         new Urun{UrunAd = "Su",UrunFiyat = 0.5}
9.     };
10.     Repeater1.DataSource = urunler;
11.     Repeater1.DataBind();
12. }

Ürünleri Repeater’da göstermek için Source kodumuzda aşağıdaki düzenlemeleri yapalım ve inceleyelim.

 

Default.aspx

1. <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
2.     CodeBehind="Default.aspx.cs" Inherits="AspNetRepeaterControl._Default" %>
3. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
4. </asp:Content>
5. <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
6.     <asp:Repeater ID="Repeater1" runat="server">
7.         <HeaderTemplate>
8.             <div style="width:400px; height:20px; background-color:Yellow; color:Red; text-align:center; font-weight:bold">
9.                 Başlık
10.             </div>
11.         </HeaderTemplate>
12.         <ItemTemplate>
13.             <div style="width:400px; height:20px;">
14.                 <div style="width:150px; height:100%; float:left; font-weight:bold">
15.                     <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
16.                 </div>
17.                 <div style="width:250px; height:100%; float:left">
18.                     <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
19.                 </div>
20.             <//div>
21.         </ItemTemplate>
22.         <FooterTemplate>
23.             <div style="width:400px; height:20px; background-color:Black; color:White; text-align:center; font-weight:bold">
24.                 Kayıt Sonu
25.             </div>
26.         </FooterTemplate>
27.     </asp:Repeater>
28. </asp:Content>

 

1. HeaderTemplate : Bu tag ile başlık alanımızın (kayıtlarımızdan önce görünecek alanın) tasarımını belirliyoruz. Header’da bir div bulunmakta ve bu div’e bazı özellikler verilmektedir:

 

genişlik=400px, 
yükseklik=20px, 
arkaplan=sarı,
yazıRengi=kırmızı,
yaziFontu=kalın

 

2. FooterTemplate : Bu tag ile kayıtlarımızdan sonra görünecek alanın tasarımını belirliyoruz. Footer’da bir div bulunmakta ve bu div’e bazı özellikler verilmektedir:

 

genişlik=400px, 
yükseklik=20px, 
arkaplan=siyah,
yazıRengi=beyaz,
yaziFontu=kalın

 

Projemizi çalıştıralım ve ekran görüntüsünü inceleyelim.

 

 

Ekran görüntüsünden de görebileceğimiz gibi, kayıtlarımızın hemen üstünde HeaderTemplate’te belirlediğimiz div, altında da FooterTemplate’te belirlediğimiz div görünmektedir.

 

Şimdi kayıtlarımızın arasında çalışacağından bahsettiğimiz SeparatorTemplate’i projemize ekleyelim.

1. <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
2.     CodeBehind="Default.aspx.cs" Inherits="AspNetRepeaterControl._Default" %>
3.  
4. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
5. </asp:Content>
6. <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
7.     <asp:Repeater ID="Repeater1" runat="server">
8.         <HeaderTemplate>
9.             <div style="width:400px; height:20px; background-color:Yellow; color:Red; text-align:center; font-weight:bold">
10.                 Başlık
11.             </div>
12.         </HeaderTemplate>
13.         <ItemTemplate>
14.             <div style="width:400px; height:20px;">
15.                 <div style="width:150px; height:100%; float:left; font-weight:bold">
16.                     <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
17.                 </div>
18.                 <div style="width:250px; height:100%; float:left">
19.                     <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
20.                 </div>
21.             <//div>
22.         </ItemTemplate>
23.         <SeparatorTemplate>
24.             ------------
25.         </SeparatorTemplate>
26.         <FooterTemplate>
27.             <div style="width:400px; height:20px; background-color:Black; color:White; text-align:center; font-weight:bold">
28.                 Kayıt Sonu
29.             </div>
30.         </FooterTemplate>
31.     </asp:Repeater>
32. </asp:Content>

 

SeperatorTemplate’te sadece ------------ metni yazılmıştır. Her 2 satır arasında bu çizgiler görünecektir.

 

Projemizi çalıştıralım ve nasıl çalıştığını inceleyelim.

 

 

 

Üstte Header, altta Footer, satırların arasında ise Separator Template’lerini görmüş olduk.

 

 

 

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com