1. Bölüm de ASP.NET Web kontrolü olan ve HTML tablo tagi içerisinde verileri göstermek için tasarlanmis DataGrid?in temellerini ögrendik, ASP.NET sayfasi içerisinde veritabani içerigi göstermenin ne kadar kolay oldugu anladik. 2. Bölüm de ise DataGrid?in görünüsünü nasil özellestirebilecegimizi, küçük bir programlama kodu ile veritabanindaki bilgileri nasil dikkat çekici bir hale getirdigimizi gördük.
Veriyi sunmak hos ve tamam, peki birde DataGrid ile biraz daha farkli olaylari yapabilseydik gerçekten kullanisli olmazmiydi. Mesela, bir e-Ticaret firmasi için çalistiginizi ve herbir siparis için verileri DataGrid ile gösterdiginizi düsünün. Herbir siparisin, siparis verilen ürün, siparis verilen tarih, alicinin bilgileri(name,address, vs), alicinin seçtigi nakliye ayarlari vs. Gibi bir çok iliskisel verileri bulunmakta. Bütün bu bilgileri bir DataGrid?te (herbir siparis için) sunmak bilginin tasmasina sebep olabilir.
2. Bölümde gördügümüz gibi, DataGrid?in AutoGenerateColums özelligini False olarak ayarlayip daha sonradan Columns özelligini görüntülemek istedigimiz siparis bilgisine göre belirleyebiliriz.
Bu sekide veriyi kolayca parçalamis oluyoruz, peki ya kullanici her bir siparisin detaylarini görme özelligini isterse ? Yapmamiz gereken DataGrid?in herbir satirinda üzerine tiklandiginda siparisin bütün bilgilerini göstericek ?Detay? butonu yerlestirmek.
Örneklerimizi gelistirelim ve Pubs tablomuza herbir satira üzerine tikladigimizda detaylarini getirecegi bir ?detay? butonu yerlestirelim.
Temelin üzerine insaa etmek
2. Bölümde gördügümüz gibi, DataGrid kontrolü Column tagi içerisinde bir çok BoundColumn tagi içermekte. DataGrid içerisinde bulunan BoundColumn taglarindan herbiri sayfamizda bir kolon olarak gözükür. DataGrid?e bir buton yerlestirmek için ButtonColumn tagini BoundColumn taglarini kullandigimiz sekilde kullaniriz. Asagidaki kod DataGrid?e nasil buton yerlestirdiginizi göstermektedir.
| < form runat=”server”>
<asp:DataGrid runat=”server” id=”dgAuthors” BackColor=”#eeeeee” Width=”85%” HorizontalAlign=”Center” Font-Name=”Verdana” CellPadding=”4″ Font-Size=”10pt” AutoGenerateColumns=”False”> <HeaderStyle BackColor=”Black” ForeColor=”White” Font-Bold=”True” HorizontalAlign=”Center” /> <AlternatingItemStyle BackColor=”White” /> <Columns> <asp:ButtonColumn Text=”Details” HeaderText=”Detay” /> <asp:BoundColumn DataField=”au_id” Visible=”False” /> <asp:BoundColumn DataField=”address” HeaderText=”Adres” /> </Columns> </asp:datagrid> < /form> |
Dikkat ederseniz bu isi yapabilmemiz için DataGrid?i bir server-side formun içine(<form runat=?server?>) yerlestirmemiz gerekli. Bunun sebebi butonun tiklanmasi durumda ilgili olayin gerçeklesip gerçeklesmedigini takip ederek, ASP.NET sayfalarinin DataGrid içindeki butonlari ve sayfayi yeniden olusturmak istegi. Bunun için ASP.NET sayfalarinin ViewState özelligine ihtiyaci var.
Dikkat etiyseniz örnekte olusturdugumuz buton, yazidan olusan bir link butonu. Bu ButtonColumn class?i tarafindan üretilen ve varsayilan görüntüdür. Eger standart bir buton göstermek isterseniz: ButtonColumn tagi içerisinde, özelligi ButtonType=?PushButton? olarak ayarlamalisiniz. ButtonColumn class?i birkaç önemli özellik barindirir. Görüntü ile ilgili olan iki tanesini yukaridaki örnegimizde kullandik. HeaderText DataGrid?te butonun gözükeçegi kolonun baslik yazisini belirler. Text her bir butonun yazisini belirler.
BoundColumn tag?i ile, ButtonColumn tag?i içerisindeki butonlarin yazisini DataGrid?in DataSource?dan gelen degerler olarak atayabilirsiniz- bunun için ButtonColumn içerisindeki Text özelligini atlayip, veritabanindaki degerlerini göstermek istediginiz kolonlarin degerini DataTextField özelligine atamalisiniz.
Button tiklandiginda birseyler gerçeklestirelim
Su anda DataGrid?imizde bir butonumuz var, simdi ise bu butona tiklandiginda bazi olaylarin gerçeklesmesi için server-side kodumuzu yazalim. DataGrid?te ButtonColumn butonuna tiklandiginda ItemCommand olayinin ateslenmektedir, bu nedenle server-side event-handler?imizi bu olaya yazmaliyiz. Bu event handler su sekilde olmali:
| Sub eventHandlerName(sender as Object, e as DataGridCommandEventArgs)
… End Sub |
Bir kere bu fonksiyonu server-side script blogunda(veya code-behind sayfamizda) tanimlarsaniz DataGrid tag?i içerisinde OnItemCommand özelligini ekleyerek bu event handler?a ulasabilirsiniz.Mesela:
| < asp:datagrid runat=”server”
… OnItemCommand=”eventHandlerName”> … < /asp:datagrid> |
Asagidaki kod DataGrid içindeki butonlara tiklandiginda bir event handler?in nasil çalistiginiz gösteriyor:
| < script language=”vb” runat=”server”>
Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then BindData()’Sayfa sadece ilk defa yüklendiginde veri yüklenecek End If End Sub Sub BindData() ‘Make a connection to the database ‘Databind the DataReader results to the DataGrid. End Sub Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs) Response.Write(“You clicked one of the details buttons!”) End Sub < /script> <form runat=”server”> <asp:DataGrid runat=”server” … > … </asp:datagrid> < /form>
|
Burada dikkat etmeniz gereken önemli bir nokta: DataGrid?e veriyi sadece sayfa ilk defa yüklendiginde sorgu çalistirip yüklüyoruz. Page_Load event handler?i sayfa her yüklendiginde çalisir, bizim safyamizin geri gönderildigini kontrol etmemiz gerekir. Eger gönderilmemisse bu sayfaya ilk ziyarettir. Bu durumda DataReader olusturarak veritabanindaki verileri alir, ve DataGrid?in DataSource özelligini ayarlar daha sonrasinda ise DataBind() metodunu çagiririz.
Ne zaman biri ?Detay? butonuna tiklarsa ASP.NET Web sayfasi geri gönderilecek. Tekrar Page_Load event handler?imiz ateslenicek, fakat bu sefer sayfamiz geri gönderildigi için BindData() kismi çalistirilmaz. Bu sefer detailsClicked event handler?i çalistirilir. Dikkat etmeniz gereken eger DataGrid?e verileri tekrar yüklersek(bunu If Not Page.IsPostBack kontrolü ile engelliyoruz) verilerin tekrar yüklenmesi ItemCommand event?ini etki disi birakacagindan detailsClicked event handler?i çalismaz.
Bu örnegimiz bize ButtonColums tagi içerisinde bulunan buton tiklamasi ile iliskili event handler?in nasil çalistigini gösterdi.
Hangi Satirin Buttonu Tiklandi
Button click için olan event handler?ini hatirlayalim:
| Sub eventHandlerName(sender as Object, e as DataGridCommandEventArgs)
… End Sub |
DataGridCommandEventArgs class?i bir olayi ateslenmesine sebep olan ve nesnenin kaynagini içeren bir Item özelligi barindirir.
Bu nesne, DataGrid içerisinde tiklanan satira karsilik gelen TableRow class?inin bir örnegidir. TableRow class?ina cells özelligini kullanarak ulasabilir ve hücre degerini atamak istediginiz kolonu belirleyebilirsiniz. Bunun, Column kolleksiyonu asagidaki gibi tanimlanan bir DataGrid oldugunu hayal edin:
| <asp:DataGrid runat=”server” … >
<Columns> <asp:ButtonColumn Text=”Details” HeaderText=”Detay” CommandName=”details” /> <asp:BoundColumn DataField=”au_id” HeaderText=”Auther ID” /> <asp:BoundColumn DataField=”address” HeaderText=”Adres” /> </Columns> < /asp:datagrid> |
Sonra, button click event handler?i içerisinde tiklanan satirin kolonunu belirtiriz:
| Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)
Dim buttonColumn as TableCell = e.Item.Cells(0) Dim AUIDColumn as TableCell = e.Item.Cells(1) Dim AddrColumn as TableCell = e.Item.Cells(2)
Dim buttonColText as String = buttonColumn.Text Dim AUIDColText as String = AUIDColumn.Text Dim AddrColText as String = AddrColumn.Text End Sub |
Örnegi iyice kontrol ettiginizden emin olun. Burada dikkat ediceginiz ilk sey button kolonunun bir yazi içermemesi. Bunun sebebi HTML?in görüntüyü button olarak göstermesi, ve bu nedenle TableCell?in Text özelligi bos deger gönderir.
Yazimizin basinda siparis bilgilerinin bir bölümünü gösteren,fakat herhangi birinin bir siparis hareketinin tüm detaylarini görebilme özelligi olan bir e-Commerce firmasi senaryosunu ele almistik. Örnegimiz bu senaryodan oldukça uzak, biz bunun sadece SQL sorgusundan gelen bir grubunu gösterdik. Bizim sadece yazarin adress kismini gösterdigimizi ve detay butonuna tikladiginizda kullanicinin bu kayitla ilgili diger bilgileri görmek istedigini hayal edin.
Hatirlarsaniz au_id kolonunu DataGridimiz içinde göstermek istemiyorduk, ve hala bizim detailsClicked event handler?inin bu veriye ihtiyaci var, çünkü veritabanimizda bu alan herbir satiri tanitan primary key. Bu bilgiyi DataGrid tagi içerisinde birkaç küçük degisiklik yaparak aktarabiliriz: BoundColumn tagi ile veritabanindan bu kolonu aliyoruz ve Visible=?False? özelligi ekliyoruz. Bu sekilde kolonu gizliyoruz fakat hala detailsClicked event handlerina e.Item.Cells(1).Text ile istenilen Id?yi gönderebiliyoruz.
Bu yüzden yapmamiz gereken butona tiklandiginda id bilgisini yakalayan ve ayrintili bilgi görmek isteyen kullaniciya ayrintilari gösteren detailsClicked event handler?i üzerinde yeniden çalismamiz gerekiyor. Simdi sayfamiz su sekilde gözükmeli:
| <script language=”vb” runat=”server”>
Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then BindData() ‘Only bind the data on the first page load End If End Sub Sub BindData() ‘Make a connection to the database ‘Databind the DataReader results to the dgAuthors DataGrid. End Sub Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs) ‘Get detailed information about the selected id and bind ‘the database results to the dgauthorsdetay DataGrid End Sub < /script> <form runat=”server”> <asp:DataGrid runat=”server” id=”dgAuthordetay” … > … </asp:datagrid> <asp:DataGrid runat=”server” id=”dgAuthor” … > <Columns> <asp:ButtonColumn Text=”Details” HeaderText=”Detay” ButtonType=”PushButton” /> <asp:BoundColumn DataField=”au_id” Visible=”False” /> <asp:BoundColumn DataField=”address” HeaderText=”Adres” /> </Columns> </asp:datagrid> < /form> |
Burada dikkat etmemiz gereken ilk sey ASP.NET sayfamizda iki tane DataGrid oldugu. Birincisi dgAuthorsdetay bir kayitin detayini gösteren tablo. Ikincisi dgAuthors ise bütün kayitlari gösteren DataGrid. Dikkat etiyseniz dgAuthors DataGrid?imizin au_id BoundColums taginin Visible=?False? olarak ayarlandiginiz ve au_id kismi bizim dgAuthors DataGrid?imizin çiktisinda gözükmüyor.