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 devamlı değişen bir metin ise devamlı bu HTML’i düzenleyip sunucumuza gönderemeyiz. Bu benzeri bir halde bir veritabanına devamlı verimizi yazarız ve içeriğimizi bu veritabanından okuyacak duruma 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 duruma getirebiliriz? Bu meslek için hazır asp.net kontrolleri kullanabiliriz. sorun biz bu örnekte ASP.Net repeater kontrolü yardımı ile bu işi gerçekleştireceğiz. İlk şekilde görsel şekilde 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 biçimde içeriği göreceğiz. 1  <div id=”slides”> 2    <div class=”slides_container”> üç        <a href=”http://www.flickr.com/photos/jliba/4665625073/” 4        title=”145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!” 5        target=”_blank”> altı            <img src=”http://slidesjs.com/examples/standard/img/slide-1.jpg” 7            width=”570” height=”270” 8            alt=”Slide 1”> 9         </a> on         <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 biçimde repeater aracılığı ile alabilen duruma 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 biçimde aspx dosyamızı düzenlememiz yeterli olacaktır. 1  <asp:Repeater ID=”rptResimler” runat=”server” ViewStateMode=”Disabled”> 2    <ItemTemplate> üç        <div class=”slide”> 4            <asp:Image ID=”imgResim” 5            ImageUrl=’<%#DataBinder.Eval(Container.DataItem, “ResimYol”)%>’ altı                runat=”server” Width=”570” Height=”270” 7                AlternateText=’<%#DataBinder.Eval(Container.DataItem, “Alt”)%>’/> 8            <div class=”caption” style=”bottom: 0”> 9                <p> on                    Happy Bokeh Thursday!</p> 11            </div> 12        </div> 13    </ItemTemplate> 14  </asp:Repeater> Biz örneğimizde ekseriyetle 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 doğrudan veritabanından okuyabilirsiniz. Biz örnekte klasör içeriğindeki bütün resimleri çekerek gerçekleştirdik ve bunları nesnemizin özelliklerine atadık. Sevgili okurlarım bu makalemde farklı kaynaklardan bilgi topladım. (yazilimmutfagi.net sitesindende faydalandım)


Yapılan Yorumlar
Erdem OFLAZ

Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.
 Kategoriler
 Popüler yazılar