Üye Kayıt Üye Giriş

KATEGORİLER

ASP.Net ile JQuery Slider Dinamik Veri Kaynağı


ASP.Net ile JQuery Slider Dinamik Veri Kaynağı

 

Merhaba bu makalemizde JQuery slider’ın içeriğinin dinamik bir veri kaynağından nasıl okunacağını anlatacağız. Birçoğumuz jquery slider örneklerini incelemişizdir. Birçok örneği ve demoyu incelediğimizde hepsinin içeriğinin statik html ve javascript olduğunu görürüz. Peki bizim içeriğimiz sürekli değişen bir içerik ise sürekli bu html’i düzenleyip sunucumuza gönderemeyiz. Bu gibi bir durumda bir veritabanına sürekli verimizi yazarız ve içeriğimizi bu veritabanından okuyacak hale getirmemiz gerekir. Hazır bulduğumuz javascript tabanlı bir image sliderı nasıl dinamik hale getirebiliriz?

 

Bu iş için hazır asp.net kontrolleri kullanabiliriz. Örneğin biz bu örnekte ASP.Net repeater kontrolü yardımıyla bu işi gerçekleştireceğiz. İlk olarak görsel olarak hoşumuza giden hazır bir slider örneği buluyoruz. Biz kısa bir araştırmayla http://slidesjs.com/ adresindeki sliderı kullanmaya karar veriyoruz. Örneği incelediğimizde aşağıdaki şekilde içeriği göreceğiz.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<divid="slides">
    <div class="slides_container">
        <ahref="http://www.flickr.com/photos/jliba/4665625073/"
        title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!"
        target="_blank">
            <imgsrc="http://slidesjs.com/examples/standard/img/slide-1.jpg"
            width="570" height="270"
            alt="Slide 1">
         a>
         <ahref="http://www.flickr.com/photos/stephangeyer/3020487807/"
            title="Taxi | Flickr - Photo Sharing!" target="_blank">
            <imgsrc="http://slidesjs.com/examples/standard/img/slide-2.jpg"
            width="570" height="270"
            alt="Slide 2">
         a>
         <ahref="http://www.flickr.com/photos/childofwar/2984345060/"
            title="Happy Bokeh raining Day | Flickr - Photo Sharing!"
                target="_blank">
            <imgsrc="http://slidesjs.com/examples/standard/img/slide-3.jpg"
            width="570" height="270"
            alt="Slide 3">
        a>
    div>
    <ahref="#" class="prev">
        <imgsrc="img/arrow-prev.png" width="24" height="43"
        alt="Arrow Prev">
    a>
    <ahref="#" class="next">
        <imgsrc="img/arrow-next.png" width="24" height="43"
        alt="Arrow Next">
     a>
div>

Şimdi biz buradaki içeriği dinamik bir şekilde repeater aracılığı ile alabilen hale dönüştüreceğiz. Bunu da Repeater kontrolünün Item Template’ni kullanarak gerçekleştireceğiz. Bunun için aşağıdaki şekilde aspx dosyamızı düzenlememiz yeterli olacaktır.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<asp:RepeaterID="rptResimler" runat="server" ViewStateMode="Disabled">
    <ItemTemplate>
        <div class="slide">
            <asp:ImageID="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 örneğimizde genelde ORM(Object Relational Mapping) tasarımını kullanabilmek için resim nesnesi oluşturup bu nesneye atmayı tercih ettik. Siz veritabanından çektiğiniz bilgiler ile bu nesneleri oluşturabilirsiniz ya da ufak değişiklikler ile direk veritabanından okuyabilirsiniz. Biz örnekte klasör içeriğindeki tüm resimleri çekerek gerçekleştirdik ve bunları nesnemizin özelliklerine atadık.

önizlemesi

aspnet resım galaresı

Bilgisayar Dershanesi Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

asp net ile jquery slider dinamik veri kaynağı