İçeriğe geç

Yazar: fatihdurgut

DataGrid Web Kontrolu 3

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.

DataGrid Web Kontrolu 2

1.Bölümde HTML tablo tagi içerisinde verileri sunmak için tasarlanmis ASP.NET Web kontrolü olan DataGrid?in temellerini ögrendik. Bölüm 1 bize veritabani içerigini DataGrid?e baglamanin ne kadar basit oldugunu göstermisti: bunun için yapmamiz gereken bir SQL sorgusu çalistirdigimiz bir DataReader objesi olusturmak, bu DataReader?i DataGrid?in DataSource özelligine atamak, ve DataGrid?in DataBind() metodunu çagirmak. Bunlarin hepsinin çalismasi için DataGrid Web kontrolünü HTML içerigine asagidaki gibi yerlestirmeniz yeterli.

<asp:datagrid runat=”server” />

Oldukça basit. Aslina bakarsaniz yaptigimiz DataGrid görüntüsü oldukça kötü gözükmekte, sonuçta elimizde DataReader?dan alinan kolon ve sütünlari barindiran bir HTML tablosundan farkli bir görüntü yok. Peki biz DataReader?dan gelen kolonlari gösterirken neler yapabiliriz ve her bir kolonun formatini nasil degistirebiliriz ? Bununla beraber bütün arkaplan rengi,font,vb.. gibi tüm tabloyu ilgilendiren biçim ayarlamalari yapmamiz mümkün mü ? Son olarak her bir kolon için farkli renk ve fontlarda özel basliklar atayabilmekte hos olurdu herhalde. Bu bölümde bu görevleri nasil yapacagimizi ögrenecegiz.

DataGrid Biçim Ayarlarini Belirlemek

DataGrid?in biçim ayarlarini degistirmemizin iki yöntemi bulunmakta. Birincisi bunu server-side sicript bloku içinde programlayarak ayarlamak. Mesela, DataGrid?in arkaplan rengini kirmizi yapmak için yazmamiz gereken kod:

<%@ Import Namespace=”System.Drawing” %>

<script runat=”server”>

sub Page_Load(sender as Object, e as EventArgs)

DataGridID.BackColor = Color.Red

end sub

</script>

Diger yolu ise DataGrid Web kontrol tagi içerisinde görüntü özelliklerini belirlemek. Mesela, asagidaki kod yukaridaki ile ayni etkiyi yaratacaktir.

<asp:datagrid runat=”server” BackColor=”Red” />

Sahsen ikinci yolu tercih ediyorum. Özellikleri Web kontrolü taginin içinde belirlemeyi, server-side kod alternatifinden daha temiz buluyorum(server-side tarafinda görüntü özelligini ?Color.Red? olarak atamak için System.Drawing namespace?ni dökümanimiza eklememiz gerekiyor; Web kontrol taginin görüntü özelliklerinde ise sadece BackColor=?Red? yazmamiz yeterli oluyor.) Hadi hep birlikte DataGridimize uygulayabilecegimiz bazi kullanisli biçimlendirme ayarlarina bakalim.En kullanisli oldugunu düsündügüm bazilari :

? BackColor – background rengini belirler.

? Font ? DataGrid?in font bilgilerini belirlemek için kullanilir. Font bilgileri font family,size,bold,italic gibi bilgileri belirlemek için kullanilir.

? CellPadding ? HTML tablosunun cellpadding özelligini belirler.

? CellSpacing ? HTML tablosunun cellspacing özelligini belirler.

? Width ? HTML tablosunun genisligini belirler(pixel,yüzde)

? HorizontalAlign ? Tablonun nereye yaslanacagini belirler(Left, Right, Center, NotSet)

Daha güzel bir görüntü olusturmak için görüntü seçeneklerinin kullanildigi bir DataGrid örnegi. Dikkat etmeniz gereken DataGrid?in Font özelligi, FontInfo Class?ini kullanmakta ve bunun Size, Name, Bold, Italic, gibi özellikleri bulunmakta. Bu özellikleri belirlemek için (-) isaretini kullaniriz.

<asp:DataGrid runat=”server” id=”dgAuthors”

BackColor=”#eeeeee” Width=”85%”

HorizontalAlign=”Center”

