DataList Kullanimi, Veritabanindan Çekilen Kayitlari Matris Seklinde Gösterme

Bu makalemizde DataList kullanarak verileri nasil listeleyebilecegimizi ögrenecegiz. Bildiginiz gibi gridview de listeleme isleminde her satir için bir kayit gelir, DataList’de ise bu özeligi degistirebiliriz. Asagidaki resimde görüldügü gibi ürünler yan yana üçerli sekilde gösterilmistir. Kayitlarimizi bu sekilde göstermenin en kolay yolu DataList kullanmaktir.

 

 

 

 

 

 

 

 

 

Basit bir örnekle Datalist kullanimini anlatalim. Ilk oalrak ürünlerimizi kaydedecegimiz veritabanini olusturalim. Örnegimizde kullanacagimiz veritabani yapisi asagidaki gibi olacaktir.

 

 

 

 

.

Yukaridaki tablomuzu olusturduktan sonra tablomuza örnek ürün girisi yapalim. Biz toplam 6 ürün giris yaptik. Resimlerle çok ugrasmamak içinde internete herhangi bir alisveris sitesindeki resimlerin url adreslerini tablomuzdaki ResimUrl kolonuna yazdik.

 

 

 

Örnek uygulamayi buradan indirebilirsiniz.

Datalist kullanirken ürünleri yan yana göstermek için RepeatDirection özelligi vertical olmalidir. Yan yana kaç kayit göstermek istiyorsak RepeatColumns özelligini kullanarak da bunu ayarlariz. Biz örnegimizde yan yana 3 kayit göstermek istedigimiz için bu degerleri asagidaki gibi ayarladik.

RepeatDirection="Vertical" RepeatColumns="3"

 

Datalist için olusturdugumuz htms kodumuz asagidaki gibi oldu.

 

<asp:DataList RepeatDirection="Vertical" RepeatColumns="3" ID="UrunlerDataList" runat="server" DataKeyField="UrunId"

    OnItemCommand="UrunlerDataList_ItemCommand" >

    <HeaderTemplate>

    </HeaderTemplate>

    <ItemTemplate>

        <table width="200px">

            <tr>

                <td>

                    <asp:ImageButton CommandName="DetayGoster" CommandArgument=’<%#Bind("UrunId") %>

                        ID="urunresim" ImageUrl=’<%#Bind("ResimUrl") %> runat="server" />

                </td>

            </tr>

       nbsp;     <tr>

                <td>

                    <asp:Label ID="Label1" runat="server" Text=’<%#Bind("UrunAdi") %>‘></asp:Label>

                </td>

            </tr>

        </table>

    </ItemTemplate>

    <FooterTemplate>

    </FooterTemplate>

</asp:DataList>

 

Ürüne ait resmi gösterdigimiz ImageButton için CommandName ve CommandArgument degerlerini setleyerek OnItemCommand eventi içine asagidaki kodu yaziyoruz.

protected void UrunlerDataList_ItemCommand(object source, DataListCommandEventArgs e)

{

    string urunid = e.CommandArgument.ToString();

    string url = "urundetay.aspx?urunid=" + urunid;

    Response.Write("<script>javascript:window.open(‘" + url + "’,’urun detay’,’menubar=1,resizable=1,width=350,height=250′ )</script>");

}

 

ImageButton tiklandigi zaman açilacak popup’a ürün idsini bir querystring ile gönderiyoruz, ürün detay sayfasi da aldigi bu ürün id ile ürünün detay bilgilerini alip gösteriyor. Bizim örnegimizde detay bilgisi yok, siz kendi uygulamaniza göre düzenleme yapabilirsiniz. Örnek içinde yazilan diger kodlari projeyi indirerek inceleyebilirsiniz.

12 thoughts on “DataList Kullanimi, Veritabanindan Çekilen Kayitlari Matris Seklinde Gösterme

  1. 1 veya 2 tane kullanmak arasinda hiç bir fark yok. ayni datalistten sayana fakli id ler vererek istedigin kadar ekle. ve her birini ayri ayri bind et. yukarida anlatilanlari datalist sayin kadar tekrar etmen gerekiyor kisacasi

  2. hocam size bir sorum olacak ben buna benzer birsekilde yaptim ama ben Defaul.aspx de 2 yada 3 datalist kullanmak istiyorum bunu nasil yapabilirim o kadar genis bilgim yok  

  3.  form tag içine runat=server eklemelisin yani < form runat="server"> seklinde olmali

  4. Hocam özür dileyerek hatayi degistiriyorum. 

    Control ‘ContentPlaceHolder1_DList_lnk1_0’ of type ‘LinkButton’ must be placed inside a form tag with runat=server

  5.  Simdi söyle bir durum var hocam. Label yerine LinkButton atmak istedigimde 

    "An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code."

    hatasi veriyor.

    Ve açiklamasi ise

    "Control ‘ContentPlaceHolder1_CKEditor1’ of type ‘CKEditorControl’ must be placed inside a form tag with runat=server."

    Yardimci olabilmeniz mümkün mü?

  6. merhaba arkdslar,üzerinde çalismis oldugum projede(asp.net-c#) datalist yardimiyla verileri agaç seklinde kategorize ediyorum..ama projemin eksikliklerini gidermek için agaç yapisindaki elemanlara nasil erisebilecegim hakkinda bi fikri olan var mi..acil lütfen

  7. Guzel olmus veri tabani ekledim ve calisti eline saglik.

    Acaba bunu diger resim gosterme modelerinde nasil uygulayabilirz acaba bu konuda bilginiz .Alta kayan resimler var ama onlarda birini tiklayinca uste geleceksekilde

  8. Merhaba Altug. resim tiklandigin zaman resmi bir popupda büyük boyutta açman yeterlimi?

  9. slm ben de buna benzer bir proje yaptim.Ama benim istedigim image larin üzerine tikladigimda resmi büyük olarak göstermek:(Bunun için javascript kodunu yazamadim

    Yardimci olursaniz sewinirim.

  10. Evet veritabanini koymamistim. Açikcasi projeyi degistirip kendi kendi veritabaninizada denersiniz diye düsünmüstüm. Veritabani diger makinamda kaldi. create scripti pazartesi günü eklerim. Ama makaleye tablo yapisini eklemiltim ordan bakarak aynisin olusturdunuz zaman proje çalisir

Guests için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir