Asp.Net Mvc CheckBoxList Kullanımı

Asp.Net Mvc Çağrı ŞİŞMAN 6.12.2015

Merhaba,

Mvc projeleri içinde kullandığımız HtmlHelper içerisinde CheckBoxList kontrolü bulunmamakta. Bu nedenle CheckBoxList için oluşturmak için Custom bir helper yazabiliriz. Bununla ilgili bir efor sarfetmek istemiyorsanız tam da bu işi görecek bir kütüphane Nuget Package Manager içerisinde mevcut. MvcCheckBoxList kütüphanesi.

Kütüphaneyi Nuget Package Manager ile indirebilirsiniz.

Bir ürün ve bu ürüne bağlı kategorilerimiz olduğunu varsayarak bü ürünün güncelleme senaryosunu gerçekleştirdiğimizi varsayalım. Bu senaryoya bağlı olarak aşağıdaki gibi bir basit bir modelimiz olsun.

public class ProductViewModel
{
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public List<Category> AvailableCategories { get; set; }
        public List<Category> SelectedCategories { get; set; }
        public int[] Ids { get; set; }
}

Bu modelde bazı property'ler CheckBoxList için tanımlandı.

AvailableCategories: Ürün eklerken seçebileceğimiz muhtemel kategoriler

SelectedCategories: Ürünün daha önce eklenmiş kategorileri. Eğer bir ürün yeni eklenecekse bu özellik boş olacaktır.

Ids: Post ederken seçtiğimiz kategorilerin Id değerleri. Bu string de olabilirdi. Nasıl tanımladığınıza bağlı.

İşlemi yapacağımız Controller ve View aşağıdaki gibidir.

public ActionResult Create()
{

    var availableCategories = new List<Category>
    {

        new Category{Id=1,CategoryName="Beverages"},
        new Category{Id=2,CategoryName="Fruits"},
        new Category{Id=3,CategoryName="Liquids"},
        new Category{Id=4,CategoryName="Shoes"}

    };

    var selectedCategories = new List<Category>
    {
        new Category{Id=2,CategoryName="Fruits"},
        new Category{Id=3,CategoryName="Liquids"}

    };

    var model = new ProductViewModel
    {
        AvailableCategories=availableCategories,
        SelectedCategories=selectedCategories

    };


    return View(model);
}
@model CheckBoxListSample.Models.ProductViewModel
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

<div class="table-responsive">
    @using (Html.BeginForm("Create", "Product", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
                    
        <div class="form-group">
            <label>Product Name:</label>
            @Html.TextBoxFor(x => x.ProductName, new { @class = "form-control" })

        </div>
        <div class="form-group">
            <label>Unit Price:</label>
            @Html.TextBoxFor(x => x.UnitPrice, new { @class = "form-control" })

        </div>
        <div class="form-group">
            <label>Kategoriler:</label>
            @Html.CheckBoxListFor(model => model.Ids,
                                  model => model.AvailableCategories,
                                  model => model.Id,
                                  model => model.CategoryName,
                                  model => model.SelectedCategories,
                                  Position.Horizontal)


        </div>
        
        <p>
            <input type="submit" value="Kaydet" />
        </p>
    }
</div>

Controller'a istekte bulunduğumuzda elde edeceğimiz sayfa aşağıdaki gibi olacaktır.

2 ve 3 Id'li kategoriler SelectedCategories olarak verildiği için seçili bir şekilde karşımıza geldi. Beverages ve Shoes kategorilerini seçip sayfayı Post edersek Ids property'sine seçili kategorilerin Id değerleri atanacaktır. Post ettiğimiz modelin değerlerine bakacak olursak,

 

Ids özelliğine seçtiğimiz kategorilerin Id değerlerinin atandığını görebiliriz.

Sağlıcakla kalın. İyi çalışmalar.


Etiketler: Asp.Net MVC