Bildiğiniz gibi grid benzeri bir component web uygulamalarında olmazsa olmaz olan şeylerden birisidir. Her zaman listelenecek birşey olur. Asp.net mvc3'te bildiğiniz gibi server kontroller kullanılmıyor, bunun yerine webgrid
partial classı kullanılarak listeleme yapılabilir. Webgrid gerçekten kullanışlı, paging yapan güzel bir şey. Fakat ben kendi uygulamalarımda jqgrid (jquery componenti) kullanmayı tercih ettim. Görsel anlamda daha güzel, ajax tabanlı çalıştığı içinde daha hızlı ve daha az kaynak harcıyor.
Basitçe şöyle bir uygulama yapmak istiyorum.
Kullandığım temel kütüphaneler ve araçlar:
asp.net mvc 3fluent Nhibernate 1.1,jqgrid 3.8.2veritabanı olarak oracle 11g enterprise edition (10g üzeri herhangi bir veritabanında çalışabilir)
Basitçe yapmak istediğimiz ürünlerin bulunduğu bir tabloyu elimizdeki araçları kullanarak bir web sayfasında listelemek.Öncelikle visual studio 2010 açılır. Sıfırdan Asp.net mvc3 uygulaması yaratılır.
sitesinden indirdiğimiz jqgrid paketinin içerisinde bulunan jquery.jqGrid.min.js dosyasını, yeni projemizin script dizinin altına kopyalayıp, add existing item diyerek projemize ekliyoruz. Aynı şekilde ellipsis-xbl.xml ve ui.jqgrid.css dosyalarını projenin content klasörüne kopyalıyoruz, add existing item yaparak projeye ekliyoruz.
Controller klasörüne sağ tıklayıp add new controller diyoruz. Yeni controllerimizin ismi UrunController.UrunController'a yeni bir method ekliyoruz.
public ActionResult UrunListesi()
{
return View();
}
Metodun içerisinde herhangi bir yere sağ tıklayarak add view diyoruz. visual studio otomatik olarak bir view ekleyecektir.
UrunListesi view'ımız oluştuktan sonra head kısmını aşağıdaki şekilde değiştirmemiz gerekiyor.
Body kısmını da aşağıdaki şekilde değiştirmemiz gerekiyor:
<head runat="server"> <title>UrunListesi</title> <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" media="screen" href="<%= Url.Content("~/Content/ui.jqgrid.css") %>" /> <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/grid.locale-tr.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jqGrid.min.js") %>" type="text/javascript"></script> </head>
<body>
<div>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align: center;">
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Urun/GridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['No', 'Ad', 'Aciklama', 'Id'],
colModel: [
{ name: 'No', index: 'No', width: 20, align: 'left' },
{ name: 'Ad', index: 'Ad', width: 40, align: 'left' },
{ name: 'Aciklama', index: 'Aciklama', width: 200, align: 'left' },
{ name: 'Id', index: 'Id', width: 100, align: 'left', hidden: true}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 50],
sortname: 'No',
sortorder: "desc",
width: 700,
viewrecords: true,
caption: 'Ürün Listesi'
});
});
</script>
</body>Bu kısımda jqgrid componenti ile ilgili ayarlamalar yapılıyor. Gelen verinin yapısı, formatı vb. pek çok özellik bu view üzerinde tanımlanmış oluyor. Burdaki en önemli kısımlardan birisideurl kısmı. Burda hangi mvc actionunu çağırdığımızı belirtmiş oluyoruz. Urun controlleri içerisinde GridData actionu. Henüz böyle bir action tanımlamadık. Şimdide onu tanımlıyoruz. UrunController'a gidip aşağıdaki şekilde bir method ekliyoruz.Uygulamamızı çalıştırdığımızda basitçe 2 kayıttan oluşan verimizi ekranda görürüz.
public JsonResult GridData() { IList listData = new ArrayList(){ new { id = "1", cell = new String[]{"1", "Satranç Takımı", "Mıknatıslı Satranç Takımı "} }, new { id = "2", cell = new String[]{"2", "Futbol Topu","Gerçek Deri"} } }; return Json(new { total = 1, page = 1, records = 2, rows = listData },JsonRequestBehavior.AllowGet); }
Kayıtları manuel olarak oluşturduk, bundaki sonra postada kayıtları nhibernate ile veritabanından çekip listeleyeceğiz.
