"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

Asp.Net MVC WebGrid Kullanımı ve Örnek Uygulama

Asp.Net MVC, projelerinizde server-site kontrol edilebilecen ve Ajax desteği eklenebilen WebGrid nesnesinin kullanımını öğrenelim.

Asp.Net MVC, projelerinizde server-site paging (sayfalama) yapılabilen, veri türleri strongly-typed olarak kullanılabilen, istendiğinde Ajax desteği de eklenebilecek bir grid yapısı barındırmaktadır: WebGrid. System.Web.Helpers dll’inin içerisinde yer alan bu kontrolü MVC projelerinizde kolaylıkla kullanabilirsiniz.

Asp.Net MVC WebGrid Kullanımı

WebGrid’in nasıl kullanılacağını bir örnek üzerinde inceleyelim. Örnek projemizde firmamızdaki ürünleri gridde listeleyeceğiz. Sonrasında WebGrid’in sayfalama, varsayılan sıralama, sütun seçimi, sütun başlıklarının değişimi ve sütuna göre sıralama özelliklerini

Asp.Net MVC projemizde HomeController içerisinde Urunler isminde bir action oluşturalım.

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

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

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

<h2>Ürünler</h2>

Ü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.

NOT: Örnek uygulamada kolaylık olması açısından HomeController ile aynı namespace’te oluşturabilirsiniz.

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

Urunler actionı içerisinde ürün kayıtlarımızı (List<Urun>  tipinde) oluşturalım ve Urunler viewının Model değeri olarak ürün listemizi tanımlayalım.

public class HomeController : Controller
{
    public ActionResult Urunler()
    {
        List<Urun> urunler = new List<Urun>()
        {
            new Urun{ Id = 1, Ad = "Masaüstü Bilgisayar", Fiyat = 1200, Adet = 20}   ,
            new Urun{ Id = 1, Ad = "Laptop", Fiyat = 2000, Adet = 40},
            new Urun{ Id = 1, Ad = "Tablet", Fiyat = 800, Adet = 65},
            new Urun{ Id = 1, Ad = "Akıllı Telefon", Fiyat = 12, Adet = 44},
            new Urun{ Id = 1, Ad = "Ev Telefonu", Fiyat = 12, Adet = 140}
        };
        return View(urunler);
    }
}

İş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.

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

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

grid değişkenimiz, view içerisinde kullanacağımız WebGrid nesnemiz oldu. Şimdi gridi view içerisinde görüntüleyelim. Bunun için WebGrid’in GetHtml metodunu kullanacağız.

<div>
    @grid.GetHtml()
</div>

Kodlama tamamlandıktan sonra view’ın kodları aşağıdaki gibi olacaktır.

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

<h2>Ürünler</h2>

@{
    var grid = new WebGrid(Model);
}

<div>
    @grid.GetHtml()
</div>

Projeyi çalıştırıp Home > Urunler sayfasına geldiğinizde ürün listesini grid içerisinde göreceksiniz.

Asp.Net MVC WebGrid Örnek Uygulama

WebGrid > GetHtml metodunu parametre tanımlamadan kullandık. Gridin görsel özelliklerini, metodun parametreleriyle tanımlayabilirsiniz.  Aşağıda hangi parametrelerin ne için kullanıldığı açıklanmıştır.

Asp.Net MVC WebGrid GetHtml Metodunun Kullanımı

tableStyle

Tablonun genelinde kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

headerStyle

Tablonun headerında (başlık bölümünde) kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

footerStyle

Tablonun alt footerında (alt bölümünde) kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

rowStyle

Tablonun satırlarında kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

alternatingRowStyle

Tablonun çift numaralı satırlarında kullanılacak olan CSS sınıfının tanımlanacağı parametredir. Örneğin bir satırın beyaz bir satır mavi olmasını istiyorsanız rowStyle’a beyaz arkaplan, alternatingRowStyle’a da mavi arkaplan tanımlaması yapmanız gerekecektir.

selectedRowStyle

Tablonun seçili satırında kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

caption

Tablonun başlığının tanımlanacağı parametredir.

displayHeader

Tablo sütun başlıklarının (header) görünüp görünmemesinin tanımlanacağı parametredir. Eğer true değeri atanırsa başlıklar görünür, false değeri atanırsa görünmez.

fillEmptyRows

Eğer gridin son sayfasındaki eleman sayısı, sayfadaki eleman sayısından az ise kalan satırların boş satırlarla doldurulup doldurulmamasının tanımlanacağı parametredir. Eğer true değeri atanırsa kalan satırlarda boş satır görünür, false değeri atanırsa görünmez.

emptyRowCellValue

Eğer fillEmptyRows değeri true ise boş satırlara atanacak değerin tanımlanacağı parametredir.

columns

Grid sütunlarında hangi verilerin yer alacağının tanımlandacağı parametredir.

exclusions

Eğer fillEmptyRows değeri true ise boş satırlara değer atanması istenmeyen sütunların tanımlanacağı parametredir.

mode

Gridin sayfalama yönteminin tanımlanacağı parametredir.

firstText

Grid üzerinde sayfalama yapıldığında ilk sayfa linkine tanımlanacak metin ifadesidir.

previousText

Grid üzerinde sayfalama yapıldığında önceki sayfa linkine tanımlanacak metin ifadesidir.

nextText

Grid üzerinde sayfalama yapıldığında sonraki sayfa linkine tanımlanacak metin ifadesidir.

lastText

