آموزش ایجاد ChechBox با HtmlHelper در ASP.Net MVC

آموزش ایجاد کادر انتخابی ChechBox با HtmlHelper در ASP.Net MVC :

در این درس به آموزش نحوه ایجاد یک کادر انتخابی (کنترل CheckBox) با استفاده از کلاس HtmlHelper در صفحات ASP.Net MVC Razor پرداخته ایم.
کلاس HtmlChe دارای دو متد ویژه جهت تولید یک کادر متن انتخابی یا Checkbox با کد <input type=”checkbox”> در یک ASP.Net Razor View می باشد :

• متد ()CheckBox
• متد ()CheckBoxFor

در کد مثال عملی زیر، در مدل Student Model نحوه کاربرد متدهای ()CheckBox و ()CheckBoxFor را نشان داده ایم :

public class Student
{
    public int StudentId { get; set; }
    [Display(Name="Name")]
    public string StudentName { get; set; }
    public int Age { get; set; }
    public bool isNewlyEnrolled { get; set; }
    public string Password { get; set; }
} 

آموزش متد ()CheckBox در ASP.Net MVC :

متد html.()CheckBox یک متد loosely typed (بدون التزام به رعایت نوع داده ای در متغیرها) است و یک المنت <input type=”checkbox”> را با name، خاصیت Boolean تیک خورده یا معمولی با نام is Checked و خواص html مربوطه بر روی صفحه تولید می کند. این کد در صفحات html باعث نمایش یا کادر انتخابی Checkbox می شود.
ساختار کلی استفاده از این متد به صورت زیر است :

MvcHtmlString CheckBox(string name, bool isChecked, object htmlAttributes)

تابع ()CheckBox دارای حالت های مختلف فراخوانی بر حسب پارامترهای ارسالی overload است که برای دریافت لیست کامل آن ها به سایت MSDN رجوع نمایید. کد عملی زیر نحوه ایجاد یک کادر متن CheckBox را نشان داده است :

@Html.CheckBox("isNewlyEnrolled", true)

                        
<input checked="checked"
       id="isNewlyEnrolled"
       name="isNewlyEnrolled"
       type="checkbox"
       value="true" />

در کد مثال فوق، پارامتر اول خاصیت “is NewlyEnrolled” متعلق به کلاس Student Model است که به عنوان id و name کنترل checkbox به کار خواهد رفت. پارامتر دوم نیز یک متغیر Boolean بوده که تعیین می کند آیا کادر انتخابی در ابتدا علامت خورده باشد یا خیر.

آموزش کار با متد ()CheckBoxFor :

متد ()CheckBoxFor یک متد Strongly Typed (ملتزم به رعایت نوع داده ای متغیرها) است که با استفاده از یک lambada expression یک کنترل کادر انتخابی را برای خاصیت تعیین شده Model توبید می کند. متد ()CheckBoxFor خاصیت تعیین شده در شی مدل (object Model) را به المنت کادر متن متصل می کند. بنابراین مقدار این خاصیت را در کادر انتخابی نمایش داده و یا مقدار کادر انتخابی را به خاصیت منتقل می کند.
ساختار کلی استفاده از متد ()CheckBoxFor به صورت زیر است :

MvcHtmlString CheckBoxFor(<expression<func<tmodel,tvalue>> expression, object htmlAttributes)

برای مشاهده لیست کامل overload های این متد می توانید به سایت MSDN رجوع نمایید. در کد مثال عملی زیر، نحوه استفاده از متد ()CheckBoxFor نشان داده شده است :

@model Student
@Html.CheckBoxFor(m => m.isNewlyEnrolled)

input data-val="true" 
        data-val-required="The isNewlyEnrolled field is required." 
        id="isNewlyEnrolled" 
        name="isNewlyEnrolled" 
        type="checkbox" 
        value="true" />
<input name="isNewlyEnrolled" type="hidden" value="false" />

در کد مثال فوق، پارامتر اول تابع ()CheckBoxFor یک lambada expression بوده که خاصیت model ای که می خواهیم به المنت checkbox متصل شود را تعیین می کند. در کد فوق، خاصیت is NewlyEnrolled را تعیین کرده ایم، بنابراین متد یک کنترل کادر انتخابی <input type=”checkbox”> را با id و name برابر با نام آن خاصیت را تولید می کند. خاصیت value کادر checkbox نیز معادل خاصیت isNewlyEnrolled تنظیم می شود.
اگر به کد مثال فوق دقت کنید، متوجه می شوید که برنامه یک hidden field هم نام با checkbox و با مقدار value=false را نیز تولید کرده است. این مسئله به این دلیل است که مقدار یک کنترل checkbox در صورتی که فقط علامت خورده باشد (checked)، در هنگام submit فرم به سرور ارسال می شود. بنابراین، هنگامی که checkbox علامت نخورده باشد، پس از submit فرم، هیچ مقداری به سرور ارسال نمی شود، در حالی که در بیشتر موارد می خواهید به جای null، مقدار false ارسال شود.
به دلیل این که hidden field تولید شده، هم نام با کنترل checkbox است، حتی در صورتی که checkbox را علامت نزده و فرم را به سرور ارسال کنید، مقدار value=false به جای null پیش فرض، ارسال خواهد شد.