Veysel Uğur KIZMAZ

Asp.Net MVC WebGrid içerisinde bir satır üzerine fareyle gelindiğinde renginin değişmesini ve tıklandığında ilgili satırın detay sayfasının açılmasını nasıl sağlayacağımızı öğrenelim.

Önceki makalemizde WebGrid kullanımını incelemiştik.

Makale linki: http://www.ugurkizmaz.com/YazilimMakale-1849-Asp-Net-MVC-WebGrid-Kullanimi-ve-Ornek-Uygulama.aspx

Şimdi benzer bir örnek üzerinden işlemimizi gerçekleştirelim. Örnek uygulamamızda ürün listesi oluşturacağız. Ürüne tıkladığımızda ürünün detay sayfasını açacağız.  

Asp.Net MVC projemizde ürün bilgilerini bir nesne üzerinde tanımlayalım. Ürünün Id, Ad, Fiyat ve Adet (stok miktarı) bilgilerinin bulunduğu Urun sınıfını oluşturalım.

public class Urun
{
    public int Id { get; set; }
    public string Ad { get; set; }
    public double Fiyat { get; set; }
    public int Adet { get; set; }
}

Ürün bilgilerimizi Veri isminde bir sınıf içerisinde static olarak tanımlayalım ve buradan alıp oluşturacağımız view üzerinde görüntüleyelim.

public class Veri
{
    private static List<Urun> _urunler = new List<Urun>()
    {
        new Urun{ Id = 1, Ad = "Masaüstü Bilgisayar", Fiyat = 1200, Adet = 20},
        new Urun{ Id = 2, Ad = "Laptop", Fiyat = 2000, Adet = 40},
        new Urun{ Id = 3, Ad = "Tablet", Fiyat = 800, Adet = 65},
        new Urun{ Id = 4, Ad = "Akıllı Telefon", Fiyat = 1450, Adet = 230},
        new Urun{ Id = 5, Ad = "LCD Televizyon", Fiyat = 1100, Adet = 55},
        new Urun{ Id = 6, Ad = "LED TV", Fiyat = 2200, Adet = 90},
        new Urun{ Id = 7, Ad = "Çamaşır Makinesi", Fiyat = 1000, Adet = 15},
        new Urun{ Id = 8, Ad = "Buzdolabı", Fiyat = 1650, Adet = 10}
    };
    public static List<Urun> Urunler
    {
        get { return _urunler; }
    }
}

Projemizde HomeController içerisinde Urunler isminde bir action oluşturalım ve model olarak Veri.Urunler ‘i tanımlayalım.

public class HomeController : Controller
{
    public ActionResult Urunler()
    {
        return View(Veri.Urunler);
    }
}

HomeController > Urunler actionı için view oluşturalım: Views > Home > Urunler.cshtml

İşlemler tamamlandığına göre Urunler viewına gelebiliriz. Öncelikle burada WebGrid nesnemizi oluşturmamız gerekmektedir. WebGrid nesnesini oluştururken içerisinde hangi verilerin (Model) yer alacağını da tanımlayalım. Ardından WebGrid nesnesini view içerisinde görüntüleyelim.

@{
    ViewBag.Title = "Urunler";
    Layout = "~/Views/Shared/_Layout.cshtml";
} 

<h2>Ürünler</h2>
@{
    var grid = new WebGrid(Model);
}

<div>
    @grid.GetHtml( 
        columns: grid.Columns(
                    grid.Column("Id", "Ürün Kodu"),
                    grid.Column("Ad", "Ürün Adı"),
                    grid.Column("Fiyat", "Fiyatı"), 
                    grid.Column("Adet", "Stok Miktarı")
                ))
</div>

Bu noktaya kadar standart bir WebGrid tanımlaması gerçekleştirdik. Şimdi WebGrid üzerinde seçili satırı ayırt edebilmek için bir tane CSS sınıfı oluşturalım: mousehover. Bu sınıfı fareyle üzerine geldiğimiz satırda çalışacak şekilde ayarlayacağız. Sınıfta cursor’ın pointer (el işareti) ve arkaplan renginin (satırın arkaplan rengi) sarı olması gerektiğini belirtelim.

<style type="text/css">
    .mousehover
    {
        cursor: pointer;
        background-color: yellow;
    }
</style>

WebGrid HTML olarak render edildiğinde aşağıdaki örnekteki gibi olacaktır.

<table>
    <thead>
        <tr>
            <th scope="col"><a href="/?sort=Id&amp;sortdir=ASC">Ürün Kodu</a></th>
            <th scope="col"><a href="/?sort=Ad&amp;sortdir=ASC">Ürün Adı</a></th>
            <th scope="col"><a href="/?sort=Fiyat&amp;sortdir=ASC">Fiyatı</a></th>
            <th scope="col"><a href="/?sort=Adet&amp;sortdir=ASC">Stok Miktarı</a></th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td>1</td>
            <td>Masaüstü Bilgisayar</td>
            <td>1200</td>
            <td>20</td>
        </tr>
        <tr class="">
            <td>2</td>
            <td>Laptop</td>
            <td>2000</td>
            <td>40</td>
        </tr>
        <tr class="">
            <td>3</td>
            <td>Tablet</td>
            <td>800</td>
            <td>65</td>
        </tr>
        <tr class="">
            <td>4</td>
            <td>Akıllı Telefon</td>
            <td>1450</td>
            <td>230</td>
        </tr>
        <tr class="">
            <td>5</td>
            <td>LCD Televizyon</td>
            <td>1100</td>
            <td>55</td>
        </tr>
        <tr class="">
            <td>6</td>
            <td>LED TV</td>
            <td>2200</td>
            <td>90</td>
        </tr>
        <tr class="">
            <td>7</td>
            <td>Çamaşır Makinesi</td>
            <td>1000</td>
            <td>15</td>
        </tr>
        <tr class="">
            <td>8</td>
            <td>Buzdolabı</td>
            <td>1650</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

Yapacağımız işlem: Javascript (Jquery) ile o an cursorın üzerinde durduğu (hover) table > tbody > tr etiketine erişip bu etikete tıklandığında /Home/Urun/{Id} linkine gitmesini sağlamak ve CSS sınıfını mousehover ile değiştirmek. {Id} parametresini, her satırdaki ilk td sütununu değerini (Id) alarak linki oluşturacağız.

<script type="text/javascript">
    $(function(){
        $('tbody tr').live('click', function () {
            location.href = '/Home/Urun/' + $(this).find('td:first').text();
        }).live('hover', function () {
            $(this).toggleClass('mousehover');
        }); 
    });
</script>

Projeyi çalıştırıp cursorı (fare imlecini) ürünlerin üzerinde gezdirdiğinizde ürünün arkaplan renginin sarı olduğunu ve tıkladığınızda /Home/Urun/{Id} (aşağıdaki örnek için /Home/Urun/4 ) sayfasının açıldığını göreceksiniz.

 

Yepyeni makalelerde görüşmek dileğiyle :)

Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com