Dinamik Web Sitesi – Bölüm 04 – GridView

12/5/2007
Merhaba Dinamik web sitesi’nin bu 4. makalesinde GridView ile tablo gösterilmesini anlatacağım. İlk üç makalede sırasıyla tasarımı oluşturmayı, database bağlantısı ve database’den veri çekmeyi, dinamik oluşturulan sayfalara dinamik link vermeyi incelemiştik. Bu makalede ise listelerimizi GridView ile database’den çekmeyi ve GridView kontrolünü Expression Web ile düzenlemeyi inceleyeceğiz. Bu makalede hazırlamakta olduğumuz FRP Kitap Merkezi sitesinde kitapların fiyatlarının da göründüğü hızlı ulaşılabilir bir liste hazırlayacağız ve bu listeden yine kitap detaylarına link vereceğiz.

Başlayalım. Daha önceki makalelerde kullandığımız kitap imajlarının küçük versiyonlarını içeren bir klasörü (small_photo) site klasörünün dışında oluşturup. Site klasörüne import ettim. Siteye bir dosya ya da klasörü import etme ile ilgili bu serinin ilk makalesini kontrol edebilirsiniz.

Database’de listede yer alacağını düşündüğümüz iki özellik için bir table yarattık ve bu table’ıda kitapDetay table’ı ile ilişiklendirdik. Database, table hazırlama, tablelar arasında ilişki kurma konuları için bu serinin ikinci makalesini kontrol edebilirsiniz.

kitapList table’ını dolduruyoruz.

Database ayarlarımızı tamamladığımıza göre şimdi sitemize dönebiliriz. Bu aşamada sitenin navigasyonuna ekleme yapacağız. İşte şimdi master page ve CSS kullanmanın ne kadar yararlı olduğunu göreceksiniz. Navigasyonumuz alttaki şekildeydi. Biz bu menüdeki Kitap Listesinin altına bir Hızlı Liste ekleyeceğiz.

Split görünüme geçiyoruz. Menümüzü şu şekilde oluşturmuştuk.

Yapmamız gereken tek şey <li><a href=”bookLists.aspx”>Kitap Listesi</a></li> olduğu gibi alıp altına bir kopyasını daha çıkarmak.

Linki ve ismi değiştiriyoruz. Bu kadar.

Master page’i değiştiriyoruz. Değişiklik master page’den yaratılmış tüm sayfalarımızda gerçekleşti.

Navigasyon ayarlarımızı da tamamladığımıza göre şimdi master page’den bir sayfa oluşturuyoruz ve quickList.aspx olarak kaydediyoruz. Master page ve master page’den sayfa oluşturma konuları için bu serinin ilk makalesini kontrol edebilirsiniz.

quickList.aspx sayfasında content alanına Toolbox>ASP.NET Controls>Data altından GridView kontrolünü sürükleyip bırakıyoruz.

New Data Source’u seçiyoruz. Database işlemlerinin aşağıdaki ekrana gelene kadarki kısmını bu serinin ikinci makalesinden kontrol edebilirsiniz.

Configure Select Statement ekranında “Specify a custom SQL or stored procedure”u işaretleyip next’e basıyoruz.

Gelen ekranda Select tabı seçiliyken SQL Statement’e alttaki satırı yazıyoruz.

select * from kitap inner join kitapDetay on kitap.kitapID=kitapDetay.kitapDetayID inner join kitapList on kitapDetay.kitapDetayID=kitapList.kitapListID

Aslında bu serinin üçüncü makalesindekinden farklı bir satır yazmadık. Olanları anlatayım. (SELECT * FROM kitap) ile kitap table’ındaki her şeyin seçileceğini ve (inner join kitapDetay) ile bu seçime kitapDetay table’ındaki her şeyin ekleneceğini (on kitap.kitapID=kitapDetay.kitapDetayID) ile ise eşleşmenin kitap table’nın kitapID’si ile kitapDetay table’nın kitapDetayID’si eşit olanlar arasında olacağını, tekrar (inner join kitapList) tüm bunlara birde kitapList table’ındaki her şeyin ekleneceğini ve yine bu eşleşmenin kitapDetay’ın ID ile kitapList’in ID’si eşit olanlar arasında olacağını  bildiriyoruz.

Next ile devam ediyoruz.

Test Query’ye basarak çektiğimiz verileri kontrol ediyoruz ve her şey yolunda ise Finish ile bitiriyoruz.

Evet Data Gridimiz hazır. Ama elbette istediğimiz gibi görünmüyor. Hemen düzenlemelere başlayalım.

GridView kontrolünün minik okuna tıklayarak açılan Common GridView Tasks’da Edit Columns’u tıklıyoruz.