Font-Bold=”True” Font-Name=”Verdana”

Font-Size=”10pt” />

Biraz daha etkileyici oldu mu? DataGridimize bir kaç satir ekleyerek kullanici arabirimimizi oludukça gelistirdik.Basit bir HTML tablosundan, arkaplan rengi gri olan ve güzel görünüslü fontlara sahip bir tablo elde ettik.

Stiller ile Süslenmek

DataGrid Web kontrolü görünümünü özellestiren bir grup kullanisli ?style? ler barindirmakta. Bu sitiller BackColor, ForeColor, HorizontalAlign ve Width gibi bir grup sitilistik özellikler içemekte . DataGrid için dört stil mevcuttur:

? HeaderStyle ? Baslik için stil bilgisini barindirir.(kolonlarin isimlerinin listelendigi tablonun en üst satiri; DataGrid?in ShowHeader özelligini true olarak ayarlamalisiniz(varsayilan).)

? FooterStyle ? Dipnot için stil bilgisini barindirir.(tablonun en son satiri;DataGrid’in ShowFooter özelligini true olarak ayarlamalisiniz (varsayilan degeri false).)

? ItemStyle ? Tablodaki her bir satir için stil bilgisini içerir.

? AlternatingItemStyle ? Tablodaki farkli satirlar için gerekli olan stil bilgilsini içerir.

ItemStyle ve AlternatingItemStyle özelliklerini DataGrid?in kolay okunmasi için farkli degerlerde ayarlamalisiniz. (örnek için asagidaki demoyu inceleyiniz). Diger DataGrid biçimlendirme özellikleri gibi stilleride hem programlayarak hemde DataGrid Web kontrol taglarini kullanarak ayarlayabilirsiniz. Daha önceden söyledigim gibi ben Web kontrol tagini terçih ediyorum. Web kontrolü tagi kullanarak özellikleri ayarlamanin iki farkli sentaksi mevcut. Birincisi daha önceki özelikleri belirleme yöntemi ile benzer, nesneleri nokta kullanarak yazmak (mesela, HeaderStyle?in BackColor özelligini ayarlamak için: HeaderStyle.BackColor=?Red?) Diger bir yöntem ise Web kontrolleri tagi içerisinde özel stil bloklari kullanmak, mesela:

<asp:DataGrid runat=”server”>

<HeaderStyle BackColor=”Red” />

</asp:DataGrid>

Her iki yöntemde iyi. Ben gömülmüs taglari daha okunakli buluyorum, özellikle birçok özellik için bir çok stil ayarlamayi planliyorsaniz.

<asp:DataGrid runat=”server” id=”dgFAQs”

BackColor=”#eeeeee” Width=”85%”

HorizontalAlign=”Center”

Font-Name=”Verdana”

Font-Size=”10pt”>

<HeaderStyle BackColor=”Black” ForeColor=”White”

Font-Bold=”True” HorizontalAlign=”Center” />

<AlternatingItemStyle BackColor=”White” />

</asp:datagrid>

Artik DataGrid kontrolüne nasil stilistik özellikler ekliyecegimizi ve global görüntü özelliklerini ayarlamayi ögrenmis olduk.

Hangi Kolonun Gözükecegini Belirleyin

DataGrid olusturuldugunda SQL sorgusundan dönen bütün kolonlari HTML tablsosunda bir kolon olarak olusturur. Fakat özel durumlarda, DataGrid?inizde bu kolonlarin sadece bir grubunun gözükmesini isteyebilirsiniz. Mesela örneklerde gördügünüz DataGrid içinde Pubs veritabanindan gelen au_id sütununu görmek istemiyorum. Eger DataGrid içinde veritabani sorgusundan gelen bütün kolonlari göstermek istemiyorsak, göstermek istedigimiz kolonlari belirtmelisiniz. Bunun için ilk atmamiz gereken adim DataGrid?in AutoGenrateColumns özelligini ?False? olarak ayarlamak. Bir kere bunu yaptiktan sonra, göstermek istediginiz kolonlari BoundColumn kullanarak belirtmelisiniz. Asagidaki gibi:

<asp:DataGrid runat=”server” AutoGenerateColumns=”False”>

<Columns>

