ASP.NET DataList Kontrolü

Ana Sayfa

.net TV

Makaleler

Kaynak Kod

Haberler

Serbest Köşe

Canlı Köşe

Forum

C#nedir?

Ekibimiz

RSS

ADO.NET/SQL	C / Sys Prog.	Genel	Mono ve .NET	Silverlight	XML / Web Serv.
X86 Assembly	C++ / C++.NET	J#.NET / Java	.NET 3.x	UML / Analiz	Yazılım Müh.
ASP.NET	C# / VC#/.NET	Mobil Prog.	PHP 5

YAZAR HAKKINDA

Ahmet Faruk Nacaroğlu
http://www.csharpnedir.com/
İletişme geçmek için tıklayın.
40 Makalesi yayınlanmakta.
Yazar hakkında detaylı bilgi için tıklayın.
Yayınlanan diğer makaleleri için tıklayın.
İlgili etiketler: baglantiyi datalist datalist’e datalist’in detayli eleman elemani elemanin farkli herhangi ilgili olayini olmasi sablon veritablosu ASP.NET Ahmet Faruk Nacaroğlu

YAZI HAKKINDA

Türü	: Makale Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
Seviyesi	: Başlangıç
Kategori	: ASP.NET
Yayınlanma Tarihi	: 22.8.2004
Okunma Sayısı	: 62805
Yorum Sayısı	: 4 yorum yaz

SİTE İÇİ ARAMA

Üye GİRİŞİ

Üye girişi için tıklayın.

Serbest KÖŞE (?)

Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.

Silindi
emre TAŞ
yazının devamı >

silindi
emre TAŞ
yazının devamı >

Bende Yazmak İstiyorum

Blogroll

Turhal Temizer
Conda install environment.yml Package 5.4.2025

Turhal Temizer
Mac OS/X Removing CUDA 5.4.2025

Burak Selim Şenyurt
Bellek Yönetiminde Verimlilik için İpuçları (Rust Odaklı) 5.4.2025

Burak Selim Şenyurt
Rust ve Güvenli Bellek Yönetimi Hakkında 5.4.2025

Diğer Herşey

» Makaleler RSS
» Video Gönder
» Makale Gönder
» Serbest Köşeye Yazı Gönder
» Yazar Başvurusu
» C#nedir? Ekibinde Olmalıyım!

Sponsorlar

ASP.NET DataList Kontrolü - 3

Favorilerime Ekle

arkadaşıma gönder
Arkadaşınızın email adresi:
*
Mesajınız:

DataList kontrolü üzerine üçüncü makalemize hoşgeldiniz. Bu yazmızda önce DataList kontrolündeki bir elemanı (kayıdı) nasıl seçeceğimizi inceleyeceğiz. Daha sonra DataList kontrolündeki değişik elemanlara nasıl stil uygulayacağımızı göreceğiz.

DataList kontrolüne aşina değilseniz bu kontrol üzerine yazdığım ASP.NET DataList Kontrolüne Giriş ve ASP.NET DataList Kontrolü - 2 makalelerini okumanız sizin bu makaleden daha çok fayda sağlamanıza yardım edecektir.

1. ASP.NET DataList Kontrolünde Bir Elemanı Seçme

DataList kontrolünde herhangi bir elemanı seçmeniz mümkündür. Seçme işlemini gerçekleştirmek için DataList sınıfının ItemCommand olayını kullanmak gerekir. Bu olaya karşı çalışacak bir metod (event handler) içinde gerekli işlemleri yaparız. "Bu olayı nasıl tetikleyeceğiz?" şeklinde bir soru hemen aklınıza gelecektir. DataListin bu olayını (ItemCommand) tetiklemek için bir komut tipinde düğmeyi kontrolün ItemTemplate kısmına eklemeliyiz.

Seçme olayını gerçekleştirmek için <asp:Button>, <asp:LinkButton> veya <asp:ImageButton> kontrollerinden herhangi birini kullanabilriz. Tekrar belirtelim düğmeler otomatik olarak seçme işini yapamazlar. Sadece ItemCommand olayının tetiklenmesini sağlarlar.

DataListen herhangi bir elemanı(kayıdı) seçince o eleman ile ilgili daha detaylı/farklı bilgileri ve normal görünüş(ItemTemplate)’ten farklı bir biçimde görüntüleyebiliriz. Dikkat ederseniz elemanın içindeki verilerin başka bir kısmını görüntülemekten ve bu görüntüle işlemini farklı bir stil(style) kullanarak yapabileceğimizi söyledim. İsterseniz bunları nasıl başaracağımıza bir bakalım.

