Asp.Net Repeater Kontrolü - AlternatingItemTemplate Kullanımı | ASP.NET : .NET, C#, VB, ASP.NET, ADO.NET, Framework, SQL, Silverlight, AJAX Türkçe Kaynak

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

ASP.NET

15.05.2011 11:29:54

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.

    CodeBehind="Default.aspx.cs" Inherits="AspNetRepeaterControl._Default" %>
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:Repeater ID="Repeater1" runat="server">
    </asp:Repeater>
</asp:Content>


<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"     CodeBehind="Default.aspx.cs" Inherits="AspNetRepeaterControl._Default" %>   <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">     <asp:Repeater ID="Repeater1" runat="server">     </asp:Repeater> </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

 
public class Urun
{
    public string UrunAd { get; set; }
    public double UrunFiyat { get; set; }
}

public class Urun     {         public string UrunAd { get; set; }         public double UrunFiyat { get; set; }     }

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

Default.aspx.cs

 
protected void Page_Load(object sender, EventArgs e)
{
    List<Urun> urunler = new List<Urun>
    {
        new Urun{UrunAd = "Kola",UrunFiyat = 2},
        new Urun{UrunAd = "Meyve Suyu",UrunFiyat = 1},
        new Urun{UrunAd = "Gazoz",UrunFiyat = 1},
        new Urun{UrunAd = "Su",UrunFiyat = 0.5}
    };
    Repeater1.DataSource = urunler;
    Repeater1.DataBind();
}

protected void Page_Load(object sender, EventArgs e)         {             List<Urun> urunler = new List<Urun>             {                 new Urun{UrunAd = "Kola",UrunFiyat = 2},                 new Urun{UrunAd = "Meyve Suyu",UrunFiyat = 1},                 new Urun{UrunAd = "Gazoz",UrunFiyat = 1},                 new Urun{UrunAd = "Su",UrunFiyat = 0.5}             };             Repeater1.DataSource = urunler;             Repeater1.DataBind();         }

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

 
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="AspNetRepeatorControl._Default" %>
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
            <div style="width:400px; height:20px; background-color:Yellow; color:Red; text-align:center; font-weight:bold">
                Başlık
            </div>
        </HeaderTemplate>
        <ItemTemplate>
            <div style="width:400px; height:20px;">
                <div style="width:150px; height:100%; float:left; font-weight:bold; background-color:Red; color:Yellow;">
                    <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
                </div>
                <div style="width:250px; height:100%; float:left; background-color:Red; color:Yellow;">
                    <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
                </div>
            <//div>
        </ItemTemplate>
        <SeparatorTemplate>
            ------------
        </SeparatorTemplate>
        <AlternatingItemTemplate>
            <div style="width:400px; height:20px;">
                <div style="width:150px; height:100%; float:left; font-weight:bold; background-color:Yellow; color:Red;">
                    <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
                </div>
                <div style="width:250px; height:100%; float:left; background-color:Yellow; color:Red;">
                    <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
                </div>
            <//div>
        </AlternatingItemTemplate>
        <FooterTemplate>
            <div style="width:400px; height:20px; background-color:Black; color:White; text-align:center; font-weight:bold">
                Kayıt Sonu
            </div>
        </FooterTemplate>
    </asp:Repeater>
</asp:Content>

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"     CodeBehind="Default.aspx.cs" Inherits="AspNetRepeatorControl._Default" %>   <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">     <asp:Repeater ID="Repeater1" runat="server">         <HeaderTemplate>             <div style="width:400px; height:20px; background-color:Yellow; color:Red; text-align:center; font-weight:bold">                 Başlık             </div>         </HeaderTemplate>         <ItemTemplate>             <div style="width:400px; height:20px;">                 <div style="width:150px; height:100%; float:left; font-weight:bold; background-color:Red; color:Yellow;">                     <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>                 </div>                 <div style="width:250px; height:100%; float:left; background-color:Red; color:Yellow;">                     <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL                 </div>             <//div>         </ItemTemplate>         <SeparatorTemplate>             ------------         </SeparatorTemplate>         <AlternatingItemTemplate>             <div style="width:400px; height:20px;">                 <div style="width:150px; height:100%; float:left; font-weight:bold; background-color:Yellow; color:Red;">                     <%#DataBinder.Eval(Container.DataItem,"UrunAd") %>                 </div>                 <div style="width:250px; height:100%; float:left; background-color:Yellow; color:Red;">                     <b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL                 </div>             <//div>         </AlternatingItemTemplate>         <FooterTemplate>             <div style="width:400px; height:20px; background-color:Black; color:White; text-align:center; font-weight:bold">                 Kayıt Sonu             </div>         </FooterTemplate>     </asp:Repeater> </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

Asp.Net » Repeater » AlternatingItemTemplate » HeaderTemplate » FooterTemplate