MVC Webgrid Nesnesnin Kullanımı

MVC de ASP.NET Webformsta kullanılan Gridview tarzı nesneler yoktur. Peki Gridview yoksa ne yapacağız. İşte bu durumda Webgrid nesnesi imdada yetişir. Peki şimdi PersonelDB isimli bir veritabanı ve PersonelBilgi simli bir tablo oluşturalım.Tablomuz;

Bu veritabanına ait modelimizi oluşturalım.  HomeController isimli bir Controller oluşturup şöyle kodlayalım.

public class HomeController : Controller
    {
        PersonelDBEntities veri=new PersonelDBEntities();
        public ActionResult Index()
        {
           return View(veri.PersonelBilgi.ToList());
        }
   }

İndex viewimizi oluşturup burada Webgridi kullanalım.

@model IEnumerable<webgrid.Models.PersonelBilgi>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @{
        var grid = new WebGrid(Model);
        @grid.GetHtml();
    }
 </body>
</html>

Ve projeyi test ediniz sonuç.

Sayfalama işleminin gerçekleştiği ve verilerin geldiğini görebilirsiniz. Peki sayfalama sayısına, AdSoyad alanına göre sıralama ve İstenilen kolonların görüntülenmesini istersek;

  @{
     var grid = new WebGrid(Model, defaultSort: "AdSoyad", rowsPerPage: 8);
     @grid.GetHtml(
     columns: grid.Columns(
     grid.Column("ID", "Kimlik"),
     grid.Column("SicilNo", "Sicil Numarası"),
     grid.Column("Adsoyad", "Adı Soyadı"),
     grid.Column("Adres", "Adres"),
     grid.Column("Maas", "Maaş")));
    }

Webgridin Pager özelliğini kullanalım;

 @{
    var grid = new WebGrid(Model,defaultSort: "AdSoyad", rowsPerPage: 8);
    @grid.Pager(WebGridPagerModes.All, "İlk Sayfa", "Önceki Sayfa", "Sonraki Sayfa", "Son Sayfa");
    @grid.GetHtml(
     columns: grid.Columns(
     grid.Column("ID", "Kimlik"),
     grid.Column("SicilNo", "Sicil Numarası"),
     grid.Column("Adsoyad", "Adı Soyadı"),
     grid.Column("Adres", "Adres"),
     grid.Column("Maas", "Maaş")));
    }

Çalıştırp test ediniz.Şimdide Webgriddeki kayıt sayısını gösterelim.

@{
    var grid = new WebGrid(Model,defaultSort: "AdSoyad", rowsPerPage: 8);
    @grid.Pager(WebGridPagerModes.All, "İlk Sayfa", "Önceki Sayfa", "Sonraki Sayfa", "Son Sayfa",5);
    @grid.GetHtml(
     columns: grid.Columns(
     grid.Column("ID", "Kimlik"),
     grid.Column("SicilNo", "Sicil Numarası"),
     grid.Column("Adsoyad", "Adı Soyadı"),
     grid.Column("Adres", "Adres"),
     grid.Column("Maas", "Maaş")));
    }
    <br />
    @Html.Label("topla", "Kayıt Sayısı :" + grid.Rows.Count.ToString()

Peki şimdide boostrap ve CSS kullanarak biraz görüntüyü değiştirelim.

CSS şu şekilde hazırlayın.

.webgrid-table td, th {
        border: 1px solid #98BF21;
        padding: 3px 7px 2px;
    }

.webgrid-header {
    background: #1c9b70 !important;
    color: #FFFFFF;
    padding-bottom: 4px;
    padding-top: 5px;
    text-align: left;
}

.webgrid-footer {
    padding: 6px 5px;
    text-align: center;
    background-color: #e8eef4;
    border-top: 2px solid #3966A2;
    height: 30px;
    border-bottom: 2px solid #D6E8FF;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
}

.webgrid-row-style {
    padding: 3px 7px 2px;
}

.webgrid-alternating-row {
    background-color: #EAF2D3;
    padding: 3px 7px 2px;
}
Yukarıdaki  CSS i Head bölümünde wgrid.css dosyası olarak tanımladım ve bootrap.css de ekledim.
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/wgrid.css" rel="stylesheet" />

Webgride bu CSS i tanımlayalım. 

@{
        var grid = new WebGrid(Model, defaultSort: "AdSoyad", rowsPerPage: 5);
        @grid.GetHtml(
          tableStyle: "table table-bordered",
          headerStyle: "webgrid-header",
          footerStyle: "webgrid-footer",
          alternatingRowStyle: "webgrid-alternating-row",
          selectedRowStyle: "webgrid-selected-row",
          rowStyle: "webgrid-row-style",
          columns: grid.Columns(
              grid.Column("ID", "Kimlik"),
              grid.Column("SicilNo", "Sicil Numarası"),
              grid.Column("Adsoyad", "Adı Soyadı"),
              grid.Column("Adres", "Adres"),
              grid.Column("Maas", "Maaş")))
    }

Ve sonuç;



Etiketler
GridView WebGrid Pager Css
Mesaj Yaz