Buradasınız: Emre Supçin / Asp.Net, Java & Jquery / ASP.Net ile JQuery Slider Dinamik Veri Kaynağı Okunması?

ASP.Net ile JQuery Slider Dinamik Veri Kaynağı Okunması?

Merhaba arkadaşlar,

Bu makalemde sizlere JQuery slider’ın içeriğinin dinamik bir veri kaynağından nasıl okunacağını anlatacağım. Birçoğumuz jquery slider örneklerini belki 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.

Ardaşlar JQuery’i bilmeyenler JQuery Nedir? Nasıl Kullanılır? makaleme gözatabilir.

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 <div id="slides">

2 <div class="slides_container">

3 <a href="http://www.flickr.com/photos/jliba/4665625073/"

4 title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!"

5 target="_blank">

6 <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg"

7 width="570" height="270"

8 alt="Slide 1">

9 </a>

10 <a href="http://www.flickr.com/photos/stephangeyer/3020487807/"

11 title="Taxi | Flickr - Photo Sharing!" target="_blank">

12 <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg"

13 width="570" height="270"

14 alt="Slide 2">

15 </a>

16 <a href="http://www.flickr.com/photos/childofwar/2984345060/"

17 title="Happy Bokeh raining Day | Flickr - Photo Sharing!"

18 target="_blank">

19 <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg"

20 width="570" height="270"

21 alt="Slide 3">

22 </a>

23 </div>

24 <a href="#" class="prev">

25 <img src="img/arrow-prev.png" width="24" height="43"

26 alt="Arrow Prev">

27 </a>

28 <a href="#" class="next">

29 <img src="img/arrow-next.png" width="24" height="43"

30 alt="Arrow Next">

31 </a>

32 </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 <asp:Repeater ID="rptResimler" runat="server" ViewStateMode="Disabled">

2 <ItemTemplate>

3 <div class="slide">

4 <asp:Image ID="imgResim"

5 ImageUrl='<%#DataBinder.Eval(Container.DataItem, "ResimYol")%>'

6 runat="server" Width="570" Height="270"

7 AlternateText='<%#DataBinder.Eval(Container.DataItem, "Alt")%>'/>

8 <div class="caption" style="bottom: 0">

9 <p>

10 Happy Bokeh Thursday!</p>

11 </div>

12 </div>

13 </ItemTemplate>

14 </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. Sevgili okurlarım bu makalemde değişik kaynaklardan bilgi topladım. (yazilimmutfagi.net sitesindende faydalandım)