"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

Asp.Net Repeater'da HeaderTemplate, FooterTemplate, SeparatorTemplate Kullanımı

Asp.Net Repeater'da HeaderTemplate, FooterTemplate, SeparatorTemplate kullanımını inceleyelim.

  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.
 
Description: C:\Users\ugur\Desktop\ASP_NET_Repeater_Control_Nedir_1.jpg
 
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 { getset; }
  4.     public double UrunFiyat { getset; }
  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
 

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.