Asp.net Mvc ile Jqgrid Entegrasyonu

01.03.2011 yılında jqgrid ile ilgili yazılmış bir blog yazısı:

Bildiğiniz gibi grid componenti web uygulamalarında listeleme için kullanılan bileşenlerden birisidir. Asp.net mvc3’te bildiğiniz gibi asp.net web forms çatısında olduğu gibi sunucu tabanlı bileşenler kullanılamıyor, bunun yerine webgrid partial classı kullanılarak listeleme yapılıyor. Webgrid gerçekten kullanışlı, paging yapabildiğimiz bir bileşen. Fakat ajax bazlı bir jquery bileşeni, sayfanın tekrar yüklenmesini gerektirmemesi sebebiyle daha güzel bir kullanıcı deneyimi sağlayacaktır. Jqgrid listeleme yapmak için kullanabileceğimiz bir jquery eklentisidir.

Jqgrid Nedir?

Jqgrid ajax tabanlı çalışan, verilerin listelenmesini ve güncellenmesini sağlayan istemci (client) bazlı çalışan bir javascript kontrolüdür. Tamamen istemci bazlı bir kontrol olduğu için, mevcut tüm backend platformlarına (php, java, asp.net vs…) kolayca entegre edilebilir.

Bu demo için kullandığım temel kütüphaneler ve araçlar:

  • asp.net mvc 3
  • fluent Nhibernate 1.1
  • jqgrid 3.8.2
  • veritabanı 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.

Asp.net MVC 3 Projesi Oluşturuyoruz

Ö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 dizininin 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 ve add existing item diyerek 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 projeye bir view ekleyecektir.

UrunListesi view’ımız oluştuktan sonra head kısmını aşağıdaki şekilde değiştirmemiz gerekiyor. İlgili css ve js dosyalarına referans ekliyoruz.

<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 kısmını da aşağıdaki şekilde değiştirmemiz gerekiyor:

<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 biriside url kısmı. Burda hangi mvc actionunu çağırdığımızı belirtmiş oluyoruz. UrunController içerisinde GridData action’ı.
Henüz böyle bir action tanımlamadık. Şimdide onu tanımlıyoruz. UrunController’a gidip aşağıdaki şekilde bir method ekliyoruz.

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);
}

Uygulamamızı çalıştırdığımızda  basitçe 2 kayıttan oluşan verimizi ekranda listelenmiş olarak görürüz:

 

 

1 thought on “Asp.net Mvc ile Jqgrid Entegrasyonu”

Yorum bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top