Veysel Uğur KIZMAZ

Asp.Net Repeater Kontrolü - AlternatingItemTemplate Kullanımı

16.06.2012Okunma Sayısı: 7131Kategori: ASP.NET

Bu makalemizde ASP.NET’te Repeater kontrolünün AlternatingItemTemplate’i inceleyelim.

Daha önceki makalelerimizde Repeater kontrolününün kullanımını ve Repeater kontrolünde HeaderTemplate, FooterTemplate, SeparatorTemplate Kullanımını inceledik. Şimdi satırların tasarımının farklı olmasını sağlayan AlternatingItemTemplate yapısını inceleyelim.
 
Description: C:\Users\ugur\Desktop\Makale\ASP_NET_Repeater_Control_Nedir\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.     CodeBehind="Default.aspx.cs" Inherits="AspNetRepeaterControl._Default" %>
  2.  
  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.     </asp:Repeater>
  8. </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.
 
  1. <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
  2.     CodeBehind="Default.aspx.cs" Inherits="AspNetRepeatorControl._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; background-color:Red; color:Yellow;">
  16.                     <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
  17.                 </div>
  18.                 <div style="width:250px; height:100%; float:left; background-color:Red; color:Yellow;">
  19.                     <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
  20.                 </div>
  21.             <//div>
  22.         </ItemTemplate>
  23.         <SeparatorTemplate>
  24.             ------------
  25.         </SeparatorTemplate>
  26.         <AlternatingItemTemplate>
  27.             <div style="width:400px; height:20px;">
  28.                 <div style="width:150px; height:100%; float:left; font-weight:bold; background-color:Yellow; color:Red;">
  29.                     <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
  30.                 </div>
  31.                 <div style="width:250px; height:100%; float:left; background-color:Yellow; color:Red;">
  32.                     <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
  33.                 </div>
  34.             <//div>
  35.         </AlternatingItemTemplate>
  36.         <FooterTemplate>
  37.             <div style="width:400px; height:20px; background-color:Black; color:White; text-align:center; font-weight:bold">
  38.                 Kayıt Sonu
  39.             </div>
  40.         </FooterTemplate>
  41.     </asp:Repeater>
  42. </asp:Content>
 
 
1. ItemTemplate Özellikleri:
- Arkaplan rengi kırmızı
- Yazı rengi sarı
 
2. AlternatingItemtemplate Özellikleri:
- Arkaplan rengi sarı
- Yazı rengi kırmızı
 
Örneğimizi çalıştırdığımzda her iki satırdan birinin ItemTemplate tasarımında diğerinin AlternatingItemTemplate tasarımında olacağını göreceğiz.
 
 
 
 
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com