Repeater ile çalışmak

Repeater asp.net aleminin bana göre en delikanlı kontrolüdür. Kafasından hiç bir şey yapmaz, biz ne dersek onu yapar. Bu sebepten dolayı veriyle ilgili kontrollerin en az özelliklisidir, hatta özelliği yoktur bile :) Madem hiç bir özelliği yok neden var bu kontrol ? Hemen anlatayım.

Repeater’ ın abisi olan DataList bir çok güzel özelliği üzerinde barındıran bir kontroldür. GridView ise bu iki kontrolden farklı bir mantıkta çalışır bu sebepten ötürü kulvarları çok farklıdır.  GridView veriyi satır satır (row) ekrana basar, DataList ve Repeater ise eleman elaman (item) basar. GridView’ da DataList’ de veriyi ekrana basarken kendi html şablonunu kullanır, Repeater ise hiç bir şablonu kullanmaz, etiketsiz, biçimsiz bir veri ekrana basar. Şöyleki, sanki bir döngü yazdınız ve veritabanından gelen saf veriyi ekrana bastınız. Bunun neresi güzel diye sorabilirsiniz. İstediğiniz gibi şekillendirebilirsiniz, kendiniz şekillendireceğiniz için w3 kurallarına uygun ve arama motorlarının sevdiği cinsten bir tasarım yapabilirsiniz. Burada şöyle bir durum da var, DataList ile 5 dakikada yapacağınız bir işi Repeater’ la 25 dakikada yaparsınız. Arada ki fark ise birinde kurallara uygun bir tasarım ve tamamen kontrolü sizde olan bir tasarım, diğerinde ise kuralsız ve zaman zaman kontrolün sizde olmadığı bir tasarım. Bu sebepten dolayı, sitelerin kullanıcı arayüzünde Repeater, yönetici kısmında ise DataList kullanmak gerekiyor diye düşünüyorum.

Aşağıda Repeater ve DataList’ in html çıktılarını görüyorsunuz.

Ön bir bilgi verdikten sonra Repeater kontrolümüzün az ama öz olan özelliklerine bir bakalım.

            <asp:Repeater runat="server" ID="rpRepeater">
                <HeaderTemplate>
                    <h3>Header</h3>
                </HeaderTemplate>
                    <ItemTemplate>
                        <%#Eval("browser") %>
                    </ItemTemplate>
                    <SeparatorTemplate>
                        <hr />
                    </SeparatorTemplate>
                    <AlternatingItemTemplate>
                        <%#Eval("ip") %>
                    </AlternatingItemTemplate>
                <FooterTemplate>
                    <h3>Footer</h3>
                </FooterTemplate>
            </asp:Repeater>

HeaderTemplate En üst kısımda görünmesini istediğiniz içeriğin görüntüleneceği alan. Tekrar etmez.

ItemTemplate Veri kaynağından gelecek veri kadar dönecek kısımdır. Verinin görüntüleneceği alandır. Veri kadar tekrar eder.

SeparatorTemplate Veriler arasındaki kısımdır. Örneğin “Deneme | Deneme1 | Deneme2” | karakterteri separatordür. Veri kadar tekrar eder.

AlternatingItemTemplate Alternatif veriyi gösteren kısımdır. Açıkçası şimdiye kadar hiç kullanmadığım bir özellik :) Veri kadar tekrar eder.

FooterTemplate En alt kısımda görünmesini istediğimiz kısımdır. Genelde Sayfalama vb.. şeyleri burada gösterebiliriz. Tekrar etmez.

Aşağıda, yukarıda yazdıklarımı görebilirsiniz.

Yukarıda gördüğümüz veriyi css kullanarak şekillendirelim.

        body{font-size:12px;font-family:Arial}

        .repeaterEleman{
            border:2px solid #c0c0c0;
            background-color:#ededed;
            width:200px;
            height:200px;
            padding:5px;
            margin:5px;
            float:left;
        }

        .repeaterEleman p{
            font-weight:bold;
            text-align:right;
        }

        h3{
            background-color:#046a99;
            color:White;
            padding:5px;
        }

           <asp:Repeater runat="server" ID="rpRepeater">
                <HeaderTemplate>
                    <h3>Ziyaretçi bilgileri listeleniyor.</h3>
                </HeaderTemplate>
                    <ItemTemplate>
                        <div class="repeaterEleman">
                            <%#Eval("browser") %>
                            <p><%#Eval("ip") %></p>
                        </div>
                    </ItemTemplate>
                <FooterTemplate>
                    <div style="clear:both"></div>
                    <h3>Toplam <%#rpRepeater.Items.Count%> kayıt bulundu.</h3>
                </FooterTemplate>
            </asp:Repeater>

Çıktımız bu şekilde.

Html çıktısı ise gördüğünüz gibi tertemiz.

Repeater ile ilgili yazacaklarım bu kadar, kullandıkça daha iyi kavrayacağınız bir kontrol. Herkese güzel ve sağlıklı günler..