C#nedir?com
 
YAZAR HAKKINDA
Ahmet Faruk Nacaroğlu
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ı : 47892
Yorum Sayısı : 4     yorum yaz
Site İçi AramaSİTE İÇİ ARAMA
Üye Girişini AçÜye GİRİŞİ
Üye girişi için tıklayın.
Kullanıcı Adı
Şifre
 
Beni her zaman hatırla
Bir hafta boyunca kullanıcı bilgilerinizi kullanıcı çıkışı yapana kadar hatırlar. (Paylaşılan bilgisayarlarda önerilmez.)
 
Şifremi / Kullanıcı Adımı unuttum.
 
.net TV RSS 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.
emre TAŞ
XML - Deniz Kılınç
emre TAŞ
yazının devamı >
emre TAŞ
Decompiling and Reverse Engineering .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Masaüstü mü ? İnternet Mi? .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
.Net Kavramları - .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Yeni Başlayanlar için - .Net Radyo
emre TAŞ
yazının devamı >
Makale Gönder Bende Yazmak İstiyorum
.net TV RSSBlogroll
Turhal Temizer
Conda install environment.yml Package 21.4.2021
Turhal Temizer
Mac OS/X Removing CUDA 21.4.2021
Burak Selim Şenyurt
Tie Fighter Değil, Project Tye! 21.4.2021
Burak Selim Şenyurt
Stackoverflow Sevgi Anketinde Yıllardır Bir Numara Çıkan Programlama Dili Rust Kimdir? 21.4.2021
  Diğer Herşey
Sponsorlar
BT Akademi
Medya Portakal
Video Hosting Sponsoru
Csharpnedir.com bir Ineta üyesidir
Uzman Abi
Her Yönüyle C# - Sefer Algan
ASP.NET DataList Kontrolü - 3
 
Kapat
Sayfayı Yazdır Sık Kullanılanlara Ekle Arkadaşıma Gönder MySpace Del.Ico.Us Digg Facebook Google Mixx Reddit StumbleUpon
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:

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

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
25
2012
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
17
2012
Örnek dosyaları ekleyebilir misiniz
HAZ
7
2010
Bilgi paylaşımınız için teşekkürler. Keşke örnek dosyalarıda makaleye eklemiş olsaydınız...
ŞUB
5
2007
Teşekkürler
Sayfalar : 1 
Yorum yazabilmek için üye girişi yapmalısınız. Üye girişi için tıklayın.
Üye değilseniz Üyel Ol linkine tıklayarak üyeliğinizi hemen başlatabilirisniz.
 
  • Bu Konuda Son 10
  • Eklenen Son 10
  • Bu Konuda Geçmiş 10
Bu Konuda Yazılmış Yazılmış 10 Makale Yükleniyor
Son Eklenen 10 Makale Yükleniyor
Bu Konuda Yazılmış Geçmiş Makaleler Yükleniyor