ASP.NET MVC How To Use RadioButtonFor In Bootstrap4

2021-06-02

筆記如何使用 RadioButtonFor 讓設計 ASP.NET MVC 表單介面時更為美觀、迅速。

說明

<div class="form-group">
  @Html.Label("類別", htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-5">
    @Html.RadioButtonFor(model => model.CheckType, "A", new { @Id = "Radio-Btn-1" })
    @Html.Label("Radio-Btn-1", "按鈕A")
    <span class="mr-5"></span>
    @Html.RadioButtonFor(model => model.CheckType, "B", new { @Id = "Radio-Btn-2" })
    @Html.Label("Radio-Btn-2", "按鈕B")
    @Html.ValidationMessageFor(model => model.CheckType, "", new { @class = "text-danger" })
  </div>
</div>

RadioButton 使用強型別的 RadioButtonFor，model.CheckType 會自動為 Input Tag 將 Name 設定為 CheckType，第二個參數 "A", "B" 是實際送往 From 的 Input Value。

其中 Label 可以與 Radio 的 Id 作互動，不論是點選 Radio 或者 Label 都可以做選擇，十分方便。