ASP.NET 2.0 - DataList ve Repeater

Makale

Makalenin kapsad�� konular:

Repeater kontrol�
DataList kontrol�
DataList ve Repeater'�n �zellikleri a��s�ndan farklar�
DataList kontrol�n�n kullan�m� ile ilgili �rnek

Not: Bu makaledeki �rnekler s�ras�nda, ASP.NET 2.0 ile birlikte gelen yeni bir kontrol olan "AccessDataSource" kontrol� kullan�lacakt�r. Bu kontrol ile ilgili ayr�nt�l� bilgiyi, nas�l olu�turuldu�u gibi konular� daha �nce yazm�� oldu�um ASP.NET 2.0 - GridView ve AccessDataSource konulu makalede bulabilirsiniz.
Bu makalede yeni bir AccessDataSource kontrol�n�n olu�turulmas� a�amas� takip edilecek fakat detaylar�na girilmeyecektir.

Repeater nedir?
Repeater; veritaban�, XML dosyas� ve benzeri �ekilde i�erisinde bilgi saklayabilece�imiz herhangi bir kayna��n i�erisinde tutulan bilgilerin, belirlenen taslak dahilinde ard� ard�na listelenmesi i�in kullan�labilecek bir kontrold�r.

HTML taglar� ile bir listeleme i�lemi yapmak istedi�inizde a�a��daki gibi bir kod yazman�z gerekmektedir:

    <ul>
        <li> ... </li>
    </ul>

Repeater kontrol�n� kullanarak bu listenin otomatik olarak olu�turulabilmesi i�in ise Repeater kontrol�n�z�n tan�m� a�a��daki �rne�e benzer olmal�d�r:

    <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
        <ItemTemplate>
            <li> <%# Eval("DataFieldIsmi") %> </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>

Ve uygun DataSource verildikten sonra, Repeater DataSource �zerindeki kay�t say�s�na ba�l� olarak a�a��dakine benzer bir kod olu�turur:

    <ul>
        <li> ... </li>
        <li> ... </li>
        <li> ... </li>
        ...
        ...
    </ul>

Repeater verilerin listelenmesi i�lemleri i�in olduk�a performansl� bir kontrol olmas�na ra�men, verilerin yanyana s�ralanmas� gibi opsiyonlara destek vermemektedir. ASP.NET 2.0 ile birlikte gelen yeni Repeater kontrol�ndeki en �nemli geli�me ise, yine ASP.NET 2.0 ile birlikte gelen DataSource kontrolleri olarak genelleyebilece�imiz "AccessDataSource", "XmlDataSource", "SqlDataSource" gibi kontrollere destek vermesidir.

DataList

DataList nedir?
Repeater kontrol�n�n tan�m� DataList kontrol� i�in de birebir olarak kullan�labilir. Farklar DataList ve Repeater'�n �zellikleri a��s�ndan farklar� b�l�m�nde anlat�lacak olup, san�r�m uygulama geli�tiriciler a��s�ndan en �nemli farrk� DataList kontrol�n�n veriyi bir tablo (<table>) i�erisinde g�steriyor olmas� ve "ItemTemplate", "AlternatingItemTemplate" gibi taslaklar�n�n g�rsel olarak de�i�tirilebilmesi olarak belirtilebilir.

Peki Repeater kontrol�n� anlatt��m�z b�l�mde a��klam�� oldu�um listeleme �rne�ini DataList kontrol� ile yapmam�z m�mk�n m�? Cevap malesef ki hay�r. ��te bu noktada Repeater kontrol� ve DataList kontrol�n�n yollar� birbirinden ayr�l�yor.

�imdi Repeater kontrol�n� anlatt��m�z b�l�mde Repeater kontrol� i�in belirledi�im "HeaderTemplate", "ItemTemplate" ve "FooterTemplate" taslaklar�n� aynen DataList kontrol� i�in de verdi�imi d��nelim:

    <asp:DataList ID="DataList1" runat="server">
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
        <ItemTemplate>
            <li> <%# Eval("DataFieldIsmi") %> </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:DataList>

Ve ayn� DataSource �zelli�ini DataList kontrol�ne de atad��m� varsayal�m. ��te kar��m�za Repeater kontrol�nden farkl� olarak ��kacak sonu�:

    <table id="DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
        <tr>
            <td>
                <ul>
            </td>
        </tr>
        <tr>
            <td>
                <li> ... </li>
            </td>
        </tr>
        <tr>
            <td>
                <li> ... </li>
            </td>
        </tr>
        <tr>
            <td>
                <li> ... </li>
            </td>
        </tr>
        ...
        ...
        <tr>
            <td>
                </ul>
            </td>
        </tr>
    </table>