Açılan Fields ekranında düzenlemeyi yapacağız.

Her şeyden önce görünmesini istemediğimiz kolonları Selected Fields’da seçip yanındaki çarpı işaretine basarak kaldırıyoruz. Bu anda Database’nizi oluştururken isimlendirmelerin anlaşılır olmasının ne kadar önemli olduğunu fark edeceksiniz.  kitapID, kitapImage, kitapID1, kitapDetayID, kitapBaskiYili, aciklama, kitapDetayID1, kitapListID kaldıracağımız kolonlar. Bu işlemlerden sonra GridView’un son hali aşağıdaki gibi.

Kitapların küçük imajlarının tablonun ilk kolonu olmasını istiyoruz. Bunun için yapmamız gereken tek şey, selected fields’da kitapSmallImage’i seçip yandaki yukarı oku ile yukarı taşımak.

Şimdi kolonların başlıklarını değiştirelim. Bunun için, selected fields alanında seçtiğiniz verinin sağda açılan özelliklerindeki Header Text olarak istediğiniz başlığı yazıyorsunuz.

Şimdi imajlarımızı database’den çekelim ve bunlar aynı zamanda kendi detay sayfalarına linkli olsun. Bunun için Selected Fields alanında Resim’i seçip “Convert this field into a template” e basıyoruz. Resim ikonundaki değişikliğe dikkat edin.

Ardından Resim kolonunu seçip okla çıkan Tasks’da Edit Templates’e tıklıyoruz.

Açılan Item Template alanının Resim kolonuna ait olduğunu isim alanından görebilirsiniz. Buradaki [Label]’ı siliyoruz.

Label yerine Toolbox>ASP.NET Controls>Standard altından HyperLink’i sürükleyip bırakıyoruz. HyperLink’in küçük okçuğu ile Edit DataBindings’e tıklıyoruz.

Açılan ekranda ImageUrl’de Bound to’da kitapSmallImage’i seçiyoruz ve Format’a klasör yolumuzu sonunda {0} olacak şekilde yazıyoruz.

NavigateUrl’de ise, Bound to kitapID olacak şekilde Format’a oneBook.aspx?one_book={0} yazıyoruz.

End Template Editing ile işlemi bitiriyoruz.

Sonuç. Sayfamızda tablomuz hazır. İmajlarımız aynı zamanda linkli olacak şekilde database’den çekiliyor.

Peki yazar isimlerinin kitap isimlerinin altında olmasını istiyorsak ne yapacağız? Yapalım. GridView okuyla Edit Columns’a tıklayıp Fields ekranını açıyoruz ve Selected Fields’dan Yazar kolonunu kaldırıyoruz. Ardından Kitap kolonunu “”Convert this field into a template” e basarak editlenebilir hale getiriyoruz. Fields’ı kapıyoruz. Yine GridView okuyla açılan kutudan Edit Templates’e basıyoruz. Gelen Template alanı  en son çalıştığınız alan olacak. Yani bizim için Resim Template’i. Display menüsünden Kitap için Item Template’i seçiyoruz

Template alanında kitapIsmi label’i var. Ama biz yine kitap isimleri kendi detaylarına linkli olsun istiyoruz.

Bu sebeple label’i silip yerine HyperLink sürükleyip bırakıyoruz ve DataBindings ayarlarını yapıyoruz. Bu konun detayı için serinin 3. makalesine göz atabilirsiniz.

Şimdi HyperLink’in altına Toolbox>ASP.NET Controls>Standard altından Label kontrolünü sürükleyip bırakıyoruz.

Label’ın okuna tıklayıp Edit DataBindings’e basıyoruz ve Text özelliği için Bound To için kitapYazar seçiyoruz. OK ile çıkıyoruz. Her şey bitince End Template Editing  ile çıkmayı unutmayın.

Sonuç Sayfanızı kaydetmeyi unutmayın. Her şey güzelce çalışıyor ama tabi ki tablomuzu görsel olarak da düzenlememiz gerekiyor.

Bunun en kolay yolu hazır formatlardan kullanmak. Common GridView Tasks’da AutoFormat’a tıklayın.

Seçtiğiniz Format GridView’nuzu uygulanacaktır. Ama biz bunun yerine her şeyi kendimiz ayarlamak istiyoruz.

Değişikliklerimizi GridView’un Tag Properties’inde yapıyoruz.

– AlternatingRowStyle BackColor #666666
– BorderWidth 0px
– CellPadding 3
– CellSpacing 2
– HeaderStyle BackColor #3F3F3F
– RowStyle BackColor Grey

ile ayarlamalarımızı yapıyoruz.

Sonuç.

Bu makalemde Expression Web’de GridView ve ayarlarını anlattım.

İyi çalışmalar

Teşekkürler