asp.net MVC 單選按鈕的使用

單選按鈕的標准的html 語法

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

 

1、在Bootstrap 中，將單選按鈕和復選框放在Label標簽中，默認的形式為 豎排排列，也就是要換行。

<div class="checkbox"> <label><input type="checkbox" value="">選項 1</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">選項 2</label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 選項 1 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 選項 2 - 選擇它將會取消選擇選項 1 </label>
</div>

2、一系列復選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

<label for="name">內聯的復選框和單選按鈕的實例</label> <div> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 選項 3 </label> <label class="checkbox-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項 1 </label> <label class="checkbox-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 選項 2 </label> </div>

在asp.net mvc 的視圖中，可以使用輔助方法實現。由於<input type="radio"標簽 一次只能創建一個單選按鈕，所以要使用多次@Html.RadioButtonFor輔助方法。

第一種方式：按Bootstrap的樣式手動創建Label標簽。

<div class="form-group">
@Html.LabelFor(model => model.InCollege, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="radio-inline">
@* @Html.EditorFor(model => model.InCollege) *@
@* @Html.CheckBoxFor(model => model.InCollege)<span class="help-block">打勾表示為校內老師</span> //使用復選框來表示是否*@

<label>
@Html.RadioButtonFor(model => model.InCollege, "true") 校內         @*生成了name 和ID 值均為Incollege,value 為True的 <input type="radio標簽。"*@     @* @Html.Label("InCollege", "校內") 第一個參數指向的對象，第二個為顯示的文本*@
</label>
</div>
<div class="radio-inline">
<label>
@Html.RadioButtonFor(model => model.InCollege, "false") 校外 @* @Html.Label("OutCollege", "校外") *@
</label>
</div>
@Html.ValidationMessageFor(model => model.InCollege, "", new { @class = "text-danger" })
</div>
</div>

 

 

第二種 方式：也可以使用@Html.Label輔助 方法生成Label標簽。

@Html.RadioButtonFor(model => model.InCollege, "true",new {id ="inCollege"}) @*生成了name 和ID 值均為Incollege,value 為True的 <input type="radio標簽。

   @Html.Label("InCollege", "校內")                             //Html.Label輔助方法第一個參數指向的對象的ID，第二個為顯示的文本*@ 

 

@Html.RadioButtonFor(model => model.InCollege, "false",new {id ="OutsideCollege"}) // @*生成了name 和ID 值均為Incollege,value 為True的 <input type="radio標簽。 通過new {id =""OutsideCollege"} 覆蓋了默認生成id值，由原來的inColldge變成了OutSideCollege 

     @Html.Label("OutCollege", "校外")   

 

第三種方式：也可以將兩個bool值的單選按鈕轉換成 按鈕組的形式。

 

@{
ViewBag.Title = "Index";
var likesMusic = Model.LikesMusic ? "active" : null;
var notAMusicFan = !Model.LikesMusic ? "active" : null;
}

 

<p>
<div class="btn-group" data-toggle="buttons">   @* 加上data-toggle="buttons"去除了單選框*@

<label class="btn btn-success btn-sm @likesMusic">
<input type="radio" name="options" id="option1" />Likes Music
</label>
<label class="btn btn-success btn-sm @notAMusicFan">
<input type="radio" name="options" id="option2" />Suffers in a Distorted Reality
</label>
</div>
</p>

第四種：也可以將枚舉類型轉換為單選按鈕。

@foreach (var item in Enum.GetValues(typeof(ReviewConclusion)))
{
<div class="radio-inline">
@Html.RadioButtonFor(modelItem =>item,item)
@Html.LabelFor(modelItem =>item, item.ToString())
</div>

}