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.
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 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 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 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 Ö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 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 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).
Yepyeni makalelerde görüşmek dileğiyle :)
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com