DataList’imizde elemanları görüntülerken ItemTemplate isimli bir şablon kullanılıyoruz. ItemTemplate şablonunda DataList’e bağladığımız veri kaynağından gelen bir veya daha fazla alana ya da tamamına yer verebiliriz. Genelde normal görünümde(ItemTemplate) sadece eleman hakkında özet niteliğindeki bir takım alanları görüntülerken, eleman seçilince daha detaylı bilgilere yer verilir. Seçilen elemanın şablonu SelectedItemTemplate’dir. SelectedItemTemplate’de daha detaylı bilgi vereceğimiz için daha uzun olması beklenir.

2. SelectedItemStyle ile Seçilen Elemanın Görünümünü Ayarlama

Seçilen elemanın görünümünün, stilinin, farklı olması için SelectedItemStyle özelliğini kullanmalıyız. Bu özelliğin detaylarını belirtmek için ya DataList’i ilk tanımladığmız kısmı veya da ayrı bir yerde aynı şablon tanımlarken kullandığımız yapıya benzer bir yapıyı seçmeliyiz.

Seçilelen elemanın stilini DataList tanımı içinde belirteceksek şu söz dizimine uymalıyız:

<asp:datalist ... SelectedItemstyle-styleproperty=değeri ... > </asp:datalist> Yukarıdaki söz diziminden de anlaşılacağı gibi, seçilen elemanın stilini DataList’in içinde tanımlarken önce selecteditemstyle gelmeli sonra araya - koyup ise hangi stil öğesini ayarlayacaksak (styleproperty) onun ismi gelmeli. Son olarak =’in sağına stil öğesinin değeri gelmeli. Örnek olarak aşağıdaki kodu inceleyelim. Burda stil öğelelerinden Font-Bold ’u ve BackColor’ı ayarlıyoruz.

<asp:DataList id=DataList1 ....
SelectedItemStyle-Font-Bold="True" SelectedItemStyle-BackColor="PapayaWhip">

Seçilen elemanın görünümünü ayrı bir şablon tanımı gibi de yapabileceğimizi söylemiştik. Bunun için bize sunulan söz dizimi:

<asp:datalist ... > <selecteditemstyle styleproperty1=değer1, styleproperty2=değer2 .... > </selecteditemstyle> </asp:datalist> Dikkat ederseniz yine iş özünde stil öğerine ve onların değerlerine geliyor. İlk metotdan tek farkı farklı yerlerde tanımlanmalarından dolayı ufak bir kaç yöntem farklılığıdır. İsteseniz yukarıdaki örneği bu sefer ayrı bir şablon tanımı gibi yapalım:

Stil ile bu kadar ilgilendiğimiz yeter sanırım artık DataList’in bir elemanını seçme konusunda tam bir örnek yapalım. Burda ayrıca SelectedItemTemplate’i de inceleme fırsatı bulacağız.

3. DataList’en Bir Eleman Seçme Örneği

Her zamanki gibi önce Web Formumuzu (HTML kodumuzu) yazalım. İlgili kodumuzda <form> tagı ve içindekileri incelememizin yeterli olacağı kanaatindeyim:

<center>
   <asp:datalist id="DataList1" runat="server"
      SelectedItemStyle-Font-Bold="True" SelectedItemStyle-BackColor="PapayaWhip"
      ItemStyle-Font-Size="2" ItemStyle-Font-Name="Verdana"
      OnItemCommand="DataList1_ItemCommand" Width="90%">

   <SelectedItemStyle Font-Bold="True" BackColor="PapayaWhip"></SelectedItemStyle>

   <SelectedItemTemplate>
      <TABLE borderColor="#990033" cellSpacing="0" cellPadding="3" width="100%" border="1">
         <TR>
            <TD align="center" bgColor="#990000" colSpan="2">
               <FONT color="#ffffff" size="3">DETAYLAR</FONT>
            </TD>
         </TR>
         <TR>
            <TD>SupplierID:</TD>
            <TD align="left"><%# DataBinder.Eval(Container.DataItem, "SupplierID") %></TD>
         </TR>
         <TR>
            <TD>CompanyName: </TD>
            <TD align="left"><%# DataBinder.Eval(Container.DataItem, "CompanyName") %></TD>
        </TR>
        <TR>
            <TD>ContactName:</TD>
            <TD align="left"><%# DataBinder.Eval(Container.DataItem, "ContactName") %></TD>
        </TR>
        <TR>
           <TD>ContactTitle:</TD>
           <TD align="left"><%# DataBinder.Eval(Container.DataItem, "ContactTitle") %></TD>
        </TR>
        <TR>
           <TD>Address:</TD>
            <TD align="left"><%# DataBinder.Eval(Container.DataItem, "Address") %></TD>
       </TR>
       <TR>
         <TD>City:</TD>
         <TD align="left"><%# DataBinder.Eval(Container.DataItem, "City") %></TD>
       </TR>
      </TABLE>
   </SelectedItemTemplate>

   <ItemStyle Font-Size="2pt" Font-Names="Verdana"></ItemStyle>
   <ItemTemplate>
      <TABLE>
         <TR>
            <TD>SupplierID:</TD>
            <TD align="left"><%# DataBinder.Eval(Container.DataItem, "SupplierID") %></TD>
         </TR>
         <TR>
            <TD>CompanyName:</TD>
            <TD align="left"><%# DataBinder.Eval(Container.DataItem, "CompanyName") %></TD>
         </TR>
         <TR>
            <TD colSpan="2">
               <asp:Button id="btnDetaylar" Text="Detaylar" Runat="server"></asp:Button>
            </TD>
         </TR>
       </TABLE>
    </ItemTemplate>
    <SeparatorTemplate>
     <hr>
    </SeparatorTemplate>
  </asp:datalist>
