۱۳۹۱/۰۲/۱۰

CheckBoxList در ASP.NET MVC


ASP.NET MVC به همراه HtmlHelper توكاري جهت نمايش يك ChekBoxList نيست؛ اما سيستم Model binder آن، اين نوع كنترل‌ها را به خوبي پشتيباني مي‌كند. براي مثال، يك پروژه جديد خالي ASP.NET MVC را آغاز كنيد. سپس يك كنترلر Home جديد را نيز به آن اضافه كنيد. در ادامه، براي متد Index آن، يك View خالي را ايجاد نمائيد. سپس محتواي اين View را به نحو زير تغيير دهيد:
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
@using (Html.BeginForm())
{
    <input type='checkbox' name='Result' value='value1' />
    <input type='checkbox' name='Result' value='value2' />
    <input type='checkbox' name='Result' value='value3' />
    <input type="submit" value="submit" />
}

و كنترلر Home را نيز مطابق كدهاي زير ويرايش كنيد:
using System.Web.Mvc;

namespace MvcApplication21.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(string[] result)
        {
            return View();
        }
    }
}

يك breakpoint را در تابع Index دوم كه آرايه‌اي را دريافت مي‌كند، قرار دهيد. سپس برنامه را اجرا كرده، تعدادي از checkboxها را انتخاب و فرم نمايش داده شده را به سرور ارسال كنيد:


بله. همانطور كه ملاحظه مي‌كنيد، تمام عناصر ارسالي انتخاب شده كه داراي نامي مشابه بوده‌اند، به يك آرايه قابل بايند هستند و سيستم model binder مي‌داند كه چگونه بايد اين اطلاعات را دريافت و پردازش كند.
از اين مقدمه مي‌توان به عنوان پايه و اساس نوشتن يك HtmlHelper سفارشي CheckBoxList استفاده كرد.
براي اين منظور يك پوشه جديد را به نام app_code، به ريشه پروژه اضافه نمائيد. سپس يك فايل خالي را به نام Helpers.cshtml نيز به آن اضافه كنيد. محتواي اين فايل را به نحو زير تغيير دهيد:

@helper CheckBoxList(string name, List<System.Web.Mvc.SelectListItem> items)
    {
    <div class="checkboxList">
        @foreach (var item in items)
        {
            @item.Text
            <input type="checkbox" name="@name"
                   value="@item.Value"
                   @if (item.Selected) { <text>checked="checked"</text> }
               />
            < br />
        }
    </div>
}

و براي استفاده از آن، كنترلر Home را مطابق كدهاي زير ويرايش كنيد:

using System.Collections.Generic;
using System.Web.Mvc;

namespace MvcApplication21.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            ViewBag.Tags = new List<SelectListItem>
            {
                new SelectListItem { Text = "Item1", Value = "Val1", Selected = false },
                new SelectListItem { Text = "Item2", Value = "Val2", Selected = false },
                new SelectListItem { Text = "Item3", Value = "Val3", Selected = true }
            };
            return View();
        }

        [HttpPost]
        public ActionResult GetTags(string[] tags)
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(string[] result)
        {
            return View();
        }
    }
}

و در اين حالت View برنامه به شكل زير درخواهد آمد:
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
@using (Html.BeginForm())
{
    
    <input type='checkbox' name='Result' value='value1' />
    <input type='checkbox' name='Result' value='value2' />
    <input type='checkbox' name='Result' value='value3' />
    <input type="submit" value="submit" />
}

@using (Html.BeginForm(actionName: "GetTags", controllerName: "Home"))
{
    @Helpers.CheckBoxList("Tags", (List<SelectListItem>)ViewBag.Tags)    
    <input type="submit" value="submit" />
}

با توجه به اينكه كدهاي Razor قرار گرفته در پوشه خاص app_code در ريشه سايت، به صورت خودكار در حين اجراي برنامه كامپايل مي‌شوند، متد Helpers.CheckBoxList در تمام Viewهاي برنامه در دسترس خواهد بود. در اين متد، يك نام و ليستي از SelectListItemها دريافت مي‌گردد. سپس به صورت خودكار يك CheckboxList را توليد خواهد كرد. براي دريافت مقادير ارسالي آن به سرور هم بايد مطابق متد GetTags تعريف شده در كنترلر Home عمل كرد. در اينجا Value عناصر انتخابي به صورت آرايه‌اي از رشته‌ها در دسترس خواهد بود.

روشي جامع‌تر
در آدرس زير مي‌توانيد يك HtmlHelper بسيار جامع را جهت توليد CheckBoxList در ASP.NET MVC بيابيد. در همان صفحه روش استفاده از آن، به همراه چندين مثال ارائه شده است:
https://github.com/devnoob/MVC3-Html.CheckBoxList-custom-extension