Asp.Net MVC projelerinde kullandığınız WebGrid kontrolündeki verileri Excel dosyası olarak alma işleminin nasıl yapıldığını öğrenelim.

Bu işlemi örnek bir uygulama üzerinden gerçekleştirelim. Uygulamamızda öncelikle Urun isminde bir class tanımlayalım ve WebGrid içinde Urun türündeki verileri listeleyelim.

Asp.Net MVC projemizde ürün bilgilerini bir class üzerinde oluşturalım. Ürünün Id, Ad, Fiyat ve Adet (stok miktarı) bilgilerinin bulunduğu Urun sınıfını oluşturalım.

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

Ürün bilgilerimizi Veri isminde bir sınıf içerisinde static olarak tanımlayalım.

public class Veri
{
    private static List<Urun> _urunler = new List<Urun>()
    {
        new Urun{ Id = 1, Ad = "Masaüstü Bilgisayar", Fiyat = 1200, Adet = 20},
        new Urun{ Id = 2, Ad = "Laptop", Fiyat = 2000, Adet = 40},
        new Urun{ Id = 3, Ad = "Tablet", Fiyat = 800, Adet = 65},
        new Urun{ Id = 4, Ad = "Akıllı Telefon", Fiyat = 1450, Adet = 230},
        new Urun{ Id = 5, Ad = "LCD TV", Fiyat = 1100, Adet = 55},
        new Urun{ Id = 6, Ad = "LED TV", Fiyat = 2200, Adet = 90},
        new Urun{ Id = 7, Ad = "Çamaşır Makinesi", Fiyat = 1000, Adet = 15},
        new Urun{ Id = 8, Ad = "Bulaşık Makinesi", Fiyat = 900, Adet = 20},
        new Urun{ Id = 9, Ad = "Ekmek Kızartma Makinesi", Fiyat = 165, Adet = 25},
        new Urun{ Id = 10, Ad = "Saç Kurutma Makinesi", Fiyat = 100, Adet = 42},
        new Urun{ Id = 11, Ad = "Flat TV", Fiyat = 700, Adet = 30}
    };
    public static List<Urun> Urunler
    {
        get { return _urunler; }
    }
}

Projemizde HomeController içine UrunleriExceleAktar isminde bir Action oluşturalım.

public ActionResult UrunleriExceleAktar()
{
    return View();
}

Oluşturduğumuz actionın View’ını ekleyelim : Views > Home > UrunleriExceleAktar.cshtml

View içerisinde Veri.Urunler listesindeki verileri WebGrid üzerinde görüntüleyelim.

<h2>Urunleri Excel'e Aktar</h2>
@{
    var grid = new WebGrid(Makale.MVCWebGrid.Veri.Urunler);
}

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

Sayfa üzerine Excel’e aktarım işlemini tetikleyecek olan input > button kontrolünü ekleyelim. Kontrolün altına sonuçları üzerine ekleyeceğimiz bir div ekleyelim.

<input id="btExceleAktar" type="button" value="Excel'e Aktar" />
<div id="sonuc"></div>

Butona tıklandığında bir iframe oluşturalım. iframe içerisinde, (birazdan oluşturacağımız) verileri Excel’e aktaracak olan View’ı (Home/ExcelOlustur)  sonuc isimli div üzerinde görüntüleyeceğiz. Tetikleme işlemi için Jquery ile btExceleAktar butonuna click olayını ekleyelim.

$(function () {
    $("#btExceleAktar").on("click", function () {
        $('<iframe src="/Home/ExcelOlustur"></iframe>').appendTo('#sonuc').hide();
    });
});

Şimdi HomeController içerisine ExcelOlustur isimli Action’ı ekleyelim.

public ActionResult ExcelOlustur()
{
    return View();
}

Oluşturduğumuz actionın View’ını ekleyelim : Views > Home > ExcelOlustur.cshtml

View içerisinde Model’deki verileri table üzerinde görüntüleyeceğiz. İlk adımda, Excel’de listeleyeceğimiz verilerin başlıklarını (Id, Ad, Fiyat, Adet) tanımlayalım.

Bunun için ilk satırdaki veriyi (urunler.FirstOrDefault) alalım ve bu satır üzerinden sütun bilgilerine erişelim (ilkSatir.GetType().GetProperties()).

Tablo üzerindeki hücrelerin gözle kolay ayrılabilmesi için tablo (table) ve sütun (td) üzerine siyah renkte border (kenarlık) ekleyelim.  

İlk satır başlık olacağı için fontunu kalın (bold) olarak ayarlayalım. Verilerin fontlarını normal olarak tanımlayacağız.

<h2>Urun Listesi</h2>
@{
    var urunler = Makale.MVCWebGrid.Veri.Urunler;
    var ilkSatir = urunler.FirstOrDefault();
}
<table style="border: 1px solid black;">
    <tr style="font-weight: bold">
        @foreach (var ozellik in ilkSatir.GetType().GetProperties())
        {
            <td style="border: 1px solid #a59f9f;">@ozellik.Name</td>
        }
    </tr>
</table>

Şimdi modeldeki (urunler) verileri tabloya satır satır ekleyelim.

@foreach (var urun in urunler)
{
    <tr>
        @foreach (var urunOzelligi in urun.GetType().GetProperties())
        {
            <td style="border: 1px solid black;">@urunOzelligi.GetValue(urun, null)</td>
        }
    </tr>
}

Son olarak ExcelOlustur sayfası içindeki verilerin Excel dosyası olabilmesi için sayfanın headerlarını değiştirmemiz gerekmektedir.

Response.AddHeader("Content-disposition", "attachment; filename=urunler.xls");
Response.ContentType = "application/octet-stream";

ExcelOlustur.cshtml sayfasının tüm kodları:

<body>
    <div>
        <h2>Urun Listesi</h2>
        @{
            var urunler = Makale.MVCWebGrid.Veri.Urunler;
            Response.AddHeader("Content-disposition", "attachment; filename=urunler.xls");
            Response.ContentType = "application/octet-stream";
            var ilkSatir = urunler.FirstOrDefault();
        }
        <table style="border: 1px solid black;">
            <tr style="font-weight: bold">
                @foreach (var ozellik in ilkSatir.GetType().GetProperties())
                {
                    <td style="border: 1px solid #a59f9f;">@ozellik.Name</td>
                }
            </tr>
            @foreach (var urun in urunler)
            {
                <tr>
                    @foreach (var urunOzelligi in urun.GetType().GetProperties())
                    {
                        <td style="border: 1px solid black;">@urunOzelligi.GetValue(urun, null)</td>
                    }
                </tr>
            }
        </table>
    </div>
</body>

Projeyi çalıştırıp Excel’e aktar butonuna tıkladığınızda tarayıcının (header içinde tanımladığımız) urunler.xls dosyasını indirmeye çalıştığını göreceksiniz.

urunler.xls dosyasını açtığınızda sayfa içerisinde oluşturduğunuz verilerin Excel dosyası içerisinde olduğunu göreceksiniz.

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

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