Asp.Net
08
Eki
2011
Mvc 3 jQuery Slider
Kategori : MvcjQueryList
Ekleyen : Zekeriya ALAN
Merhaba Arkadaşlar, Kısa bir aradan sonra makalelerime devam ediyorum. Makalelerim daha çok uygulamalı örneklere dayalı ; ne? nasıl? yapılır tarzında, teknik konulara pek girmiyorum zaten gerekli teknik bilgiler Microsoft'un Msdn ve asp.net sitelerinde fazlasıyla mevcut, bu kısa hatırlatmadan sonra bugün sizlerle paylaşacağım makalemde Mvc 3 ve jQuery ile hareketli bir Slider oluşturacağız, Slider resimleri veritabanından gelecek ( Access ) tabi bunun içinde küçük bir tablo hazırlayacağız.
Konumuzda geçen jQuery Slider'ı, nivo.dev7studios.com adresinden indirebilirsiniz, Tabiki Free olanını. :)
Öncelikle yukarıda görüldüğü gibi bir tablo oluşturuyoruz, oluşturduğumuz tablodaki alanlara değinecek olursak, kayıtsayısını tutan ( Id ) alanımız, slider içinde dönecek olan resimlerimizin adını tutan ( ResimAdı ) alanımız, ve slider üstünde görünecek notları tutacak olan ( Resim Yazısı ) alanımızdan oluşuyor.
Veritabanındaki alanlarımızı tutan sınıfımızı yazıyoruz. Bu sınıfı Mvc Projemizdeki Models klasörü içinde oluşturuyoruz.
   1:  public class Sliders
   2:  {
   3:      public int Id { get; set; }
   4:      public string ResimAdi { get; set; }
   5:      public string ResimYazisi { get; set; }
   6:  }
Web.Config'de bağlantı cümlemizi belirtiyoruz.
   1:  <connectionStrings>
   2:     <add name="slidercon" connectionString="Provider=Microsoft.Jet.OleDB.4.0; Data Source=|DataDirectory|\Slider.mdb;" providerName="System.Data.Oledb"/>
   3:  </connectionStrings>
Veritabanımızı ve sınıfımızı oluşturduğumuza göre, verilerimizi çekeceğimiz sınıfımızı yazabiliriz. Sınıfımız static bir sınıf ve static metodtan oluşuyor. Bağlantı olarak Ado.Net bağlantısı kullanacağız.
   1:  public static class SliderAnimasyon
   2:  {
   3:      public static List<Sliders> slideListesi()
   4:      {
   5:          OleDbConnection con = new OleDbConnection(ConfigurationManager.ConnectionStrings["slidercon"].ConnectionString);
   6:          OleDbCommand cmd = new OleDbCommand("Select *From SliderTablosu", con);
   7:          con.Open();
   8:   
   9:          OleDbDataReader dr = cmd.ExecuteReader();
  10:          List<Sliders> veriLer = new List<Sliders>();
  11:   
  12:          while (dr.Read())
  13:          {
  14:              veriLer.Add(new Sliders() { Id = (int)dr["Id"], ResimAdi = dr["ResimAdi"].ToString(), ResimYazisi = dr["ResimYazisi"].ToString() });
  15:          }
  16:          dr.Close();
  17:          con.Close();
  18:   
  19:          return veriLer.ToList();
  20:      }
  21:  }
Yukarıda gördüğünüz gibi static bir sınıf oluşturdum ve bu sınıfın içinde static bir metod ekledim geriye Generic List döndüren. Bu sınıfımızıda Models klasörü içinde oluşturuyoruz. Artık verilerimizede ulaşabildiğimize göre verilerimizi göstereceğimiz sayfayı oluşturmaya başlayabiliriz.
Öncelikle Projemizdeki Shared klasörü içine MasterPage sayfamızı oluşturuyoruz daha sonra Controllers klasörüne sağ tıklayıp add Controller'ı seçiyoruz. Controller ismini HomeController olarak isimlendiriyoruz. Boş bir Controller sınıfı oluşturduğumuz için Index sayfasını işaret eden yöntem standart olarak sınıfımız içinde yerini alır. Controller'imiza using Mvc3Slider.Models; namespace'ini referans olarak ekliyoruz.
   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Web;
   5:  using System.Web.Mvc;
   6:  using Mvc3Slider.Models;
   7:   
   8:  namespace Mvc3Slider.Controllers
   9:  {
  10:      public class HomeController : Controller
  11:      {
  12:          //
  13:          // GET: /Home/
  14:          public ActionResult Index()
  15:          {
  16:              List<Sliders> veriler = SliderAnimasyon.slideListesi();
  17:              return View(veriler);
  18:          }
  19:      }
  20:  }
