Asp.Net
27
Ağu
2011
Asp.Net Razor WebGrid
Kategori : Asp.NetRazorGeneric
Ekleyen : Zekeriya ALAN
Selamlar, Değerli arkadaşlar bugün değineceğim konu: " Asp.Net Razor WebGrid " Kısaca WebGrid, Klasik Asp.Net'te kullandığımız GridView in Razor daki isimlendirmesidir ve isimlere takılmanın bir anlamı yok yapılan iş aynıdır. Öncelikle Grid'imize dolduracağımız verileri oluşturan sınıfı yazıyoruz. Veritabanı kullanmadığım için verileri Oluşturduğum sınıf içinde " Generic List Kolleksiyonunda " tanımlıyorum.
Ogrenciler sınıfı.
   1:  public class Ogrenciler
   2:  {
   3:      public int Id { get; set; }
   4:      public string Adi { get; set; }
   5:      public string Soyadi { get; set; }
   6:      public string Aciklama { get; set; }
   7:  }
   8:   
   9:  //ÖgrenciGetir Sınıfı
  10:  public static class OgrenciGetir
  11:  {    
  12:      //ÖgrenciListesi Metodumuz. Ögrenci Listesi geri döndürür.    
  13:      public static List<Ogrenciler> ogrenciListesi()
  14:      {
  15:          List<Ogrenciler> o = new List<Ogrenciler>()
  16:          {
  17:              new Ogrenciler(){ Id = 1, 
  18:                  Adi = "Emrah", 
  19:                  Soyadi = "Eliş", 
  20:                  Aciklama = "Değerli Hocamız :)" },
  21:              new Ogrenciler(){ Id = 2, 
  22:                  Adi = "Emre", 
  23:                  Soyadi = "Çağlar", 
  24:                  Aciklama = "Sevgili Kardeşim :)" },
  25:              new Ogrenciler(){ Id = 3, 
  26:                  Adi = "Fatmagül", 
  27:                  Soyadi = "Gül", 
  28:                  Aciklama = "Fatmagül'ün Suçu Ne?" }
  29:          };
  30:   
  31:          return o.ToList();
  32:      }
  33:  }
Yukarıdaki kodlama bir nevi bizim veritabanımız olarak görev yapacak.
Default.cshtml sayfamız.
   1:  @{ 
   2:      Layout = "~/_SiteLayout.cshtml";
   3:      Page.Title = "Asp.Net Razor WebGrid!";
   4:   
   5:      //List<Ogrenciler> query = OgrenciGetir.ogrenciListesi();
   6:   
   7:      var gridView = new WebGrid(OgrenciGetir.ogrenciListesi());
   8:      
   9:  }
  10:          <style type="text/css">
  11:              .th { padding:10px 20px 10px 20px;
  12:                    font-family:Trebuchet MS; 
  13:                    font-size:18px; 
  14:                    background:#f5f5f5; }
  15:                    
  16:              .td { padding:10px 20px; 
  17:                    font-size:14px; 
  18:                    text-align:left; }
  19:          </style>
  20:   
  21:  @gridView.Table(columns:
  22:                  gridView.Columns(
  23:                  gridView.Column("Id", "id", style: "td"),
  24:                  gridView.Column("Adi", "Ad", style: "td"),
  25:                  gridView.Column("Soyadi", "Soyad", style: "td"),
  26:                  gridView.Column("Aciklama", "Açıklama", style: "td")),
  27:                  alternatingRowStyle:"th",
  28:                  htmlAttributes: new { id = "gridView1" })
Yukarıda ne yaptığımıza gelince; Ogrencigetir sınıfımızdan dönen verileri generic list üzerine aldık. Daha sonra var gridView = new WebGrid(query); var anahtar kelimesi ile bir değişken oluşturduk bu değişkene sen aslında WebGrid'sin oyle davran dedik. WebGrid gridView = new WebGrid(query); bu şekilde de bir tanımlamada yapabilirdik, bundaki amacim var anahtar kelimesinden bahsetmekti " Var " anahtar kelimesi değişkenin tipini belirlemeden tanımlama yapmamıza izin veren C# 3.0 ile birlikte kullanmaya başladığımız bir keyword'tur.
new WebGrid(query); Generic kolleksiyon üstüne aldığımız data yı WebGrid'e cast ettik.
   1:  @gridView.Table(columns:
   2:                  gridView.Columns(
   3:                  gridView.Column("Id", "id", style: "td"),
   4:                  gridView.Column("Adi", "Ad", style: "td"),
   5:                  gridView.Column("Soyadi", "Soyad", style: "td"),
   6:                  gridView.Column("Aciklama", "Açıklama", style: "td")),
   7:                  alternatingRowStyle:"th",
   8:                  htmlAttributes: new { id = "gridView1" })
gridView.Column("Id", "id", style: "td"),
gridView.Column("KolonAdı", "Başlık", style: "Css Class adı")
alternatingRowStyle:"th"
bu kısımda grid in satır rengini değiştirmek için kullanıyoruz.(bir satır siyah, bir satır beyaz) şeklinde görünümünü zenginleştirmek için.
htmlAttributes: new { id = "gridView1" })
grid e id degeri veriyoruz. her hangi bir uygulamada örneğin: jQuery kullanacaksan id olmadan action kullanamayız.
Bir Makalenin daha sonuna geldik, Malum önümüz Bayram; Şimdiden Tüm " Türk Ulusunun " Ramazan Bayramını En içten Dileklerimle Kutlar, Sağlık ve Mutluluklar Dilerim. Hoşçakalın.
İlk yorum yazan siz olun.