|
|
|
ASP.NET DataList Kontrolü - 3 |
|
| Gönderiliyor lütfen bekleyin... |
|
|
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
|
|
|
|
|
-
-
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
|
|
|