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.
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
| <div id="slides"> <div class="slides_container"> title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"> width="570" height="270" alt="Slide 1"> </a> title="Taxi | Flickr - Photo Sharing!" target="_blank"> width="570" height="270" alt="Slide 2"> </a> title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"> 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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.
Sonuç olarak bu görüntüyü elde ederiz. Tamamen dinamik bir yapida örnegimizi tamamlamis oluruz.
Yorumlar
Yorum Gönder