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

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

02.05.2012

2014

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.

<%@ 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; }
}

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();
}

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

Default.aspx

<%@ 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">
<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">
<%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
</div>
<div style="width:250px; height:100%; float:left">
<b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
</div>
<//div>
</ItemTemplate>
<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. 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.

<%@ 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">
<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">
<%#DataBinder.Eval(Container.DataItem,"UrunAd") %>
</div>
<div style="width:250px; height:100%; float:left">
<b>:</b> <%#DataBinder.Eval(Container.DataItem,"UrunFiyat") %> TL
</div>
<//div>
</ItemTemplate>
<SeparatorTemplate>
------------
</SeparatorTemplate>
<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>

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

Yazar Hakkında

Veysel Uğur KIZMAZ

www.ugurkizmaz.com

YazılımDilleri.Net projesinin lideri olan Veysel Uğur Kızmaz, Gazi Üniversitesi Bilgisayar Mühendisliği bölümü mezunudur. Bir çok projede çalışmış, yazılım alanında birçok eğitimler vermiştir. Şu an özel bir yazılım danışmanlık firmasında Sharepoint proje danışmanlığı ve proje yöneticiliği yapmaktadır. Veysel Uğur Kızmaz, dahil olduğu projelerin çeşitliliği sebebiyle farklı alanlarda uzmanlaşmıştır: .Net, Sharepoint, Java, Php, Javascript, SQL Server, Oracle, MySQL.

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar