آموزش ایجاد دکمه رادیویی RadioButton با HtmlHelper در MVC

آموزش ایجاد دکمه رادیویی RadioButton با HtmlHelper در MVC ASP.Net:

در این درس به آموزش نحوه ایجاد دکمه های رادیویی RadioButton با استفاده از کلاس HtmlHelper در Razor View چهارچوب کاری ASP.Net MVC خواهیم پرداخت.
کلاس HtmlHelper دارای دو متد ویژه برای ایجاد یک دکمه رادیویی با تگ <input type=”radio”> به صورت زیر است :

• متد RadioButton
• متد ()RadioButtonFor

در کد مثال عملی زیر، نحوه استفاده هر دو تابع را در کلاس Student Model آموزش خواهیم داد :

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

آموزش کار با متد RadioButton :

متد RadioButton یک دکمه رادیویی را با name تعیین شده، حالت انتخاب شده پیش فرض (isChecked Boolean) و خواص html مرتبط با ساختار کلی زیر تولید می کند :

MvcHtmlString RadioButton(string name, object value, bool isChecked, object htmlAttributes) 

متد ()RadioButton دارای حالت های مختلف فراخوانی با پارامترهای گوناگون (overload) است که برای دریافت اطلاعات کامل راجع به انواع آن ها می توانید با سایت MSDN مراجعه نمایید.
در کد مثال عملی زیر، دو دکمه رادیویی هم نام و با مقادیر مختلف را بر روی صفحه ایجاد کرده ایم :

Male:   @Html.RadioButton("Gender","Male")  
Female: @Html.RadioButton("Gender","Female")

Male: <input checked="checked"
             id="Gender"
             name="Gender"
             type="radio"
             value="Male" />

Female: <input id="Gender"
               name="Gender"
               type="radio"
               value="Female" />

در کد مثال عملی فوق، دو دکمه رادیویی (RadioButton) را برای خاصیت “Gender” مدل student تولید کرده ایم. پارامتر اول تعیین کننده نام (name) دکمه رادیویی بوده و پارامتر دوم تعیین کننده مقدار (value) آن است که در هنگام ثبت فرم، مقدار کنترلی که علامت خورده است، به سرور ارسال خواهد شد.
برای مثال، اگر دکمه رادیویی “Male” علامت خورده باشد، مقدار رشته ای یا string معادل “Male” به سرور ارسال شده و در خاصیت Gender قرار می گیرد. نمای خروجی کد مثال فوق در صفحه، به صورت زیر خواهد بود :

آموزش کار با متد ()RadioButtonFor در ASP.Net MVC :

متد کمکی ()RadioButtonFor یک تابع Strongly Typed (مقید به رعایت نوع داده ای پارامترهای ارسالی) بوده که با استفاده از یک lambada expression، یک دکمه رادیویی، تگ <input type=”radio”> را جهت خاصیت مورد نظر مدل، تولید می کند.
متد ()RadioButtonFor خاصیت مورد نظر شی مدل (model object) را به کنترل رادیویی متصل می کند. بنابراین، به صورت اتوماتیک و بر حسب مقدار property value، دکمه رادیویی را به صورت پیش فرض علامت خورده (checked) و یا علامت نخورده نشان می دهد. همچنین در صورت تغییر مقدار کنترل رادیویی، value جدید آن را به خاصیت شی انتقال خواهد داد.

ساختار کلی استفاده از متد ()RadiButtonFor به صورت زیر است :

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

در کد مثال عملی زیر، دو کنترل رادیویی را با استفاده از متد ()RadioButtonFor ایجاد کرده ایم :

@model Student
@Html.RadioButtonFor(m => m.Gender,"Male")
@Html.RadioButtonFor(m => m.Gender,"Female")

<input checked="checked"
      id="Gender"
      name="Gender"
      type="radio"
      value="Male" />

<input id="Gender"
       name="Gender"
       type="radio"
       value="Female" /> 

در کد مثال فوق، پارامتر اول تابع ()RadioButtonFor یک lambada expression است که خاصیت مدل (model property) مورد نظر، جهت اتصال به کنترل رادیویی را تعیین می کند. در کد فوق، دو دکمه رادیویی RadioButton هم نام را برای خاصیت “Gender” مدل تولید کرده، که به هم مرتبط هستند و با انتخاب یکی، دکمه دیگر از انتخاب خارج خواهد شد و برعکس. کد این دو دکمه <input type=”Radio”> بوده مکه name و id آن ها برابر با نام خاصیت مدل، یعنی “Gender” است. همچنین پارامتر دوم یک مقدار (value) را تعیین کرده که در صورت انتخاب هر کدام از دکمه های رادیویی و ارسال فرم به سرور، این مقدار هم به سرور فرستاده می شوند.