Artık Index.aspx Sayfamızı oluşturmaya geçebiliriz. HomeController sınıfımızda gördüğünüz Index() üzerinde sağ tıklayarak açılan menüden add View seçeneğini seçiyoruz, seçtiğimizde açılan menüde ise View Name'in Index olmasına dikkat ediyoruz menünün bir alt satırında " Create a strongly-typed view " sekmesini işaretliyoruz " Model class " bölümünden Sliders sınıfını seçiyoruz, ve son olarakta daha önceden oluşturduğumuz MasterPage sayfamızı belirtiyoruz. Not: Model class bölümünde sınıfımızı göremez iseniz projenizi build ediniz.
Index.aspx sayfasındaki kodlarımız.
   1:  <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/SiteMasterPage.Master"
   2:   Inherits="System.Web.Mvc.ViewPage<IEnumerable<Mvc3Slider.Models.Sliders>>" %>
   3:   
   4:  <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
   5:      Mvc 3 jQuery Nivo Slider
   6:  </asp:Content>
   7:   
   8:  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
   9:   
  10:      <div id="wrapper">
  11:          <div class="slider-wrapper theme-pascal">
  12:              <div class="ribbon"></div>
  13:              <div id="slider" class="nivoSlider">
  14:   
  15:              <% foreach (var item in Model) { %>
  16:   
  17:                  <img src="/Images/<%: item.ResimAdi %>" alt="" title="<%: item.ResimYazisi %>" />
  18:   
  19:              <% } %>
  20:              
  21:              </div>
  22:          </div>
  23:      </div>
  24:   
  25:      <script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery-1.6.1.min.js") %>"></script>
  26:      <script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.nivo.slider.pack.js") %>"></script>
  27:      <script type="text/javascript">
  28:          $(window).load(function () {
  29:              $('#slider').nivoSlider();
  30:          });
  31:      </script>
  32:   
  33:  </asp:Content>
Yukarıda gördüğünüz gibi slider in orjinal yapısına hiç dokunmadım, sadece orta kısımda <div id="slider" class="nivoSlider"> ... </div> içinde değişiklik yaptım Modelimizden gelen verilerin içinde foreach ile döndüm. Projemizi çalıştırıyoruz. F5 :)
Nivo Slider çok esnek bir yapıdadır Css ve Java Script kodlarıyla oynayarak istediğinizi yapabilirsiniz.
Başka bir makalede görüşmek dileğiyle Hoşçakalın.

Örnek Proje : Mvc3Slider
01 Şubat Çar, 2012 Faruk AY
Resim ve yazıyı veritabından çekip slayt şeklinde gösterebiliyoruz. Şunu yapamadım ben bu slayt'ı haber manşeti şeklinde kullanmak istiyorum. Resmin üzerine tıklanıncı veritabanından haberin ID numarasına göre o haber sayfasına gitmesini istiyorum ancak bunu yapamadım yardımcı olurmusunuz.
01 Şubat Çar, 2012 Admin
<a href="/Home/Detay/<%: item.Id %>"><img src="/Images/<%: item.ResimAdi %>" alt="" title="<%: item.ResimYazisi %>" /></a>
29 Haziran Cum, 2012 Ömer Akgül
Eline sağlık hocam cok faydalı oldu. Birde bu editorden veriyi nasıl alabilecegimizi gösterebilirmisin?
02 Temmuz Pzt, 2012 Admin
Rica ederim faydalı olduysam ne mutlu bana; Sanırım Farklı konuya mesaj yazdınız! Editor derken?
11 Ağustos Paz, 2013 Rasim erten
merhaba biraz ezberci oluyor ama yukarıdaki ---------------- <a href="/Home/Detay/<%: item.Id %>"><img src="/Images/<%: item.ResimAdi %>" alt="" title="<%: item.ResimYazisi %>" /></a> ----------- yani veritabanından haberleri çekmek için bu kodu nereye giriyoruz.
13 Ağustos Sal, 2013 Zekeriya ALAN
Makalede bulunan proje dosyasını indirip incelerseniz, daha faydalı olur. O kodlar sayfanızdan dönen modelin elemanları o elemanlara foreach ile ulaşıp içerdeki değerleri ilgili yerlere eklersiniz. proje dosyası işinizi görecektir. İyi Çalışmalar.