G�rm�� oldu�unuz gibi DataList kontrol�, olu�turmu� oldu�umuz "HeaderTemplate", "ItemTemplate" ve "FooterTemplate" taslaklar�n� bir tablo i�erisine ald� ve uygun yerlere koydu ve biz de olduk�a anlams�z bir HTML ��kt�s�na sahip olduk.

Bu nokta Repeater ve DataList kontrollerini birbirinden ay�ran kesin �izgi olarak varsay�labilir.

DataList ve Repeater'�n �zellikleri A��s�ndan Farklar�

Genel olarak farklar �u �ekilde s�ralanabilir:

Repeater kontrol� ile DataList kontrol�n�n en �nemli fark� DataList kontrol�n�n veriyi bir tablo (<table>) i�erisine alarak g�stermesidir. Repeater kontrol�nde ise "HeaderTemplate" ve "FooterTemplate" �zelliklerini kullanarak kendinize ait bir taslak yaratman�z gerekir. Bu sebeple DataList kullanamay�p, sadece Repeater kullanabilece�iniz baz� senaryolarla kar��la�abilirsiniz. �rne�in "<ol>", "<ul>" gibi taglar� kullanarak bir liste olu�turmak istiyorsak, ta��y�c� taglar olan "<ol>", "<ul>" taglar�n� Repeater'�n "HeaderTemplate" tasla��ma, ta��y�c� taglar�m�z�n kapan�� taglar� olan "</ol>", "</ul>" taglar�n� da Repeater'�n "FooterTemplate" tasla��na yazarak listeleme i�lemini gayet kolay bir �ekilde halledebiliriz. DataList kontrol�n�n ise ilk amac� bu de�ildir. DataList kontrol�n�n ilk amac� verileri tablo ve tablonun i�indeki sat�r/s�tun bilgileri i�erisinde g�stermektir. DataList kontrol� de bir "HeaderTemplate" tasla��na sahiptir fakat bu tasla��n tek g�revi verilerin listelendi�i tablonun en �st�nde belirecek aland�r.
Repeater kontrol�n�n aksine, DataList kontrol�n�n sahip oldu�u "ItemTemplate", "AlternatingItemTemplate" gibi taslak �zellikleri g�rsel olarak de�i�tirilebilmektedir.
Repeater kontrol�n�n aksine, DataList kontrol� verileri yatay olarak da s�ralayabilmektedir. Gerekli durumlarda verilerin yatay ve dikey kombinasyonlar halinde s�ralanmas� i�lemi de ger�ekle�tirilebilir. �rne�in tek bir sat�rda 2 kay�t g�ster gibi bir opsiyon mevcuttur.
Repeater kontrol�n�n aksine, DataList kontrol� "EditItemTemplate" tasla��na sahiptir. Bu opsiyon sayesinde, DataList kontrol� birden fazla veriyi g�sterirken, tek bir sat�r�n "G�ncelle" modunda a��lmas� sa�lanabilir.
Repeater kontrol�n�n aksine, DataList kontrol� "GridLines", "CellPadding", "CellSpacing" gibi g�rsel �zelliklere sahiptir ve bu �zelliklerin tamam� �zellikler penceresinden tan�mlanabilir.

�ki kontrol�n �zellikler pencerelerini kar��la�t�rabilmeniz a��s�ndan her ikisinin de �zellikler penceresinin ekran g�r�nt�s�ne bakabilirsiniz:

Sizin de g�rm�� oldu�unuz gibi, kendimizin yazmak zorunda oldu�u bir�ok �zellik art�k g�rsel olarak de�i�tirilebiliyor.

DataList kontrol�n�n kullan�m� ile ilgili �rnek

�imdi haz�rlayaca��m �rnek Access veritaban�nda kullan�lan �r�nlerin listelenmesi, g�ncellemesi ve silinmesi ile ilgili bir senaryoya sahiptir. Bu senaryonun teknik k�sm�nda Access veritaban� ile kullan�c� arabiriminin ileti�imini AccessDataSource sa�layacakt�r. Bu �rnek s�ras�nda DataList kontrol� ile yap�lmas� uygun olmayaca�� i�in yeni kay�t ekleme i�lemi ger�ekle�tirilmeyecektir.