<asp:BoundColumn DataField=”DatabaseColumnName1″ … />

<asp:BoundColumn DataField=”DatabaseColumnName2″ … />

<asp:BoundColumn DataField=”DatabaseColumnNameN” … />

</Columns>

</asp:datagrid>

Veritabanindaki kolonlardan göstermek istediginiz her bir kolon için <asp:BoundColumn ?./> tagini,DataField özelligi ile belirtmelisiniz. Bütün bu BoundColums taglari Columns taglari içinde bulunmali ( boundcolums özelligini programlayarak göstermekte mümkün, fakat bu gerçekten çok çirkin gözükmekte ve tonlarca kod yazmaniz gerekmekte ). Dikkat etmeniz gereken DataGrid?te BoundColumn taglari ile belirtiginiz kolonlar sizin belirlediginiz sirayla gözükür. BoundColumn kontrolünün güzel yönü ise, bu kontrolün bazi biçim özelliklerini barindirmasi, mesela:

? HeaderText- kolonlarin basliginda gözükecek yaziyi belirler.

? FooterText- kolonlarin footer kisminda gözükecek yaziyi belirler.(DataGridinizde footer kisminin gözükmesi için ShowFooter özelligini True olarak ayarlamayi unutmayin) ? HeaderStyle/FooterStyle/ItemStyle- DataGrid stilinin barindirdigi bütün özellikleri içerir. Kolonlari ortalamak, ön ve arka plan rengini ayarlamak gibi birçok kullanisli özelligi vardir.

? DataFormatString-Biçimlendirme bilgilerini belirler (tüm biçim özellikleri için dökümanlari inceleyiniz.)

Simdi BoundColumn taglarini nasil kullanacagimiza bir göz atalim. Daha öncedende söyledigim gibi, au_id veya city kolonlarini göstermek istemiyoruz, ayrica zip kolonunda biçimlendirme yapmak istiyoruz. Üstelik sayisal deger içeren kolonlarin degerlerini ortalamak istiyoruz. Bütün bunlari basarmak için sadece okunmasi-kolay ve anlamasi-kolay bicim belirten kod yazmamiz yeterli:

<asp:datagrid id=”dgAuthors” runat=”server”

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:BoundColumn DataField=”au_fname” HeaderText=”Isim” />

<asp:BoundColumn DataField=”au_lname” HeaderText=”Soyad” />

<asp:BoundColumn DataField=”address” HeaderText=”Adres” />

