15 Ağustos 2013 Perşembe

Asp.net MVC CheckBoxList(Helper) Kullanimi


Merhaba,

Bildiğiniz gibi asp.net mvc'nin etkili ve geliştirme sürecini kısaltan özelliklerinden birisi de, textbox, label, dropdownlist vs gibi html komponentlerini kolayca oluşturmamızı sağlayan geniş html helper kütüphanesi. Fakat çoklu seçim işlevselliğini sağlayan "CheckBoxList" komponenti için, html helper kütüphanesinde herhangi yardımcı genişletme metodunun varlığı söz konusu değil. Bu problemi çözmek için yazılımcılar olarak kolları sıvayıp view üzeride razor'un da yardımıyla döngüye girip istenen html çıktısını elde edebiliriz:

// kaynak : http://stackoverflow.com/questions/16600820/display-checkbox-list-in-asp-net-mvc
// model
public class Address
{
   public int addressID { get; set; }
   public string address { get; set; }
   public bool AddreChecked { get; set; }
}

// view
@foreach (var item in Model.Addresses)
{
    @Html.CheckBox("checkboxGroup", item.AddreChecked); @item.address
}
Proje büyüdükçe yönetilebilirlik adına ve kod tekrarı(DRY) olmaması açısından bu çözümün yeterli olmadığı açık. Yine bu yaklaşım layout yapılandırma(yatay/diket), form post edildiğinde seçili değerlerin controller'a aktarılması gibi çeşitli isteklere de yanıt veremiyor. Neyseki bu "MvcCheckBoxList" adlı kütüphane bu sorunların hepsine cevap verebilir nitelikte. "Install-Package MvcCheckBoxList" komutuyla nuget üzerinden kütüphaneyi projenize dahil edebilirsiniz. Basit bir senaryo üzerinden giderek " MvcCheckBoxList" kütüphanesini kullanalım:

"bir projenin yetkilendirme modülü için, rol ekleme paneli yapıyorsunuz ve bu işlem sırasında eklenecek rol kapsamındaki kurallar için de ilişkilendirme yapmalısınız. Rol ve kural arasında çoktan çoğa bir ilişki söz konusu olduğundan çoklu seçim için  CheckBoxList komponentini kullanmamız gerekli"

İşe önce söz konusu varlıkların model sınıflarını oluşturarak başlayalım:
namespace usingCheckBoxList.Models {

    public class Role {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    public class Rule {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
    }
}
Rol ekleme sayfası için kullanıcak olan ViewModel sınıfı:
using System.Collections.Generic;

namespace usingCheckBoxList.Models {

    public class CreateRoleViewModel {
        public Role Role { get; set; }
        public List Rules { get; set; }
        public List SelectedRules { get; set; }
        public List PostedRuleIDs { get; set; }
    }
}
Rol yönetimi için gerekli controller sınıfı:
using System.Collections.Generic;
using System.Web.Mvc;
using usingCheckBoxList.Models;

namespace usingCheckBoxList.Controllers {

    public class RoleController : Controller {

        public ActionResult Create() {

            var rules = new List {
                    new Rule {
                            Id = 1,
                            Name = "create",
                        }, new Rule {
                            Id = 2,
                            Name = "read",
                        }, new Rule {
                            Id = 3,
                            Name = "update",
                        }, new Rule {
                            Id = 4,
                            Name = "delete",
                        }
                };

            return View( new CreateRoleViewModel { Rules = rules} );
        }

        [HttpPost]
        public ActionResult Create(CreateRoleViewModel model) {
            // gerekli veritabani islemleri ve yonlendirme yapılır
            return View();
        }
    }
}
Örneğin sade kalması adına view'a modeli geçiriken CreateRoleViewModel sınıfının SelectedRules üye değişkenine atama yapmadım, bu sebepten sayfa yüklendiğinde tüm kurallar seçilmemiş olarak görüntülenecek fakat bu opsiyonun güncelleme gibi durumlar için faydalı olacağı aşikar.

Rol ekleme arayüzü(view):
@model usingCheckBoxList.Models.CreateRoleViewModel

Rol Ekle

@foreach (var item in Model.Rules) { @Html.CheckBox("xx"); @item.Name } @using (Html.BeginForm()) { @:Ad @Html.TextBoxFor(m => m.Role.Name) @:İçerdiği Kurallar @Html.CheckBoxListFor(x => x.PostedRuleIDs, //form post edildiginde secilen ogelerin value'larini tutar x => x.Rules, // kontrol listesi icin veri saglar x => x.Id, // rule.id x => x.Name, // rule.name x => x.SelectedRules) // secili olarak yuklenmesi istenen ogeleri tutar }
MvcCheckBoxList kütüphanesinin kullanımı için gerekli yapı hazır olduğuna göre uygulamayı çalıştırıp testimizi yapabiliriz:


Görüldüğü üzere rolle ilişkilendirilmesi muhtemel kuralları CheckBoxList ile listeledik, gerekli bilgileri girip kaydet butonuna tıklayıp formu post ederek controller tarafındaki breakpoint'e düşüyoruz:

Ekleme sayfasında seçtiğimiz kuralların id'leri istediğimiz gibi ViewModel üzerinden controller'a taşınmış, bu durumda artık bize düşen klasik crud işlemlerini yapmak.

Mvc CheckBoxList kütühanesinin pek çok özelliği ve kullanım şekli mevcut, ayrıntılar için buraya tıklayabilirsiniz. Yine konuyla alakadar şu post'a bakmanızda fayda var.

Bir sonraki blog girdisinde buluşuncaya değin, esen kalın.