[ASP.NET MVC] @Html.RadioButton() 、@Html.RadioButtonFor() 和 <input type="radio">

-

要產生單選的 <input type="radio"> 要使用 @Html.RadioButton()，而且至少要兩個引數：

  @Html.RadioButton("grade"               // 第一個引數做為 id 和 name
                     , 1)一年級<br />     // 第二個引數為 value
  @Html.RadioButton("grade"
                     , 2)二年級<br />         
  @Html.RadioButton("grade"
                     , 3)三年級<br />
  // 會產生：
  <input id="grade" name="grade" type="radio" value="1" />一年級<br />
  <input id="grade" name="grade" type="radio" value="2" />二年級<br />
  <input id="grade" name="grade" type="radio" value="3" />三年級<br />

同 name 下會算為同一個 group，所以不需要再帶 group 屬性。如果要指定哪個選項是預設點選的，使用第三個引數：

  @Html.RadioButton("grade"
                     , 1)一年級<br />
  @Html.RadioButton("grade"
                     , 2
                     , true)二年級<br />      // 第三個引數為是否 checked 的布林值
  @Html.RadioButton("grade"
                     , 3)三年級<br />
  // 會產生：
  <input id="grade" name="grade" type="radio" value="1" />一年級<br />
  <input checked="checked" id="grade" name="grade" type="radio" value="2" />二年級<br />
  <input id="grade" name="grade" type="radio" value="3" />三年級<br />

第三個引數也可以使用匿名類別帶入 HTML 屬性，增加樣式或事件，如果同時有是否 checked 和 HTML Attribute，要用四個引數：

  @Html.RadioButton("grade"
                     , 1
                     , new { onchange = "refreshGrid()" } )一年級<br />
  @Html.RadioButton("grade"
                     , 2
                     , true
                     , new { onchange = "refreshGrid()" } )二年級<br />
  @Html.RadioButton("grade"
                     , 3
                     , new { onchange = "refreshGrid()" } )三年級<br />
  // 會產生：
  <input id="grade" name="grade" onchange="refreshGrid()" type="radio" value="1" />一年級<br />
  <input checked="checked" id="grade" name="grade" onchange="refreshGrid()" type="radio" value="2" />二年級<br />
  <input id="grade" name="grade" onchange="refreshGrid()" type="radio" value="3" />三年級<br />

若是繫結了 Model 是有強型別的 RadioButtonFor() 方法可以使用，但其實和 RadioButton() 差不多要一個個列，但是強型別方法反而少了 isChecked 的引數，加上前面例子可以看到，給定 name 的同時還給了 id，造成 RadioButton() 方法產生的 <input type="radio> 的 id 全都一樣，不只 console 會有惱人的警告，若有需要取得 DOM 做一些操作，會有些困難。

如果將 RadioButton 的文字和 value 存下來，可以考慮使用 System.Web.Mvc 下的 SelectListItem 物件，有 Text、Value 和 Selected 屬性，則設計 Student 物件有 Status 和 StatusList：

  using System.Web.Mvc;

  public class Student
  {
    public string Status { get; set; }
    public List<SelectListItem> StatusList { get; set; }

    public Student()
    {
      StatusList = new List<SelectListItem>
      {
        new SelectListItem { Text = "在學", Value = "Inroll", Selected = true },
        new SelectListItem { Text = "延修", Value = "Deferral" },
        new SelectListItem { Text = "畢業", Value = "Graduate" },
        new SelectListItem { Text = "退學", Value = "Dropout" },
        new SelectListItem { Text = "死亡", Value = "Dead" }
      };
    }
  }

Controller 實體化 Student 後傳去 View 繫結：

  Student newStudent = new Student();
  return View(newStudent);

View 中遍歷 StatusList 將每一個 SelectListItem 的值取出，用 RadioButton() 產生：

  @model prjMvc.Models.Student

  @foreach(SelectListItem item in Model.StatusList)
  {
    string itemId = "Status" + item.Value;      // 做為 id 用的字串
    @Html.RadioButton("Status"
                    , item.Value
                    , item.Selected
                    , new { id = itemId } )@item.Text<br />
  }
  // 可產生：
  <input checked="checked" id="StatusInroll" name="Status" type="radio" value="Inroll" />在學<br />
  <input id="StatusDeferral" name="Status" type="radio" value="Deferral" />延修<br />
  <input id="StatusGraduate" name="Status" type="radio" value="Graduate" />畢業<br />
  <input id="StatusDropout" name="Status" type="radio" value="Dropout" />退學<br />
  <input id="StatusDead" name="Status" type="radio" value="Dead" />死亡<br />

則在 form submit 時會將勾選的 RadioButton 的 value 賦值給 Status 變數，送到後端。

留言

張貼留言