Asp.Net mvc resim galeri

Bugün sizlere Asp.Net mvc kullanarak galeri örneğini yazmaya çalışacağım. Çoğu sitede gördüğünüz ürünleri tanıtmaya yarayan bu seçenek ile sitemizdeki resimleri galeri olarak yayınlamaya çalışalım.

Projemin adı resimgaleri
Yeni bir proje açtıktan sonra resimlerimizin ve xml dosyamızın bulunacağı yeni bir klasör oluşturalım. Adı ise resimler olsun.
Klasörler şöyle;

Şimdi ise Models klasörüne sağ tıklayıp Resim adında bir class oluşturalım.

public class Resim
    {

        public Resim(string yol, string baslik)
        {
            Yol = yol;
            Baslik = baslik;

        }
        public string Yol { get; set; }
        public string Baslik { get; set; }
    }   

Daha sonrada xml dosyamızdan verileri çeken yeni bir model oluşturalım. ResimModel olsun.

 public class ResimModel : List
    {
        public ResimModel()
        {
            string resimyol = HttpContext.Current.Server.MapPath("~/resimler/");
            XDocument resimkayitlar = XDocument.Load(resimyol + @"/galeri.xml");
            var resimler = from resim in resimkayitlar.Descendants("resim")
                         select new Resim(resim.Element("resimadi").Value,
                         resim.Element("baslik").Value);
            this.AddRange(resimler.ToList());
        }

    }   

Controller imize modelimizi tanıtalım.

using resimgaleri.Models;

Resimlerimizi göstereceğimiz sayfa oluşturalım.

public ActionResult Galeri()
        {
            return View(new ResimModel());
        }

Sayfamızın kodları;
Resimlerimizin boyutları ne olursa olsun. Sayfamızda 120px olarak küçük resimlerle gösteriyoruz.

@model IEnumerable<resimgaleri.Models.Resim>
@{
    ViewBag.Title = "Galeri";
}
<div id="ana_cerceve">
<ul class="kresimler">
    @foreach (var resim in Model)
    {
        <li>
            <a href="@Url.Content("~/resimler/" + resim.Yol)">
                <img alt="@resim.Baslik" src="@Url.Content("~/resimler/" + resim.Yol)" class="thumbnail-border" width="120" height="120" title="@resim.Baslik"/>
            </a>
                <span class="resimyazi">@resim.Baslik</span>
                 
       </li>
    }
</ul>
</div>   

XML dosyamız ise şu biçimde olmalıdır.

<?xml version="1.0" encoding="utf-8"?>
<resimler>
  <resim>
      <resimadi>resim1.jpg</resimadi>
      <baslik>Resim 1</baslik>
    </resim>
  <resim>
      <resimadi>resim2.jpg</resimadi>
      <baslik>Resim 2</baslik>
    </resim>
  <resim>
      <resimadi>resim3.jpg</resimadi>
      <baslik>Resim 3</baslik>
    </resim>
</resimler>
   

Son olarak resimleri css ile boşlukları ayarlayalım.

ul.kresimler li
{
    position: relative;
    list-style: none;
    float: left;
    margin: 3px;
    width: 150px;
    height: 150px;
    display: block;
}

span.resimyazi
{
    bottom: 0;
    left: 5px;
    line-height: normal;
    position: absolute;
}   

Projemizin çalışır hali ise;

Bu yazımın da sonuna gelmiş bulunuyoruz. Bir sonraki yazımda görüşmek dileğiyle...