{"id":405,"date":"2010-06-25T11:50:03","date_gmt":"2010-06-25T11:50:03","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=405"},"modified":"2014-01-16T23:49:18","modified_gmt":"2014-01-16T23:49:18","slug":"dinamik-web-sitesi-bolum-04-gridview","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=405","title":{"rendered":"Dinamik Web Sitesi – B\u00f6l\u00fcm 04 – GridView"},"content":{"rendered":"

12\/5\/2007<\/em>
\nMerhaba Dinamik web sitesi’nin bu 4. makalesinde GridView ile tablo g\u00f6sterilmesini anlataca\u011f\u0131m. \u0130lk \u00fc\u00e7 makalede s\u0131ras\u0131yla tasar\u0131m\u0131 olu\u015fturmay\u0131, database ba\u011flant\u0131s\u0131 ve database’den veri \u00e7ekmeyi, dinamik olu\u015fturulan sayfalara dinamik link vermeyi incelemi\u015ftik. Bu makalede ise listelerimizi GridView ile database’den \u00e7ekmeyi ve GridView kontrol\u00fcn\u00fc Expression Web ile d\u00fczenlemeyi inceleyece\u011fiz. Bu makalede haz\u0131rlamakta oldu\u011fumuz FRP Kitap Merkezi sitesinde kitaplar\u0131n fiyatlar\u0131n\u0131n da g\u00f6r\u00fcnd\u00fc\u011f\u00fc h\u0131zl\u0131 ula\u015f\u0131labilir bir liste haz\u0131rlayaca\u011f\u0131z ve bu listeden yine kitap detaylar\u0131na link verece\u011fiz.<\/p>\n


\nBa\u015flayal\u0131m. Daha \u00f6nceki makalelerde kulland\u0131\u011f\u0131m\u0131z kitap imajlar\u0131n\u0131n k\u00fc\u00e7\u00fck versiyonlar\u0131n\u0131 i\u00e7eren bir klas\u00f6r\u00fc (small_photo) site klas\u00f6r\u00fcn\u00fcn d\u0131\u015f\u0131nda olu\u015fturup. Site klas\u00f6r\u00fcne import ettim. Siteye bir dosya ya da klas\u00f6r\u00fc import etme ile ilgili bu serinin ilk makalesini kontrol edebilirsiniz.<\/p>\n

Database’de listede yer alaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm\u00fcz iki \u00f6zellik i\u00e7in bir table yaratt\u0131k ve bu table’\u0131da kitapDetay table’\u0131 ile ili\u015fiklendirdik. Database, table haz\u0131rlama, tablelar aras\u0131nda ili\u015fki kurma konular\u0131 i\u00e7in bu serinin ikinci makalesini kontrol edebilirsiniz.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

kitapList table’\u0131n\u0131 dolduruyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Database ayarlar\u0131m\u0131z\u0131 tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re \u015fimdi sitemize d\u00f6nebiliriz. Bu a\u015famada sitenin navigasyonuna ekleme yapaca\u011f\u0131z. \u0130\u015fte \u015fimdi master page ve CSS kullanman\u0131n ne kadar yararl\u0131 oldu\u011funu g\u00f6receksiniz. Navigasyonumuz alttaki \u015fekildeydi. Biz bu men\u00fcdeki Kitap Listesinin alt\u0131na bir H\u0131zl\u0131 Liste ekleyece\u011fiz.<\/p>\n

\"\"<\/p>\n

Split g\u00f6r\u00fcn\u00fcme ge\u00e7iyoruz. Men\u00fcm\u00fcz\u00fc \u015fu \u015fekilde olu\u015fturmu\u015ftuk.<\/p>\n

<ul>
\n<li><a href=”default.aspx”>Ana Sayfa<\/a><\/li>
\n<li><a href=”bookLists.aspx”>Kitap Listesi<\/a><\/li>
\n<li><a href=”writers.aspx”>Yazarlar<\/a><\/li>
\n<li><a href=”messages.aspx”>Mesajlar<\/a><\/li>
\n<li><a href=”frp.aspx”>FRP Nedir?<\/a><\/li>
\n<\/ul><\/div>\n

Yapmam\u0131z gereken tek \u015fey <li><a href=”bookLists.aspx”>Kitap Listesi<\/a><\/li> oldu\u011fu gibi al\u0131p alt\u0131na bir kopyas\u0131n\u0131 daha \u00e7\u0131karmak.<\/p>\n

<ul>
\n<li><a href=”default.aspx”>Ana Sayfa<\/a><\/li>
\n<li><a href=”bookLists.aspx”>Kitap Listesi<\/a><\/li>
\n<li><a href=”bookLists.aspx”>Kitap Listesi<\/a><\/li>
\n<li><a href=”writers.aspx”>Yazarlar<\/a><\/li>
\n<li><a href=”messages.aspx”>Mesajlar<\/a><\/li>
\n<li><a href=”frp.aspx”>FRP Nedir?<\/a><\/li>
\n<\/ul><\/div>\n

Linki ve ismi de\u011fi\u015ftiriyoruz. Bu kadar.<\/p>\n

<ul>
\n<li><a href=”default.aspx”>Ana Sayfa<\/a><\/li>
\n<li><a href=”bookLists.aspx”>Kitap Listesi<\/a><\/li>
\n<li><a href=”quickList.aspx”>H\u0131zl\u0131 Liste<\/a><\/li>
\n<li><a href=”writers.aspx”>Yazarlar<\/a><\/li>
\n<li><a href=”messages.aspx”>Mesajlar<\/a><\/li>
\n<li><a href=”frp.aspx”>FRP Nedir?<\/a><\/li>
\n<\/ul><\/div>\n

Master page’i de\u011fi\u015ftiriyoruz. De\u011fi\u015fiklik master page’den yarat\u0131lm\u0131\u015f t\u00fcm sayfalar\u0131m\u0131zda ger\u00e7ekle\u015fti.<\/p>\n

\"\"<\/a><\/p>\n

Navigasyon ayarlar\u0131m\u0131z\u0131 da tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re \u015fimdi master page’den bir sayfa olu\u015fturuyoruz ve quickList.aspx olarak kaydediyoruz. Master page ve master page’den sayfa olu\u015fturma konular\u0131 i\u00e7in bu serinin ilk makalesini kontrol edebilirsiniz.<\/p>\n

quickList.aspx sayfas\u0131nda content alan\u0131na Toolbox>ASP.NET Controls>Data alt\u0131ndan GridView kontrol\u00fcn\u00fc s\u00fcr\u00fckleyip b\u0131rak\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

New Data Source’u se\u00e7iyoruz. Database i\u015flemlerinin a\u015fa\u011f\u0131daki ekrana gelene kadarki k\u0131sm\u0131n\u0131 bu serinin ikinci makalesinden kontrol edebilirsiniz.<\/p>\n

Configure Select Statement ekran\u0131nda “Specify a custom SQL or stored procedure”u i\u015faretleyip next’e bas\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

Gelen ekranda Select tab\u0131 se\u00e7iliyken SQL Statement’e alttaki sat\u0131r\u0131 yaz\u0131yoruz.<\/p>\n

select * from kitap inner join kitapDetay on kitap.kitapID=kitapDetay.kitapDetayID inner join kitapList on kitapDetay.kitapDetayID=kitapList.kitapListID<\/p>\n

Asl\u0131nda bu serinin \u00fc\u00e7\u00fcnc\u00fc makalesindekinden farkl\u0131 bir sat\u0131r yazmad\u0131k. Olanlar\u0131 anlatay\u0131m. (SELECT * FROM kitap) ile kitap table’\u0131ndaki her \u015feyin se\u00e7ilece\u011fini ve (inner join kitapDetay) ile bu se\u00e7ime kitapDetay table’\u0131ndaki her \u015feyin eklenece\u011fini (on kitap.kitapID=kitapDetay.kitapDetayID) ile ise e\u015fle\u015fmenin kitap table’n\u0131n kitapID’si ile kitapDetay table’n\u0131n kitapDetayID’si e\u015fit olanlar aras\u0131nda olaca\u011f\u0131n\u0131, tekrar (inner join kitapList) t\u00fcm bunlara birde kitapList table’\u0131ndaki her \u015feyin eklenece\u011fini ve yine bu e\u015fle\u015fmenin kitapDetay’\u0131n ID ile kitapList’in ID’si e\u015fit olanlar aras\u0131nda olaca\u011f\u0131n\u0131\u00a0 bildiriyoruz.<\/p>\n

Next ile devam ediyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Test Query’ye basarak \u00e7ekti\u011fimiz verileri kontrol ediyoruz ve her \u015fey yolunda ise Finish ile bitiriyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Evet Data Gridimiz haz\u0131r. Ama elbette istedi\u011fimiz gibi g\u00f6r\u00fcnm\u00fcyor. Hemen d\u00fczenlemelere ba\u015flayal\u0131m.<\/p>\n

\"\"<\/a><\/p>\n

GridView kontrol\u00fcn\u00fcn minik okuna t\u0131klayarak a\u00e7\u0131lan Common GridView Tasks’da Edit Columns’u t\u0131kl\u0131yoruz.<\/p>\n

\"\"<\/p>\n

A\u00e7\u0131lan Fields ekran\u0131nda d\u00fczenlemeyi yapaca\u011f\u0131z.<\/p>\n

\"\"<\/a><\/p>\n

Her \u015feyden \u00f6nce g\u00f6r\u00fcnmesini istemedi\u011fimiz kolonlar\u0131 Selected Fields’da se\u00e7ip yan\u0131ndaki \u00e7arp\u0131 i\u015faretine basarak kald\u0131r\u0131yoruz. Bu anda Database’nizi olu\u015ftururken isimlendirmelerin anla\u015f\u0131l\u0131r olmas\u0131n\u0131n ne kadar \u00f6nemli oldu\u011funu fark edeceksiniz.\u00a0 kitapID, kitapImage, kitapID1, kitapDetayID, kitapBaskiYili, aciklama, kitapDetayID1, kitapListID kald\u0131raca\u011f\u0131m\u0131z kolonlar. Bu i\u015flemlerden sonra GridView’un son hali a\u015fa\u011f\u0131daki gibi.<\/p>\n

\"\"<\/a><\/p>\n

Kitaplar\u0131n k\u00fc\u00e7\u00fck imajlar\u0131n\u0131n tablonun ilk kolonu olmas\u0131n\u0131 istiyoruz. Bunun i\u00e7in yapmam\u0131z gereken tek \u015fey, selected fields’da kitapSmallImage’i se\u00e7ip yandaki yukar\u0131 oku ile yukar\u0131 ta\u015f\u0131mak.<\/p>\n

\"\"<\/a><\/p>\n

\u015eimdi kolonlar\u0131n ba\u015fl\u0131klar\u0131n\u0131 de\u011fi\u015ftirelim. Bunun i\u00e7in, selected fields alan\u0131nda se\u00e7ti\u011finiz verinin sa\u011fda a\u00e7\u0131lan \u00f6zelliklerindeki Header Text olarak istedi\u011finiz ba\u015fl\u0131\u011f\u0131 yaz\u0131yorsunuz.<\/p>\n

\"\"<\/a><\/p>\n

\u015eimdi imajlar\u0131m\u0131z\u0131 database’den \u00e7ekelim ve bunlar ayn\u0131 zamanda kendi detay sayfalar\u0131na linkli olsun. Bunun i\u00e7in Selected Fields alan\u0131nda Resim’i se\u00e7ip “Convert this field into a template” e bas\u0131yoruz. Resim ikonundaki de\u011fi\u015fikli\u011fe dikkat edin.<\/p>\n

\"\"<\/a> \"\"<\/p>\n

Ard\u0131ndan Resim kolonunu se\u00e7ip okla \u00e7\u0131kan Tasks’da Edit Templates’e t\u0131kl\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

A\u00e7\u0131lan Item Template alan\u0131n\u0131n Resim kolonuna ait oldu\u011funu isim alan\u0131ndan g\u00f6rebilirsiniz. Buradaki [Label]’\u0131 siliyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Label yerine Toolbox>ASP.NET Controls>Standard alt\u0131ndan HyperLink’i s\u00fcr\u00fckleyip b\u0131rak\u0131yoruz. HyperLink’in k\u00fc\u00e7\u00fck ok\u00e7u\u011fu ile Edit DataBindings’e t\u0131kl\u0131yoruz.<\/p>\n

\"\"<\/p>\n

A\u00e7\u0131lan ekranda ImageUrl’de Bound to’da kitapSmallImage’i se\u00e7iyoruz ve Format’a klas\u00f6r yolumuzu sonunda {0} olacak \u015fekilde yaz\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

NavigateUrl’de ise, Bound to kitapID olacak \u015fekilde Format’a oneBook.aspx?one_book={0} yaz\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

End Template Editing ile i\u015flemi bitiriyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Sonu\u00e7. Sayfam\u0131zda tablomuz haz\u0131r. \u0130majlar\u0131m\u0131z ayn\u0131 zamanda linkli olacak \u015fekilde database’den \u00e7ekiliyor.<\/p>\n

\"\"<\/a><\/p>\n

Peki yazar isimlerinin kitap isimlerinin alt\u0131nda olmas\u0131n\u0131 istiyorsak ne yapaca\u011f\u0131z? Yapal\u0131m. GridView okuyla Edit Columns’a t\u0131klay\u0131p Fields ekran\u0131n\u0131 a\u00e7\u0131yoruz ve Selected Fields’dan Yazar kolonunu kald\u0131r\u0131yoruz. Ard\u0131ndan Kitap kolonunu “”Convert this field into a template” e basarak editlenebilir hale getiriyoruz. Fields’\u0131 kap\u0131yoruz. Yine GridView okuyla a\u00e7\u0131lan kutudan Edit Templates’e bas\u0131yoruz. Gelen Template alan\u0131\u00a0 en son \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z alan olacak. Yani bizim i\u00e7in Resim Template’i. Display men\u00fcs\u00fcnden Kitap i\u00e7in Item Template’i se\u00e7iyoruz<\/p>\n

\"\"<\/a><\/p>\n

Template alan\u0131nda kitapIsmi label’i var. Ama biz yine kitap isimleri kendi detaylar\u0131na linkli olsun istiyoruz.<\/p>\n

\"\"<\/p>\n

Bu sebeple label’i silip yerine HyperLink s\u00fcr\u00fckleyip b\u0131rak\u0131yoruz ve DataBindings ayarlar\u0131n\u0131 yap\u0131yoruz. Bu konun detay\u0131 i\u00e7in serinin 3. makalesine g\u00f6z atabilirsiniz.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\u015eimdi HyperLink’in alt\u0131na Toolbox>ASP.NET Controls>Standard alt\u0131ndan Label kontrol\u00fcn\u00fc s\u00fcr\u00fckleyip b\u0131rak\u0131yoruz.<\/p>\n

\"\"<\/p>\n

Label’\u0131n okuna t\u0131klay\u0131p Edit DataBindings’e bas\u0131yoruz ve Text \u00f6zelli\u011fi i\u00e7in Bound To i\u00e7in kitapYazar se\u00e7iyoruz. OK ile \u00e7\u0131k\u0131yoruz. Her \u015fey bitince End Template Editing\u00a0 ile \u00e7\u0131kmay\u0131 unutmay\u0131n.<\/p>\n

\"\"<\/a><\/p>\n

Sonu\u00e7 Sayfan\u0131z\u0131 kaydetmeyi unutmay\u0131n. Her \u015fey g\u00fczelce \u00e7al\u0131\u015f\u0131yor ama tabi ki tablomuzu g\u00f6rsel olarak da d\u00fczenlememiz gerekiyor.<\/p>\n

\"\"<\/a><\/p>\n

Bunun en kolay yolu haz\u0131r formatlardan kullanmak. Common GridView Tasks’da AutoFormat’a t\u0131klay\u0131n.<\/p>\n

\"\"<\/a><\/p>\n

Se\u00e7ti\u011finiz Format GridView’nuzu uygulanacakt\u0131r. Ama biz bunun yerine her \u015feyi kendimiz ayarlamak istiyoruz.<\/p>\n

\"\"<\/a><\/p>\n

De\u011fi\u015fikliklerimizi GridView’un Tag Properties’inde yap\u0131yoruz.<\/p>\n

\"\"<\/p>\n

– AlternatingRowStyle BackColor #666666
\n– BorderWidth 0px
\n– CellPadding 3
\n– CellSpacing 2
\n– HeaderStyle BackColor #3F3F3F
\n– RowStyle BackColor Grey<\/p>\n

ile ayarlamalar\u0131m\u0131z\u0131 yap\u0131yoruz.<\/p>\n

Sonu\u00e7.<\/p>\n

\"\"<\/a><\/p>\n

Bu makalemde Expression Web’de GridView ve ayarlar\u0131n\u0131 anlatt\u0131m.<\/p>\n

\u0130yi \u00e7al\u0131\u015fmalar<\/p>\n

Te\u015fekk\u00fcrler<\/p>\n","protected":false},"excerpt":{"rendered":"

12\/5\/2007 Merhaba Dinamik web sitesi’nin bu 4. makalesinde GridView ile tablo g\u00f6sterilmesini anlataca\u011f\u0131m. \u0130lk \u00fc\u00e7 makalede s\u0131ras\u0131yla tasar\u0131m\u0131 olu\u015fturmay\u0131, database ba\u011flant\u0131s\u0131 ve database’den veri \u00e7ekmeyi, dinamik olu\u015fturulan sayfalara dinamik link vermeyi incelemi\u015ftik. Bu makalede ise listelerimizi GridView ile database’den \u00e7ekmeyi ve GridView kontrol\u00fcn\u00fc Expression Web ile d\u00fczenlemeyi inceleyece\u011fiz. Bu makalede haz\u0131rlamakta oldu\u011fumuz FRP Kitap Merkezi […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[29],"class_list":["post-405","post","type-post","status-publish","format-standard","hentry","category-teknik-yazi","tag-expression-web"],"_links":{"self":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=405"}],"version-history":[{"count":5,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/405\/revisions"}],"predecessor-version":[{"id":2538,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/405\/revisions\/2538"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=405"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}