<asp:BoundColumn DataField=”zip” DataFormatString=”{0:#,###}”

HeaderText=”Posta Kodu” ItemStyle-HorizontalAlign=”Center” />

<asp:BoundColumn DataField=”city” HeaderText=”Sehir” />

<asp:BoundColumn DataField=”contract” HeaderText=”Contract” />

<asp:BoundColumn DataField=”phone” HeaderText=”Telefon” />

</Columns>

</asp:datagrid>

Gördügünüz gibi , yukaridaki kod sizin belirlediginiz kolonlari sizin istediginiz sekilde biçimlendirir. Dikkat etmeniz gereken DataFormatString özelligi oldukça farkli gözükmekte. Herzaman {0:format string} sekilde gözükmesi gerekmekte. {0:…} ifadesinin birinci elemani biçimini belirlemek için (DataReader?dan geri dönen kolonun degerini) ?. Ise format stringini belirtirsiniz. Örnegimizde format string?i olarak #,### kullanarak her 3 basamaktan sonra virgul yerlestirdik. Format stringleri ile ilgili daha çok bilgi için dökümanlari inceleyiniz.

DataGrid Web Kontrolu1

Asp ile yapilan uygulamalarda en sik karsilasilan uygulamalarin basinda veritabaninda bulunan tablo halindeki verileri alip bunu HTML tablosu olarak göstermektir. Klasik Asp ile bunu yapabilmek için birçok karmasik kod yazmaniz gerekmekteydi. ASP.NET’in bir avantajida içinde bir çok web kontrolünü barindirmasidir. Bu web kontrolleri HTML sunmak ve gelistiricilerin kod ile içerigi birbirlerinden ayirabilmesi için programlanabilir bir arabirim saglamaktadir. Eger ASP.NET kullanarak bir HTML çiktisi almak istiyorsak.

<script language="vb" runat="server">
         sub Page_Load(sender as Object, e as EventArgs)
         lblMessage.Text = "Hello, World!" end sub
</script>
<asp:label runat="server" id="lblMessage" />

Burada “lblMessage” label Web kontrolünün HTML-benzeri taglar ve runat=”server” özelligi kullanilarak HTML içerisine yerlestirildigini görüyoruz. Page_Load event handler’i ise (sayfanin her yüklenmesinde çalisir) lblMessage Web Kontrolünün text özelligine “Hello World!” yazisini yazdirir. Bu sekide Web kontrollerinin kullanarak kod ile içerigi birbirinden ayirmaktayiz. Klasik ASP ‘de bunu yapabilmek için <%="Hello, World!"%> kodunu HTML içinde gerekli yere eklememiz gerekiyordu. Görüldügü gibi ASP.NET Web kontrolleri basit label kontrolünden daha kullanisli ve güçlü. Ayrintili olarak inceleyecegimiz DataGrid Web kontrolü ise web kontrollerinin en güçlülerinden biri. DataGrid bize veri-dolu HTML tablolari olusturmak için gerekli HTML çiktisini sunar. Ileride göreceginiz gibi DataGrid’e veri baglamak gerçekten çok kolaydir. Ayrica sadece birkaç ufak ayarlama ile DataGrid’lerin görünüslerini profesyonel HTML tablolari halinde sunabilirsiniz.

DataGrid Temelleri

DataGrid’i ASP.NET web sayfasina yerlestirmek için asagidaki kodu sayfaniza eklemeniz gerekmektedir.

<asp:datagrid runat="server" id="ID_of_DataGrid" />

Burada id DataGrid’e server-side kod yazarken ulasacaginiz ismidir. Yukaridaki sentaks DataGrid’i HTML içerigine yerlestirmek için kullanilmakta, fakat bizim esas ihtiyacimiz olan DataGrid’e herhangi bir grup bilgiyi baglayarak daha kullanisli bir sekilde göstermek. Peki, DataGrid’e bu bilgiyi nasil baglayacagiz? Bu inanamayacaginiz kadar kolay. Ilk yapmamiz gereken içinde veritabanindan çekilmis veriler bulunduran bir DataReader yakalamak. Bu örnek için SQL server ile gelen Pubs veritabanini kullanacagiz. Birkere DataReader’a gerekli olan verileri attiktan sonra, DataGrid’e bu verileri baglamak için iki satir kod eklememiz yeterli; Ilk satir DataGrid’ in DataSource özelligine DataReader’i atamak; ikincisi ise DataGrid’in DataBind() metodunu çagirmak. Hepsi bukadar, asagidaki kodda bunu ayrintili olarak görebilirsiniz.

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %> <SCRIPT language="VB" runat="Server">
Sub Page_Load(Src As Object, E As EventArgs)
Dim dr As SQLDataReader
Dim conn As SQLConnection
Dim cmdAuthors As SqlCommand

'Pubs veritabanina bir baglanti kuruyoruz
conn = New SQLConnection _
("server=localhost;uid=sa;pwd=1Aspnet;database=pubs")
conn.Open()
'Authors tablosundaki verileri içeren bir dataset olusturuyoruz’
cmdAuthors = New SqlCommand _
("select * from Authors", conn)
dr = cmdAuthors.ExecuteReader

'DataGrid’in datasource’na datareader’i baglayalim
dgAuthors.DataSource = dr
'DataGrid’in databind() methodunu çagiralim.
dgAuthors.DataBind()
conn.Close()
End Sub
</SCRIPT>

 

<ASP:DataGrid id="dgAuthors" runat="server"/>

Yukaridaki örnekte ilk olarak bir database baglantisi açip SQL komutunu çalistiriyoruz, DataGrid’in DataSource özelligini verileri barindiran DataReader’a bagliyoruz ve son olarak DataBind metodunu çagiriyoruz. Bu sekilde bütün kodu içerikten izole etmis oluyoruz; klasik ASP sayfalarinda karsilastigimiz, HTML tablosu ile DataReader çikti sentaksi arasinda hiçbir karisim olmuyor.