Bu dersimizde Asp.NET te verileri sayfada göstermemizi sağlayan veri kontrollerine değinelim.Listeleme konusunun ilk dersinde access veritabanımıza bağlanmış ve verileri düz bir formatta listelemiştik. Asp.NET te verileri daha düzenli ve kolayca listeleyebileceğimiz hazır kontroller vardır.Şimdi bu kontrolleri ele alalım. Asp.Net te veritabanından verileri çektiktikten sonra bu verileri daha düzenli bir formatta gösteren veri kontrollerini Gridview, FormView, DetailsView, Repeater, DataList,DataGrid olarak sayabiliriz. Bu kontrollerden Gridview,FormView ve DetailsView Asp.NET 2.0 sürümünden sonra gelmiştir. Asp.Net sayfalarını oluşturmak için Dreamweaver kullanıyorsak bu kontrollerden sadece DataGrid,Repeater ve DataListi görebiliriz. Gridview kontrolünün yerine Dreamweaver DataGrid adlı kontolü desteklemektedir. Verilerimizi sırayla bu kontrollerde gösterelim.
Kodlarımız ilk dersteki ile aynı fakat listeleme yaparken bir kaç değişiklik yapıyoruz.
<%@ Import Namespace=”System.data” %>
<%@ Import Namespace=”System.data.oledb” %>
<script runat=”server”>
Sub Page_Load(Src As Object, E As EventArgs)
Dim sorgu as new OleDbCommand
Dim baglanti As New OleDbConnection
Dim veriler As OleDbDataReader
baglanti.ConnectionString = “Provider=Microsoft.jet.oledb.4.0;data source=” & Server.MapPath(“data.mdb”)
baglanti.Open()
sorgu.Connection = baglanti
sorgu.CommandText = “select * from uyeler”
veriler=sorgu.executereader()
DataGrid1.Datasource=veriler
DataGrid1.Databind()
baglanti.Close()
End sub
</script>
<html>
<body>
<form runat=”server”>
<asp:Datagrid ID=”DataGrid1″ runat=”server” AutoGenerateColumns=”true”></asp:DataGrid>
</form>
</body>
</html>
İlk derste verileri listelemek için sadece kod kullanmıştık. İlk kayıttan son kayda kadar bir döngü açmış ve her döngüde kayıtları ekrana yazdırmıştık. Döngü kullandığımız için sayfanın HTML bölümüne gerek kalmamıştı. Html kullanmadığımız için verileri istediğimiz formatta listeleyemedik. Bu kullanımda ise döngünün yerini veri kontrolleri alacak. Veri kontrollerini sayfamızın HTML kısmına yazmamız gerekiyor. Şimdi açıklamalara geçelim.
veriler=sorgu.executereader()
satırı ile sorgumuzdan elde ettiğimiz bilgileri “veriler” nesnesinde tutuyoruz. Daha sonra
DataGrid1.Datasource=veriler
satırı ile veriler nesnesindeki bilgileri DataGrid kontrolüne aktarıyoruz.
DataGrid1.DataBind()
kodu ile de tüm bilgilerin DataGrid de gözükmesini sağlıyoruz.
<asp:Datagrid ID=”DataGrid1″ runat=”server” AutoGenerateColumns=”true”></asp:DataGrid>
DataGrid in yazılımına bakarsak AutoGenerateColumns=”true” özelliği ile aktarılan tüm alanların otomatik olarak gösterilmesini sağlıyoruz. Şunu söylemeyi unutmayalım. Neden DataGrid kontrolünden önce form kullandık? Asp.NET te bunu bir kural olarak düşünelim. Form elemanı ve veri kontrolü kullandığımız sayfalarda form etiketini kullanmak zorundayız. Ayrıca formun özelliğine runat=”server” yazmamız gerekiyor. Sayfamızda runat=”server” özelliği bulunan sadece bir adet form etiketi olabilir. İkinci bir form etiketi eklersek sayfamız hata verecektir. Tüm bu kodlardan sonra sayfamız şöyle olacaktır.
| Kimlik | mesaj | yazan |
| 3 | Merhaba | Ahmet |
| 4 | Selam | Ali |
| 5 | Çok Güzel | Elif |
Gördüğünüz gibi Datagrid kontrolü bir tabloya benzemekte. Fakat biz verileri herzaman tablo gibi listelemeyebiliriz. Farklı tasarımda listeleme yapmak için Datagrid in tasarımını kendimiz yapmamız gerekiyor. Tasarımını kendimiz belirlediğimiz zaman AutoGenerateColumns=”false” özelliği false değerini alacak. DataGrid in stilini Dreamweaver da üzerine sağ tıklayıp Etiketi düzenle diyip değiştirebiliriz.
Asp.NET 2.0 sürümünden sonra DataGrid in yerine GridView kontrolü kullanılmaya başlanmıştır. Bu kontrolünde kullanımı da hemen hemen aynı. Fakat bu kontrolü Dreamweaver görsel olarak desteklememekte. Bu kontrolü Dreamweaverda sayfaya eklerken kod yazmamız gerekiyor. Şimdi bu kontrolün kullanımını ve biraz daha ayrıntısını anlatalım. Yukarıdaki kodlarda html kısmındaki DataGrid kontrolünü silip aşağıdaki kodları yazın.
<asp:GridView ID=”GridView1″ AutoGenerateColumns=”true” runat=”server”></asp:GridView>
Gördüğünüz gibi sadece DataGrid yazısı GridView oldu. Tabiki GridView daha gelişmiş ve daha özellikli bir kontrol. DataGrid1.Datasource ve DataGrid1.DataBind kodlarını da değiştirmeyi unutmayın. Şimdi GridView in bazı basit özelliklerini görelim.
<asp:GridView ID=”GridView1″ AutoGenerateColumns=”true” runat=”server”>
<HeaderStyle BackColor=”#663399″ />
<RowStyle BackColor=”#ff9900″ />
<AlternatingRowStyle BackColor=”#ffffff” />
</asp:GridView>
HeaderStyle GridView in başlık kısmı. RowStyle Satır rengi, AlternatingRowStyle ise bir sonraki satır rengi. BackColor arkaplan rengi demek.
Şimdi GridView kontrolünün tasarımını değiştirelim. Yani veriler GridView de tablo gibi alt alta değilde bizim istediğimiz yerlerde gözüksün. Mesela bir ziyaretçi defteri örneği verelim. Bu örnekte isim ve tarih üstte mesaj altta kalıyor. Peki GridView kontrolünü bu hale getirebilirmiyiz? Tabiki.
İlk olarak AutoGenerateColumns=”false” özelliğini false yapıyoruz ve alanlar otomatik tablo gibi oluşmuyor. Daha sonra GridView kontrolünün içine aşağıdaki kodları yazıyoruz.
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”false” GridLines=”none”>
<RowStyle backcolor=”#0099CC”/>
<AlternatingRowStyle backcolor=”#ffffff”/>
<columns>
<asp:TemplateField>
<itemtemplate>
<table width=”258″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td><%# Eval(“yazan”) %>, <%# Eval(“tarih”) %>
</td>
</tr>
<tr>
<td><%# Eval(“Mesaj”) %>
</td>
</tr>
</table>
</itemtemplate><headertemplate>MESAJ PANOSU</headertemplate>
</asp:TemplateField>
</columns>
</asp:GridView>
Şimdi tüm satırları açıklayalım.
GridLines=”none” ile GridView in kenarlıklarını kaldırıyoruz.
<columns></columns> özelliği içinde Gridview üzerinde yanyana gözükecek olan alanları tanımlayacağız. AutoGenerateColumns=”false” olduğu için sütunlar otomatik eklenmiyor. Sütunları bizim eklememiz gerekiyor. Gridview içine bir çok sütun ekleyebiliriz. <asp:TemplateField> sadece bir tanesi. İleriki uygulamlarımızda her satırın yanına Sil,Seç,Düzenle,Güncelle gibi butonları ekleyeceğiz. Bu butonları eklerken <asp:CommandField> bölümünü kullancağız.
<asp:TemplateField></asp:TemplateField> ile tasarım alanı ekleyeceğimizi belirtiyoruz.
<itemtemplate></itemtemplate> etiketleri içine Gridview de gözükecek verilerin tasarımını ekliyoruz. Burda kendi belirlediğimiz bir formatta tablo ekledik.
<AlternatingItemTemplate></AlternatingItemTemplate> ise bir sonraki kaydın formatıdır(Kod içinde kullanmadık). Yani satırların daha iyi okunmasını sağlamak amacıyla birbirini takip eden satırların farklı formatta gösterilmesini sağlar.
<%# Eval(“yazan”) %> kodu ile veritabanındaki yazan alanındaki bilgiyi alıyoruz ve ekrana yazdırıyoruz. burda şunuda söyliyelim HTML etiketleri içine ASP:NET kodları eklerken <%# %> işaretlerini kullanıyoruz.
<headertemplate></headertemplate> ile GridView in başlık tasarımını belirliyoruz.
<footertemplate></footertemplate> Gridview in alt tarafıdır.
En sonda açtığımız tüm etiketleri sırasıyla kapatıyoruz. DreamWeaverda tüm bu kodları kendimiz yazmak zorundayız. DreamWeaver görsel olarak GridView kontrolüne destek vermiyor. Fakat Microsoft firmasının çıkardığı Web Developer programını kullanırsanız tüm özellikleri kod yazmadan halledebilirsiniz. Ama en mantıklısı önce kodu öğrenmektir. İlerki derslerimizde GridView kontrolünün daha ayrıntılı özelliklerine değineceğiz.
Şimdi de diğer kontrollere değinelim.
DataList : Bu kontrol GridView kadar gelişmiş olmasada verileri yan yana göstermemizi sağlar.
DetailsView: Bu kontrol sadece bir kayıt gösterir. İsminden de anlaşılacağı gibi bir kaydın ayrıntılı bilgilerini göstermek için kullanılır.
FormView : Bu kontrol DetailsView kontrolüne benzer. Tek farkı tasarımının hazır değil kullanıcı tarafından belirlenmesidir.
Tüm kontrollerin veritabanına bağlanması hemen hemen aynıdır. Daha sonraki uygulamalarda diğer kontrolleride kullanacağız. Şimdilik hoşçakalın.
