20
May
2017

MVC de Grid Kontrolü Kullanımı Bölüm 1

Grid Kontrolü Kullanımı

Grid kontrolü kullanımı oldukça basit ve bize bir çok kolaylık sağlayan bir kontroldür. Projelerin, özellikle de e-ticaret projelerinin vazgeçilmezidir grid. Dataları listelemek, düzenlemek, silmek için oldukça kullanışlıdır. Bu kontrolün nasıl kullanıldığına bakalım.

Grid kullanabilmek için öncelikle elimizde bir data olması gerektiğini unutmayalım. Elinizde bir data yoksa ister kod içinde mock data tanımlayabilir yada Microsoft’un bizimle paylaştığı northwind database’ni buradan indirebilirsiniz. İndirdiğiniz zipin içinden çıkan *.bak uzantılı backup dosyasını SQL Server’ı açıp Tasks > Restore > Database yolunu izleyerek yükleyip, Northwind databesini oluşturabilirsiniz.

Data olayını hallettiğimize göre şimdi File > New > Project diyerek açılan pencereden Visual C# altında > Web > ASP.NET Web Application seçip MVC projemizi oluşturalım ve projemizin içindeki models klasörüne sağ tıklayıp Add > New Items diyerek Data altından code first entity model ekleyelim. Ben model ismimi EDM olarak tanımlıyorum.

Bundan sonra yapmamız gereken, ürünleri göstermek istediğimiz yani gridin bulunacağı sayfanın ilişkili controllerını bulup, öncesinde modeli (EDM) tanımlayıp database bağlantısını sağlayıp, action içinden sayfaya bu modeli list, json veya istediğimiz türde sayfaya yönlendirerek datayı kullanılabilir hale getirmektir. Unutmadan belirtiyim ben database bağlantısını entity ile yaptım diye sizin de bu yolu tercih etmeniz gerekmemekte. Siz projenize uygun database bağlantısını istediğiniz gibi yapabilirsiniz. Ben işlemi kolay ve hızlıca yapabilmek adına entity frameworkü seçtim. Soldaki resimdeki hali aldıysa projeniz doğru yoldasınız demektir.

Ben index sayfasını kullanmayı seçtiğim için HomeController açıyorum ve önce db conteximi tanımlayıp index sayfasına datayı list olarak dönüyorum.

MVC de Grid Kontrolü Kullanımı Home Controller data tanımı

return View(db.Products.ToList());

Bu kod ile datayı List tipine çevirip ilgili viewe gönderiyorum. Bizim viewimizi açıyoruz. Bunun için şu yolu izliyoruz Views > Home > Index.cshtml ve dosyayı açtıktan sonra içini aşağıdaki gibi düzenliyoruz.

MVC de Grid Kontrolü Kullanımı Grid kütüphanesi yüklenmemiş ve tanımlanmamış

Görüldüğü üzere Grid özelliğini kullanamıyoruz. Bunun nedeni Grid kütüphanesinin WebFormdaki gibi tanımlı gelmemesidir. Gridi tanımlayabilmek için Nuget in Package Manager Console açıp aşağıdaki kodu yazmamız gerekmekte.

Install-Package Grid.Mvc -Version 3.0.0 

Bunu yaptıktan sonra index.cshtml deki kodumuzu aşağıdaki gibi düzenliyoruz. Kodumuzun son hali aşağıdaki gibi oluyor.

@using GridMvc.Html
@model List<WebApplication1.Models.Product>
@{
    ViewBag.Title = "Home Page";
}


<div class="jumbotron">

<h1>MVC de Grid Kullanımı</h1>

</div>


<div class="row">

<div class="container">

<h2>Ürünler</h2>

        @Html.Grid(Model).AutoGenerateColumns()
    </div>

</div>

Projemizi ayağa kaldırdığımızda gridimiz bizi karşılıyor olacak. Gride sayfamıza gönderdiğimiz modeli verip AutoGenerateColumns ile tablomuzun tüm alanlarını sayfamıza basmış oluyoruz. Gridi kullanabilmek için tabi ki sayfanın başına grid kütüphanesini using ile dahil ediyoruz. Gridin diğer özelliklerinden diğer yazımda devam ediyor olacağım. Diğer yazımda görüşünceye kadar bugsız kodlamalar dileğiyle.

Share

You may also like...

Bir cevap yazın

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