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ı

Bilgisayarın Sağlıklı ve Doğru Kullanımı

Bilgisayar genelde oturarak kullanıldığı için uzun süreli kullanımlar vücudumuza zarar verebilmektedir.Yazı yazmak,internet erişimi ya da oyun oynamak için uzun süreli kullanım;başta bel,boyun ve omurgalarımızın sağlığını tehdit eder.Diğer yandan sürekli aynı noktaya bakmak göz sağlığımıza zarar verir.Bu nedenle bilgisayar kullanıcısının oturma pozisyonuna çok dikkat etmesi ve uzun süre çalışmaması gerekir. Bilgisayar Kullanırken Oturma Şekli Önerileri ·         Bilgisayarı,uygun yükseliğe sahip olan masa ve sandalye üzerinde dik oturma konumunda kullanmak gerekir.Klavye ve farenin çok uzakta olmaması gerekir.Oturan kişinin gözü ile bilgisayar arasında 50-60 cm uzaklık olmalıdır.Kollar yatay ve rahat konumda olmalıdır.   ·         Masa yüksekliği yaklaşık 70 cm olmalıdır.Dizüstü bilgisayarlar için yükseltici olarak bilinen altlıklar yararlı olabilir.   ·         Oturma sırasında sırt desteklemeli ve...
Yorum Gönder
Devamı

Web Debugging - Hata Ayiklama (Fiddler Aracinin Kullanimi)

Debugging, hata ayiklama, programcinin olmazsa olmazi diyebiliriz. Kodlama sirasinda çikan hatalarda ya da hatasiz çalisan programda istenen sonuç dönmeyince, nerde hata yaptim diye satirlari incelemeye baslariz. Genelde kodlama sirasinda çikan hatalarimizda derleyici neyi yanlis yaptigimizi söylerken, runtime' da hatalarla karsilasinca ya da islemde bir yanlislik varsa isler biraz zorlasir. Pek çogumuz breakpoint'lerle adim adim inceleme yapariz, eger javascript kodlarimiz varsa alert'ler kullanarak isin içinden çikmaya çalisiriz. Tabi bu durum her zaman ise yaramayabilir, ya da çok can sikici bir hale dönüsebilir. Bu durumlarda browserda aslinda neler oldugunu ögrenmek için http requestlari takip edebilecegimiz programlar var. Fiddler bunlardan birisi. Fiddler Nedir Fiddler, bilgisayar ve internet arasindaki tüm web trafigini takip eden ve detayli bir sekilde analiz yapmamizi saglayan ücretsiz bir http debugging (Hata Ayiklama) programidir. Bu program, http trafigini...
Yorum Gönder
Devamı