</center>

Ornek5.aspx

Yukarıdaki Ornek5.aspx koduna dikkatlice bakarsanız; önce SelectedItem Template’in sonra ise Item Template’in geldiğini göreceksiniz. Ayrıca SelectedItem Template’de seçilen elemanla ilgili 6 farklı alanın görüntülendiğini buna karşın ItemTemplate’de ise sadece 2 alanın ve bir de bir düğmenin yeraldığını görürsünüz. Ayrıca ItemStyle ve SelectedItemStyle’ların da DataList içine eklendiğini göreceksiniz. Burda dikkatinizi OnItemCommand="DataList1_ItemCommand" ifadesine çekmek istiyorum. Bu ifade ile ItemCommand olayına karşı çalışmasını istediğimiz metodu belirtiyoruz. Bu metodu arkaplanda çalışan C# kodumuzda inceleyeceğiz.

private void Page_Load(object sender, System.EventArgs e)
{
   if(!Page.IsPostBack)
       VeriyiBagla();
}

public void VeriyiBagla()
{
   // Baglanti nesnemiz:
    SqlConnectionbaglanti=new SqlConnection("server=abuzer;database=Northwind;uid=Ahmet;pwd=ahmet");

   // SQL sorgu komutumuz:
   SqlCommand komut = new SqlCommand();

    komut.CommandText = @"SELECT SupplierID, CompanyName FROM Suppliers ORDER BY SupplierID ";

    // komuta hangi baglantiyi kullancagini bildiriyoruz:
    komut.Connection = baglanti;

   // Veri Adaptörümüz:
   SqlDataAdapter veriAdaptoru = new SqlDataAdapter(komut);

   DataTable veriTablosu = new DataTable(); // Veri tablomuz:

   baglanti.Open(); // Baglantiyi açalim:

   veriAdaptoru.Fill( veriTablosu ); // Veriyi dolduralim:

   baglanti.Close(); // Baglantiyi kapatalim:

   // sonuçlari DataList’e baglayalim:
   DataList1.DataSource = veriTablosu; DataList1.DataBind();

}

public void DataList1_ItemCommand(object source, System.Web.UI.WebControls.DataListCommandEventArgs e)
{
   // Seçilen index hangisi onu bir alalım:
   DataList1.SelectedIndex = e.Item.ItemIndex;

   // Baglanti nesnemiz:
   SqlConnectionbaglanti=newSqlConnection("server=abuzer;database=Northwind;uid=Ahmet;pwd=ahmet");

   // SQL sorgu komutumuz:
   SqlCommand komut = new SqlCommand();

   komut.CommandText = @"SELECT SupplierID, CompanyName, ContactName, ContactTitle, Address, City FROM Suppliers ";

   // komuta hangi baglantiyi kullancagini bildiriyoruz:
   komut.Connection = baglanti;

   // Veri Adaptörümüz:
   SqlDataAdapter veriAdaptoru = new SqlDataAdapter(komut);

   DataTable veriTablosu = new DataTable(); // Veri tablomuz:

   baglanti.Open(); // Baglantiyi açalim:

   veriAdaptoru.Fill( veriTablosu ); // Veriyi dolduralim:

   baglanti.Close(); // Baglantiyi kapatalim:

   // sonuçlari DataList’e baglayalim:
   DataList1.DataSource = veriTablosu;
   DataList1.DataBind();
}

Ornek5.aspx.cs