Not: Bu makaledeki �rnekler s�ras�nda, ASP.NET 2.0 ile birlikte gelen yeni bir kontrol olan "AccessDataSource" kontrol� kullan�lacakt�r. Bu kontrol ile ilgili ayr�nt�l� bilgiyi, nas�l olu�turuldu�u gibi konular� daha �nce yazm�� oldu�um ASP.NET 2.0 - GridView ve AccessDataSource konulu makalede bulabilirsiniz.
Bu makalede yeni bir AccessDataSource kontrol�n�n olu�turulmas� a�amas� takip edilecek fakat detaylar�na girilmeyecektir.

�ncelikle Access uygulamam�z� a�arak veritaban�m�z�, tablomuzu (Urunler) ve kolonlar�n� olu�tural�m:

Tabloya yeni kay�tlar ekleyelim:

Veritaban�n� kaydedip, projemize ekleyelim:

�imdi sayfam�za yeni bir DataList kontrol� ekleyelim:

Sayfam�za ilk bakt��m�zda kar��m�za a�a��daki g�r�nt� gelecektir:

�imdi "Smart Tag" ekran�n� kullanarak yeni bir AccessDataSource tan�mlayal�m:

DataSource tipi olarak Access Database'i se�tim ve DataSource'un ID de�eri olarak "Urunler" de�erini verdim:

Projemin i�erine ekledi�im veritaban� yolunu g�sterdim:

Veritaban�ndan almak istedi�im alanlar� se�ip, SQL c�mlemin otomatik olarak yaz�lmas�n� sa�lad�m:

"Advanced" butonuna t�klad�ktan sonra "Update" SQL c�mlemin olu�turulmas� i�in "Generate INSERT, UPDATE, and DELETE statements" se�ene�ini i�aretledim:

"Text Query" butonuna t�klay�p, SQL c�mlemi test ettikten sonra, "Finish" butonuna t�klayarak i�lemi tamaml�yorum:

�imdi ba�ka hi�bir i�lem yapmadan sayfam�za tekrar bakal�m:

G�rm�� oldu�unuz gibi DataList kontrol� tasla�� bizim i�in �oktan haz�rlad� bile. Peki taslaklar� g�rsel olarak nas�l de�i�tirece�iz? Yine "Smart Tag" yard�m�m�za ko�uyor:

Smart Tag penceresindeki "Edit Templates" butonuna t�klayal�m:

Default olarak "ItemTemplate" tasla�� se�ili olarak geldi. Peki ba�ka hangi taslaklar� de�i�tirebiliriz:

Evet, sizin de g�rd��n�z gibi DataList kontrol�n�n sahip oldu�u t�m taslaklar� g�rsel olarak de�i�tirebiliyoruz. Bu konuya daha sonra tekrar gelece�im. �imdi sayfam�z� taray�c�m�z ile �a��r�p deneyelim:

�imdi taslaklara geri d�n�p, taslaklar �zerinde de�i�iklikler yapal�m. Ben "ItemTemplate" tasla��n�n i�erisine yeni bir tablo ekleyip, sat�rlar�n daha d�zg�n g�r�nmesini sa�layaca��m:

Sayfa �al��t�r�ld��nda, yukar�daki gibi daha d�zg�n bir g�r�nt� elde etmek amac� ile "ItemTemplate" tasla��m� a�a��daki gibi belirledim:

    <ItemTemplate>
        <table style="width: 100%;">
            <tr>
                <td colspan="2" style="background-color: Silver; font-weight: bold; text-align: center;">
                    <asp:Label ID="IsimLabel" runat="server" Text='<%# Eval("Isim") %>' />
                </td>
            </tr>
            <tr>
                <td style="width: 100px;">
                ID
                </td>
                <td>
                    <asp:Label ID="UrunIDLabel" runat="server" Text='<%# Eval("UrunID") %>' />
                </td>
            </tr>
            <tr>
                <td>
                    Stok Adedi
                </td>
                <td>
                    <asp:Label ID="StokAdediLabel" runat="server" Text='<%# Eval("StokAdedi") %>' />
                </td>
            </tr>
            <tr>
                <td>
                    Fiyat
                </td>
                <td>
                    <asp:Label ID="FiyatLabel" runat="server" Text='<%# Eval("Fiyat") %>' />
                </td>
            </tr>
        </table>
        <br />
    </ItemTemplate>

�imdi "HeaderTemplate" tasla��m�z� g�zelle�tirelim ve sayfam�z� tekrar g�relim:

Ba�l��m�z�n bu �ekilde g�r�nmesi i�in "HeaderTemplate" tasla��m� a�a��daki gibi belirledim:

    <HeaderTemplate>
        <table style="width: 100%;">
            <tr>
                <td style="background-color: Blue; color: White; font-weight: bold; text-align: center;">
                    �r�nler
                </td>
            </tr>
        </table>
    </HeaderTemplate>

Peki makalenin en ba��nda da vurgulad��m yatay listeleme �zelli�ini nas�l yapaca��z? DataList kontrol�n�n sahip oldu�u "RepeatColumns" �zelli�ini kullanarak bu i�lemi ger�ekle�tirebiliriz. �rne�in ben olu�turmu� oldu�um DataList kontrol�n�n "RepeatColumns" �zelli�ini 3 yapaca��m:

Not: Geni�li�ini 250px olarak verdi�im DataList kontrol� art�k 3 �r�n� tek bir sat�rda g�sterece�inden, DataList kontrol�m�n geni�li�ini bu noktada 600px olarak de�i�tiriyorum.

�imdi tekrar taray�c� arac�l�� ile sayfam�z�n g�r�n��ne bakal�m:

G�rm�� oldu�unuz gibi tek bir sat�rda 3 adet �r�n g�sterildi ve di�er sat�ra da toplamda 5 adet �r�n oldu�u i�in sadece 2 tane �r�n yerle�tirildi.

S�ra geldi DataList �zerinde bilgi g�ncelleme ve silme i�lemine. Bunun i�in �ncelikle "ItemTemplate" tasla��m�za "CommandName" �zelli�i "Edit" ve "Delete" olan birer buton ekleyece�iz. Butonlar�n isminin bizim i�in hi�bir �nemi yok, ��nk� ASP.NET 2.0 ile birlikte gelen GridView, DataList gibi kontrollerin i�erisine koyulan herhangi bir butonun "CommandName" �zelli�i "Edit" ve ya "Delete" olarak verildi�i taktirde, bu butona t�kland��nda o sat�r atanan de�ere g�re "Edit" ve ya "Delete" moduna ge�iyor.

Butonlar�m�z� (ben buton olarak LinkButton kullanaca��m, siz Button ya da ImageButton kontrollerini de bu i�lem i�in kullanabilirsiniz) "ItemTemplate" tasla��m�z� a�a��daki gibi de�i�tirerek (k�rm�z� olarak yaz�lm�� k�s�mlar yeni eklenen k�s�mlard�r) ekleyelim:

    <ItemTemplate>
        <table style="width: 100%;">
            <tr>
                <td colspan="2" style="background-color: Silver; font-weight: bold; text-align: center;">
                    <asp:Label ID="IsimLabel" runat="server" Text='<%# Eval("Isim") %>' />
                </td>
            </tr>
            <tr>
                <td style="width: 100px;">
                ID
                </td>
                <td>
                    <asp:Label ID="UrunIDLabel" runat="server" Text='<%# Eval("UrunID") %>' />
                </td>
            </tr>
            <tr>
                <td>
                    Stok Adedi
                </td>
                <td>
                    <asp:Label ID="StokAdediLabel" runat="server" Text='<%# Eval("StokAdedi") %>' />
                </td>
            </tr>
            <tr>
                <td>
                    Fiyat
                </td>
                <td>
                    <asp:Label ID="FiyatLabel" runat="server" Text='<%# Eval("Fiyat") %>' />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:LinkButton ID="EditButton" runat="server" Text="G�ncelle" CommandName="Edit" />
                    <asp:LinkButton ID="DeleteButton" runat="server" Text="Sil" CommandName="Delete" />
                </td>
            </tr>
        </table>
        <br />
    </ItemTemplate>

DataList kontrol�m�z�n Visual Studio 2005 �zerindeki g�r�nt�s� �u �ekilde olacakt�r:

Peki butonlar�m�za t�klad��m�zda ne olacak? �imdilik hi�bir�ey. �ncelikle DataList kontrol�m�z�n "EditCommand" ve "DeleteCommand" event'lerini yakalamam�z laz�m:

"EditCommand" ve "DeleteCommand" event'lerimi event'in yaz�ld�� k�sma mouse ile �ift t�klayarak her 2 event i�in de yarat�yorum:

Ve Visual Studio 2005 method'umu otomatik olarak olu�turup, beni methodlara g�t�r�yor:

"DataList1_EditComm

ASP.NET 2.0 - DataList ve RepeaterPrint Versiyonu

ASP.NET 2.0 - DataList ve Repeater

Print Versiyonu