eray aydoğdu

jQuery and ASP.NET MVC fanatic.

Jquery JqGrid’ten Excel’e veri Aktarma

Bu makalemizde Jquery kütüphanesinin JqGrid plug-in ni kullanarak verileri göstermeyi ve bu verileri excel e aktarmayı göreceğiz. JqGrid size verilerinizi sıralama, sayfalama, arama gibi işlemleri kolayca yapmanızı sağlıyor.

Uygulamamızı Asp.Net MVC 1.0 da geliştireceğiz. Öncelikle JQuery ve JGrid kütüphanelerini indirmeliyiz.

JqGrid i sayfamıza yerleştirelim

Ürünleri database’den çekmeden önce sayfamızdan gerekli script lere referans verdiğimizden emin olmalıyız. Master Page te bütün CSS ve JS leri çağırmalıyız.

 <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />  
    <link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />  
    <script src="../Scripts/jquery-1.3.2.js" type="text/javascript"></script>  
    <script src="../Scripts/jquery.jqGrid.js" type="text/javascript"></script>  
    <script src="../../Scripts/Site.js" type="text/javascript"></script>  

Bu işlemleri tamamladıktan sonra örnek olarak Northwind database “Products” table ı kullanarak repository i oluşturalım.

 public class ProductRepository : IProductRepository
    {
        public List<Product> GetAll()
        {
            using(var db = new NorthwindDataContext())
            {
                return (from p in db.Products
                       select p).ToList();
            }
        }
    }

loadProduct fonksiyonu View yani sayfamız load olduğunda verileri çağıracak.

<script language="javascript" type="text/javascript">

    // load the products
    loadProducts(); 

</script>  

<% using (Html.BeginForm(new { Action = "ExportToExcel" }))
 {%>

<table id="list"></table>

<input type="submit" value="Excel e aktar" />

<%

 }%>

Şimdi loadProduct methodumuza bakalım.

function loadProducts()
{
    jQuery(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '/Home/GetProducts/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Name', 'QuantityPerUnit',"UnitPrice"],
            colModel: [
          { name: 'Id', index: 'Id', width: 40, align: 'left' },
          { name: 'Name', index: 'Name', width: 40, align: 'left' },
          { name: 'QuantityPerUnit', index: 'QuantityPerUnit', width: 200, align: 'left' },
          { name: 'UnitPrice', index: 'UnitPrice', width: 200, align: 'left' }],
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            caption: 'My first grid'
        });
    });
}

Şimdi de Controller ımızdaki kodu hazırlayalım.

 public ActionResult GetProducts(string sidx, string sord, int page, int rows)
        {
  var products = _productRepository.GetAll();

            var totalPages = 1; // we'll implement later
            var totalRecords = 3; // implement later

            var jsonData = new
                               {
                                   total = totalPages,
                                   page = page,
                                   records = totalRecords,
                                   rows = (from p in products
                                           select new
                                                      {
                                                          id = p.ProductID,
                                                          cell = new string[]
                                                                     {
                                                                         p.ProductID.ToString(), p.ProductName,
                                                                         p.ProductName
                                                                     }
                                                      }).ToArray()
                               };

            return Json(jsonData);
}

_productRepository.GetAll() methodu Product Tablosundaki verileri çekmemizi sağladı. Son olarak JqGrid için gerekli olan properties leri bulunduran jsonData adındaki Anonymous type değişkenimizi oluşturduk.

Projemizi çalıştırdığımızda aşağıdaki görüntüyü elde edeceğiz.

ToJsonForjqGrid<T> Extension Method u Oluşturmak:

ToJsonForjqGrid<T> extension ı jqGrid in desteklediği List<T> collection a çevirmek zorundayız.
  public static object ToJsonForjqGrid<T>(this List<T> list,string primaryKey,string[] columnNames) where T : new()
        {
            if(list.Count() == 0)
                throw new ArgumentException("List does not contain any items!");

            var jsonData = new
                               {

                                   rows = (from p in list
                                          select new
                                        {
                                            id = p.GetPropertyValue(primaryKey),
                                            cell = p.GetPropertyValues(columnNames)       
                                        }).ToArray()                               

                               };

            return jsonData; 
        }

ToJsonForJqGrid<T> iki parametre alıyor. Birincisi primarykey yani row daki property nin id’si. İkincisi ise columnNames[] griddeki kolonların isimleri.

Şimdi GetProducts ı ToJsonForJqGrid i kullanarak değiştirelim.

 public ActionResult GetProducts(string sidx, string sord, int page, int rows)
        {

            var jsonData = _productRepository.GetAll().ToJsonForjqGrid("ProductID", new[] { "ProductID", "ProductName" });
            return Json(jsonData);

        }

Eğer daha fazla kolon göstermek istersek columnName e bir kaç alan daha eklememiz yeterli.

...ToJsonForjqGrid("ProductID", new[] { "ProductID", "ProductName", "QuantityPerUnit","UnitPrice" });

Grid i Excele Aktarma

Excel e Aktar butonu tıklandığında ExportToExcel action ı tetiklenecek.

 public ActionResult ExportToExcel()
        {
            var products = _productRepository.GetAll();

            var grid = new GridView();
            grid.DataSource = from p in products
                              select new
                                         {
                                             ProductName = p.ProductName,
                                             SomeProductId = p.ProductID
                                         };
            grid.DataBind();

            Response.ClearContent();
            Response.AddHeader("content-disposition", "attachment; filename=MyExcelFile.xls");

            Response.ContentType = "application/excel";

            StringWriter sw = new StringWriter();

            HtmlTextWriter htw = new HtmlTextWriter(sw);

            grid.RenderControl(htw);

            Response.Write(sw.ToString());

            Response.End();

            return View("Index");
        }

Herkese iyi çalışmalar..

No Responses to “Jquery JqGrid’ten Excel’e veri Aktarma”

Bu yazıya yapılan yorumlar için RSS beslemeleri. TrackBack URL

Leave a Response