Yukarıdaki arkaplan kodunda 3 temel metoda yer verdik. Bunlardan birincisi, sayfa ilk yüklendiğinde çağrılan PageLoad() ’dır ki bunun içinde sadece sayfa eğer sunucuya gidip gelmediyse (IsPostBack metodunda faydalanarak) VeriyiBagla() medotumuzu çağrıyoruz. VeriyiBagla() metodunda ise SQL Server’deki Nortwind veritabanından Suppliers tablosundan SupplierID ve CompanyName’lerin tamamını çekiyoruz ve sonuçları DataList1’e bağlıyoruz. Buraya kadar yaptıklarımızı diğer makalelerde de sık sık yaptık. Fakat DataList1_ItemCommand() metodu bizim için yeni kavramlar içermektedir.

Öncellikle DataList1_ItemCommand() metodumuzda;

DataList1.SelectedIndex = e.Item.ItemIndex;

ifadesi ile DataList’in hangi elemanın seçildiğini buluyoruz. Burda e; System.Web.UI.WebControls.DataListCommandEventArgs sınıfından bir nesnedir. e’nin Item özelliğinin, ItemIndex özelliğinden faydalanarak DataList’in hangi elemanın seçildiğini kendisine bildirmek için, DataList’in SelectedIndex özelliğini değiştiriyoruz. Sonra ise daha detaylı bilgileri veritabanınnda getirecek ilgili işlemleri yapıyoruz.

Sayfayı ilk çalıştırdığımızda karşımıza şu şekilde bir ekran çıkmalı.

Eğer Detaylar düğmelerinden birne tıklarsak o elemanla ilgili detayları şuna benzer bir şeklide görüntüleyecektir:

DataList’in Değişik Elemanlarının Görünümünü Ayarlama

Her ne kadar bu makalemizde SelectedItemStyle ile seçilen elemanın stilini değiştirme üzeinde durduysak da; aslında diğer eleman türleri içinde stil kullanma şansımız vardır. Bu stil türleri şunlardır:

ItemStyle	Herhangi bir elemanın stili
AlternatingItemStyle	Art arda gelen veri satırlarının birinin diğerinden farklı olması için kullanılan AlternatingItem’lar için kullanılır.
HeaderStyle	Kontrolünün verileri alt alta yazmasından önce sadece en üstte bir defa görünen başlığın stilidir.
FooterStyle	En altında yine sadece bir defa görünen altlık diyebileceğimiz kısmın stilidir.
SeperatorStyle	Veritabanından gelen her bir satırı diğerinden ayırmak için kullanılabilan kısmın stilidir.
SelectedItemStyle	Seçlien bir eleman için kullanılan stildir.
EditItemStyle	Güncellemek esnasında kullanılan stildir.
ControlStyle	Kontrolün genel stilidir.

Tüm bu stilller TableItemStyle sınfından birer nesnedir. Yukarıdaki stillerin kullanımlarına dair birer örneği kendinizin, makelemizin 2. SelectedItemStyle ile Seçilen Elemanın Görünümünü Ayarlama kısmından faydalanarak yapmaya çalışmanızı, hatta isterseniz bu çalışmanızı benimle paylaşmanızı, tavsiye ederim.

Bu makalemizde; DataList’in bir elemanını seçmeyi, değişen ve diğer elemanlara nasıl stiller uygulayacağımızı inceledik. Bir sonraki makalemizde DataList’teki elemanları nasıl yerinde güncelleyeceğizi ve onları nasıl sileceğimizi öğreneceğiz.

Makale:
ASP.NET DataList Kontrolü - 3 ASP.NET Ahmet Faruk Nacaroğlu

Yazılan Yorumlar
Yorum Yaz

MAY

2012

ayse kul / üye hakkında

bu uygulamayı yaptım butona tıklayınca doğru çalışıyor fakat başka bi butona tıkladığımda selectedindex değiştiği için hata veriyor yani birden fazla detay görüntüleyemiyorum buna öneriniz nedir?

OCA

2012

Mehmet Akif Yanbak / üye hakkında

Örnek dosyaları ekleyebilir misiniz

HAZ

2010

Emrah Önay / üye hakkında

Bilgi paylaşımınız için teşekkürler. Keşke örnek dosyalarıda makaleye eklemiş olsaydınız...

ŞUB

2007

Ahmet Demirel / üye hakkında

Teşekkürler

Sayfalar : 1

Bu Konuda Son 10
Eklenen Son 10
Bu Konuda Geçmiş 10

Bu Konuda Yazılmış Yazılmış 10 Makale Yükleniyor

Makaleler
Serbest Köşe
Makale Gönder

.Net TV
Video Gönder

Canlı Köşe
Kaynak Kod
Forum

Haberler
Röportajlar
Anketler

C# Nedir?
İletişim
Site Haritası
RSS
Favorilere Ekle

Üyelik
Hesap Aktivasyon
Ekibimiz
Ekibe Katıl