Telerik MVC Extensions

Yazılım geliştiricilerin en çok ihtiyaç duyduğu bileşenlerden biride yetenekli ön yüz (özellikle grid) bileşenleridir. MVC uygulamalarınızda kullanabileceğiniz open source bir çözüm var: Telerik MVC Extensions

Telerik MVC 3 için mevcut kontrol kütüphanesine extension yazıdı ve bunu open source olarak paylaştı. TelerikMVCExtensions projesini NuGet ile kendi MVC projenizde kullanabilirsiniz. (NuGet ile bir çok open source uygulamayı kendi projenize ekleyebilirsiniz. NuGet’i nasıl kurucağınızı ve kullanacağınızı buradan öğrenebilirsiniz.)

Telerik MVC Extensions paket referansını kendi projenize ekledikten sonra gelişmiş grid özelliklerini inceleyelim. Ajax çağrıları ile grid üzerinde CRUD işlemleri nasıl yapılır?

Öncelikle gridi sayfamıza ekleyelim.

[cs]

@using  Telerik.Web.Mvc.UI  
@(  Html.Telerik().Grid()         
 .Name("Grid" )         
 .DataKeys(keys =>         
 {             
  keys.Add(p => p.LinkCategoryId);         
 })         
 .ToolBar(commands =>             
  commands.Insert().ButtonType(GridButtonType .ImageAndText)                 
   .ImageHtmlAttributes(new  { style = "margin-left:0"  }))         
 .DataBinding(dataBinding =>{             
  dataBinding.Ajax()                 
   .Select("_SelectAjaxEditing","LinkCategory")                 
   .Insert("_InsertAjaxEditing","LinkCategory" )                 
   .Update("_SaveAjaxEditing" , "LinkCategory" )                 
   .Delete("_DeleteAjaxEditing" , "LinkCategory" );         
 })         
 .Columns(columns =>{             
  columns.Bound(p => p.Title).Width(210);             
  columns.Bound(p => p.Url).Width(210);             
  columns.Bound(p => p.Description).Width(130);             
  columns.Command(commands =>{                 
   commands.Edit().ButtonType(GridButtonType .ImageAndText);                 
   commands.Delete().ButtonType(GridButtonType .ImageAndText);             
  }).Width(180).Title("Commands" );         
 })         
 .Editable(editing => editing.Mode(GridEditMode .PopUp))         
 .Pageable()         
 .Scrollable()         
 .Sortable())

Yukarıdaki kod bloğunda bir Telerik MVC gridin kullanıldığını görüyoruz. Satır satır inceleyerek kodun ne yaptığına bakalım

• Gridin öncelikle bir veri tipi ile birlikte oluşturuyoruz:  @Html.Telerik().Grid<LinkCategory>() burada giridin LinkCategory veri yapısı ile birlikte çalışaçağını bildiriyoruz.
• Daha sonra veri yapımızda ki anahtar alanı tanımlıyoruz: .DataKey( keys => keys.Add(..))
• Toolbar üzerine Insert Command ekliyoruz:  .Toolbar( commands=> commands.Insert()…)
• Daha sonrada gridin veri bağlama işlemlerini nasıl yapacağını yani grid ile Controller sınıf arasında ki bağlantıyı belirtiyoruz: .DataBinding(dataBinding.Ajax().Select(…).Insert(…)…. ) Databinding mekanizması olarak Ajax() kullanılacak ve her bir CRUD işlemi için çağırılacak Controller ve Action belirtiliyor: .Select(“SelectAjaxEditing”, “LinkCategory”)
• Tüm kolonların nasıl gözükmesi gerektiğini söylüyoruz: .Columns( columns=> columns.Bound(…)) (standart gridden gelen DataAnnotation desteği devam ediyor)
• Command butonları ekliyoruz: columns.Command(….)
• Gridi edit moduna ceviriyoruz: .Editable(…)
• Ekstra özellikleri ekliyoruz: .Pageable().Scrollable().Sortable()

Gridin çalışması için gerekli MVC Controller sınıfınada göz atalım:

[cs]

using  Telerik.Web.Mvc; 
namespace  RoC.Modules.Admin.Controllers{     
 public  class  LinkCategoryController:Controller{         
  [Import]private  AdminContext  _adminContext;         
  
  [GridAction] 
  public ActionResult CategoriesManage()        
  {             
   return  View ();         
  }         
  
  [GridAction ]         
  public  ActionResult  _SelectAjaxEditing()         
  {             
   return  View (new  GridModel (_adminContext.Links));         
  }         
  
  [HttpPost ]         
  [GridAction ]         
  public  ActionResult  _SaveAjaxEditing(int  id)         
  {             
   .....             
   return View(new GridModel(_adminContext.LinkCategories));         
  }         

  [HttpPost ]         
  [GridAction ]         
  public  ActionResult  _InsertAjaxEditing () {             
   ....             
   return View(new GridModel(_adminContext.LinkCategories));         
  }         

  [HttpPost ]         
  [GridAction ]         
  public  ActionResult  _DeleteAjaxEditing (int  id)  {            
   ...             
   return  View (new  GridModel (_adminContext .LinkCategories ));         
  }     
 } 
}

Yukarıdaki kod bloğunuda inceleyelim:

• CategoriesManage()  fonskiyonu sadece view dönmektedir. Çünkü veriler gridin select fonksiyonu ile doldurulacaktır.
• Alt çizgi ile başlattığımız tüm grid fonksiyonları [GridAction] niteliğine sahiptir. Grid fonksiyonları kendilerine ait veri tabanı işlemini yaptıkdan sonra veriyi GridModel tipinde döndürmektedir.

Tüm bu kütüphaneyi kullanmak için master.page/_layout.cshtml içinde eklemeniz gereken kodlar vardır.

[cs]

@(Html.Telerik().StyleSheetRegistrar()   
 .DefaultGroup(group => 
  group.Add("telerik.common.min.css" )   
   .Add( Html.GetCurrentTheme()+"/"+"telerik.min.css")   
   .Add("telerik.rtl.min.css" )                             
   .Combined(true )                             
   .Compress(true )) )  
@Html.Telerik().ScriptRegistrar()

Yukarıdaki kod bloğu ile Telerik kontrollerinin kullandığı Css ve javascript dosyaları sayfaya eklenmektedir.

Böylelikle tüm CRUD işlemlerini destekleyen bir grid ekranı elde etmiş olduk.

Sonuç

Telerik firmasının standart MVC kontrolerini genişleterek oluşturduğu TelereikMVCExtension paketi MVC uygulamaları ile gerçeken güzel ve yetenekli arayüzler oluşturmanıza yardımcı olaracaktır. Bileşenleri buradan indirebilir. Daha ayrıntılı örneklere buradan erişebilirsiniz.