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

JavaScript ile Ziyaretçi Bilgileri Nasil Alinir

Bu makalemizde javascript ile web sayfamizi ziyaret eden kullanicilarin hangi site üzerinden geldigi, kullandigi tarayici bilgisi, ekran çözünürlügü ve Ip adresi gibi bilgileri nasil alacagimizi anlatacagiz. Tarayici Tipini Almak Ziyaretçinin kullandigi tarayici tipini asagidaki javascript kodu ile alabiliriz. function Tarayicitipi() {   alert(navigator.appName); } Tarayici Versiyonunu Almak function Tarayiciversiyon() {   alert(navigator.appVersion); } Ziyaretçinin Hangi Baglantiyi Kullanarak Geldigi Bilgisi (referral bilgisi) Eger ziyaretçi sayfamiza direk olarak degilde bir linki takip ederek geldi ise, geldigi adresi almak için asagidaki kodu kullaniyoruz. Bu sayede arama motorlarin gelen ziyaretçileride bulabilir ve farkli analizler için kullanabiliriz. function ReferrelBilgisi() {    alert(document.referrer); } Ekran Çözünürlügünü Almak function Cozunurluk() {    var w = screen...
Yorum Gönder
Devamı

GPS'li şapkayla yolunuzu bulmak çok kolay!

Bu ilginç görünümlü şapkayı giydiğinizde, yolunuzu hiç kaybetmeyeceksiniz! Gitmek istediğiniz mekanı bulmak için telefonunuzu cebinizden çıkarmanıza artık gerek yok. Çünkü bu şapka, size yolu tarif edebiliyor, üstelik yalnızca sesle. GPS destekli silindir şapka,  Cornell Üniversitesi  araştırmacıları tarafından geliştirilmiş. Prototip şu an korkunç görünüyor olabilir, ancak onu kullanmak için dil bilmenize bile gerek yok. Şapka, ses tonlarıyla yolunuzu bulmanızı sağladığından elinizi kullanmanıza da gerek kalmıyor. Bu şapkayı yakın bir zamanda satın almanız mümkün olmayacak, ancak teknolojinin navigasyon uygulamalarına uyarlanması faydalı olabilir. Teknoloji görsel ipuçlarıyla çalışmadığından, özellikle görme sorunu yaşayan kullanıcıların işine yarayabilir.
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ı