Grid üzerinde sayfalama yapıldığında son sayfa linkine tanımlanacak metin ifadesidir.

numericLinksCount

Sayfalama yapıldığında kaç adet sayfa numarasının görüntüleneceğinin tanımlanacağı parametredir.

Asp.Net MVC WebGrid Sütun Seçimi Yapma

WebGrid üzerinde tüm sütunların değil, sadece bizim istediğimiz sütunların görünmesini sağlayabiliriz. Bu işlem için GetHtml metodunun columns parametresine görünmesini istediğimiz sütunları tanımlamamız gerekmektedir. grid.Column ile alacağımız sütunları ilk parametrede sütun adı, ikinci parametrede sütun başlığı gelecek şekilde tanımlıyoruz.

Örneğimizde “Ad”, “Fiyat” ve “Adet” sütunlarını Ürün “Adı”, “Fiyatı” ve “Stok Miktarı” başlıklarıyla görüntüleyelim.

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

Asp.Net MVC WebGrid Sütun Seçimi Yapma

Asp.Net MVC WebGrid Varsayılan Sıralamasını (Default Sort) Tanımlama

WebGrid içindeki verileri varsayılan olarak bir sütuna göre sıralamak isteyebilirsiniz. Bunun için WebGrid nesne tanımlamasında constructorın defaultSort parametresini kullanıyoruz. Hangi sütunu sıralamak istiyorsak o sütunun ismini tanımlamamız gerekecektir.

Örneğimizde “Ad” sütununa göre sıralama yapalım.

var grid = new WebGrid(Model, defaultSort:"Ad");

Asp.Net MVC WebGrid Varsayılan Sıralamasını (Default Sort) Tanımlama

Asp.Net MVC WebGrid Sayfalama ve Her Sayfadaki Eleman Sayısını Tanımlama

WebGrid içerisindeki verileriniz çok fazla olabilir. Bu durumda gridinizi sayfalamanız gerekecektir. Her sayfada kaç adet verinin görüneceğini tanımlamak için, WebGrid nesne tanımlaması sırasında constructorın rowsPerPage parametresini kullanıyoruz.

Örneğimizde her sayfada 2 satır verinin görüneceğini tanımlayalım.

var grid = new WebGrid(Model, defaultSort:"Ad", rowsPerPage:2);

Asp.Net MVC WebGrid Sayfalama ve Her Sayfadaki Eleman Sayısını Tanımlama

Asp.Net MVC WebGrid Sayfalamada İlk Sayfa ve Son Sayfa Linkleri

WebGrid içerisindeki verilerinizi sayfaladıktan sonra ilk sayfa ve son sayfa linkleri ekleyebilirsiniz. Bu sayede ilk sayfadan (ya da arada bir sayfada iseniz bulunduğunuz sayfadan) son sayfaya tek tıklama ile ulaşabileceksiniz. Bunun için WebGrid’in GetHtml metodunun mode parametresine WebGridPagerModes.FirstLast tanımlamasını yapıyoruz.

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

Asp.Net MVC WebGrid Sayfalamada İlk Sayfa ve Son Sayfa Linkleri

Asp.Net MVC WebGrid Sayfalamada Önceki Sayfa ve Sonraki Sayfa Linkleri

WebGrid içerisindeki verilerinizi sayfaladıktan sonra önceki ve sonraki sayfa linkleri ekleyebilirsiniz. Bunun için WebGrid’in GetHtml metodunun mode parametresine WebGridPagerModes.NextPrevious tanımlamasını yapıyoruz.

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

Asp.Net MVC WebGrid Sayfalamada Önceki Sayfa ve Sonraki Sayfa Linkleri

Asp.Net MVC WebGrid Sayfalamada Tüm Linkleri Ekleme

WebGrid içerisindeki verilerinizi sayfaladıktan sonra önceki, sonraki, ilk, son sayfalar ile sayfa numaraları linklerini bir arada  ekleyebilirsiniz. Bunun için WebGrid’in GetHtml metodunun mode parametresine WebGridPagerModes.All tanımlamasını yapıyoruz.

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

Asp.Net MVC WebGrid Sayfalamada Tüm Linkleri Ekleme

Asp.Net MVC WebGrid Sütun Bazında Sıralama

WebGrid’deki değerleri tarayıcı üzerinde sütun bazında sıralamak isteyebilirsiniz. Bunun için sütun ismine tıklamanız yeterli olacaktır. Sıralama yapılmadığı durumlarda önce küçükten büyüğe, sonra büyükten küçüğe sıralama yapmaktadır.

NOT: Bu işlem için ek bir kodlamaya ihtiyaç yoktur (WebGrid’in kendi özelliği).

Aşağıdaki örnekte ilk anda varsayılan (ismine göre A’dan Z’ye) sıralama ile grid dolmuştur. Fiyatı sütununa tıkladığınızda (2. durum) ürün fiyatına göre küçükten büyüğe sıralama yapmaktadır. İkinci tıkladığınızda ise (3. durum) sıralamayı ters çevirir (ürün fiyatına göre büyükten küçüğe sıralar).

Asp.Net MVC WebGrid Sütun Bazında Sıralama

 

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

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

 

Yorumlar (2)

  1. Avatar
    Volkan BİCER

    15.07.2013

    Elinize sağlık. Faydalı bir çalışma olmuş.

  2. Avatar
    bebe

    29.10.2014

    hocam peki ek bit sütunu sonradan ilave edersek ne yapmalıyız?

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.