ASP.Net ile JQuery Slider Dinamik Veri Kaynagi

ASP.Net ile JQuery Slider Dinamik Veri Kaynagi

Merhaba bu makalemizde JQuery slider’in içeriginin dinamik bir veri kaynagindan nasil okunacagini anlatacagiz. Birçogumuz jquery slider örneklerini incelemisizdir. Birçok örnegi ve demoyu inceledigimizde hepsinin içeriginin statik html ve javascript oldugunu görürüz. Peki bizim içerigimiz sürekli degisen bir içerik ise sürekli bu html’i düzenleyip sunucumuza gönderemeyiz. Bu gibi bir durumda bir veritabanina sürekli verimizi yazariz ve içerigimizi bu veritabanindan okuyacak hale getirmemiz gerekir. Hazir buldugumuz javascript tabanli bir image slideri nasil dinamik hale getirebiliriz?

Bu is için hazir asp.net kontrolleri kullanabiliriz. Örnegin biz bu örnekte ASP.Net repeater kontrolü yardimiyla bu isi gerçeklestirecegiz. Ilk olarak görsel olarak hosumuza giden hazir bir slider örnegi buluyoruz. Biz kisa bir arastirmayla http://slidesjs.com/ adresindeki slideri kullanmaya karar veriyoruz. Örnegi inceledigimizde asagidaki sekilde içerigi görecegiz.

.
<div id="slides">
    <div class="slides_container">
        <a href="http://www.flickr.com/photos/jliba/4665625073/" 
        title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!"
        target="_blank">
            <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" 
            width="570" height="270"
            alt="Slide 1">
         </a> 
         <a href="http://www.flickr.com/photos/stephangeyer/3020487807/"
            title="Taxi | Flickr - Photo Sharing!" target="_blank">
            <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" 
            width="570" height="270"
            alt="Slide 2">
         </a> 
         <a href="http://www.flickr.com/photos/childofwar/2984345060/"
            title="Happy Bokeh raining Day | Flickr - Photo Sharing!" 
                target="_blank">
            <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" 
            width="570" height="270"
            alt="Slide 3">
        </a>
    </div>
    <a href="#" class="prev">
        <img src="img/arrow-prev.png" width="24" height="43" 
        alt="Arrow Prev">
    </a> 
    <a href="#" class="next">
        <img src="img/arrow-next.png" width="24" height="43" 
        alt="Arrow Next">
     </a>
</div>
.

Simdi biz buradaki içerigi dinamik bir sekilde repeater araciligi ile alabilen hale dönüstürecegiz. Bunu da Repeater kontrolünün Item Template’ni kullanarak gerçeklestirecegiz. Bunun için asagidaki sekilde aspx dosyamizi düzenlememiz yeterli olacaktir.

<asp:Repeater ID="rptResimler" runat="server" ViewStateMode="Disabled">
    <ItemTemplate>
        <div class="slide">
            <asp:Image ID="imgResim" 
            ImageUrl='<%#DataBinder.Eval(Container.DataItem, "ResimYol")%>'
                runat="server" Width="570" Height="270" 
                AlternateText='<%#DataBinder.Eval(Container.DataItem, "Alt")%>'/>
            <div class="caption" style="bottom: 0">
                <p>
                    Happy Bokeh Thursday!</p>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

Biz örnegimizde genelde ORM(Object Relational Mapping) tasarimini kullanabilmek için resim nesnesi olusturup bu nesneye atmayi tercih ettik. Siz veritabanindan çektiginiz bilgiler ile bu nesneleri olusturabilirsiniz ya da ufak degisiklikler ile direk veritabanindan okuyabilirsiniz. Biz örnekte klasör içerigindeki tüm resimleri çekerek gerçeklestirdik ve bunlari nesnemizin özelliklerine atadik.

aspnet slider

Sonuç olarak bu görüntüyü elde ederiz. Tamamen dinamik bir yapida örnegimizi tamamlamis oluruz.

Örnek kodlari buradan indirebilirsiniz.

.

5 thoughts on “ASP.Net ile JQuery Slider Dinamik Veri Kaynagi

  1. Selam, konu canlandı belki ama Slider Revolution asp.net ve asp.net mvc olarak bir çalışmanızı bekleriz. ben deniyorum ama bir türlü yapamadım ilk slider sorunsuz geliyor baslık acıklama buton hepsi ok ama değişmiyor.

  2. Merhaba Hamza Hocam,

    Kodunuzu paylasin belki basit birseyleri gözden kaçiriyorsunuzdur.

    Kolay gelsin.

  3. su olayi bana anlatabilecek bir arkadas var mi?

    bir türlü yapamadim gitti, bir site yapacagim html üste bannerimi ekledim

    altina div açarak dinamik bir menü koydum onun altinada bu slides i koymaya çalisiyorum ama slidesi dream da yagistirdigim zaman diger menüyle beraber kayboluyor ama önizlemede gözüküyor anlamadim gitti.

    hamzaemer88@gmail.com bilgisi olan arkadaslar lütfen yardim edin.. 

  4. Selamin Aleyküm. Çok basarili bir çalisma olmus elinize saglik,tebrik ederim tam aradigim seydi.

    Kolay gelsin..

Bir cevap yazın

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