Ana içeriğe atla

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.
?
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">
        <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.
?
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.
aspnet slider
Sonuç olarak bu görüntüyü elde ederiz. Tamamen dinamik bir yapida örnegimizi tamamlamis oluruz.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Linux En Az Sistem Gereksinimi İsteyen Dağıtımları Değerlendirilmesi

Linux İşletim Sisteminin Dağıtımlarının En az sistem gereksinimi isteyen sürümleri, değerlendirilmesi aşağıdadır, Değerlendirilen dağıtımlar şunlardır: Ubuntu Xubuntu Lubuntu Damn Small Linux Linux Mint Fedora Opensuse Debian Rat Hat Suse Linux Suse Linux Sistem Gereksinimleri: Pentium 1-4 ya da Xeon; AMD Duron, Athlon (XP, MP ya da 64), Sempron ya da Opteron 256MB RAM 500MB boş disk alanı 800x600 yada üstü resolution Rat Hat Memory Gerekli: 4 GB of memory Önerilen: 8 GB of memory CPU Gerekli: Intel Core processor, 2.4GHz, 512K cache or equivalent Önerilen: Intel multi-core processor, 2.4GHz dual processor, 512K cache or equivalent Storage 5 GB alan temel kurulum için. 40 GB alan Channel başına. 10 GB alan Cache dizini için(/var/cache/rhn) Disk yapılandırması olarak Raid 5 tavsiye edilir. Database İlk kurulum için 12 GB alan önerilir. Client ve channel hesaplamaları ise, 250 KB alan client system başına, 500 KB alan çhannel başına, ayrıca 230 KB channel da...
1 yorum
Devamı

JAVA'da if - else kosul yapisi

Programlama deyince degiskenlerden sonra akla ilk gelen  if-else  bloklaridir. Programimizi  if-else  kosul yapisi ile yönlendiririz. Velhasil bu yapiyi iyi bilmeden olmaz. Bütün programlama dillerinde mantik aynidir; fakat sözdiziminde ( syntax ) ufak farklar mevcuttur. Java'da  if-else  kosul yapisi genel olarak su sekildedir:   if  ( boolean ) true  ise else false  ise   Görüldügü üzere denetim  boolean  ifade üzerine kurulu.  Boolean  bir ifade iki degerden birini alir:  true  ya da false.  Deger  true  ise sunu yap, degilse bunu yap. Burada dikkat edilmesi gereken en önemli sey  boolean  bir ifade kullanmak. Örneklere geçmeden önce, hayati önem tasiyan karsilastirma ifadelerine kisaca deginmek istiyorum. <, <=, >, >=, == (esitse), =! (esit degilse)   Örnek: int sayi=5; if (sayi==5) System.out.println("sayi=5");   Simd...
Yorum Gönder
Devamı

MPLS Temel Konfigürasyonu

Bu yazı içerisinde sizlerle temel “MPLS” protokolü konfigürasyonunu adım adım uygulayarak paylaşacağım. Bu adımların tamamını Huawei marka AR 2200 Serisi Router ürün ailesi üzerinde konfigüre edeceğiz. Bu konfigürasyonların kullanıldığı ve çalıştırıldığı işletim sistemi versiyonu “ V200R003C00 ” dur. Konfigürasyon adımlarının tamamı bi çok üretici ürününde de aynı şekilde ve aynı ön gereksinim ve alt yapı hazır olduğu sürece uygulanabilir ve müşteri ve/veya Servis sağlayıcıda devreye alınabilir. İşlem adımlarının uygulanırken temiz bir şekilde anlaşılması çok önemlidir. MPLS Protokolü temel konfigürasyonunu aşağıdaki topoloji üzerinden uygulayarak sizlere sunuyor olacağım. MPLS Referans Topolojimiz Öncelikli olarak tüm Router cihazlarımızda, fiziksel interface’ler ve Loopback interfac IP adres tanımlamalarını topolojimize uygun ayarlıyoruz. RouterB IP İnterface konfigürasyonu; “Router B IP Konfigürasyonu çıktısı” “Router B Üzerinde Yer Alan İnterface’lerin IP...
Yorum Gönder
Devamı