asp.net MVC 单选按钮的使用

单选按钮的标准的html语法

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

1、在Bootstrap中，将单选按钮和复选框放在Label标签中，默认的形式为竖排排列，也就是要换行。

<divclass="checkbox">
<label><inputtype="checkbox"value="">选项1</label>
</div>
<divclass="checkbox">
<label><inputtype="checkbox"value="">选项2</label>
</div>

<divclass="radio">
<label>
<inputtype="radio"name="optionsRadios"id="optionsRadios1"
value="option1"checked>选项1
</label>
</div>
<divclass="radio">
<label>
<inputtype="radio"name="optionsRadios"id="optionsRadios2"
value="option2">
选项2-选择它将会取消选择选项1
</label>
</div>

2、一系列复选框和单选框使用.checkbox-inline或.radio-inlineclass，控制它们显示在同一行上。

<labelfor="name">内联的复选框和单选按钮的实例</label>
<div>
<labelclass="checkbox-inline">
<inputtype="checkbox"id="inlineCheckbox1"value="option1">选项1
</label>
<labelclass="checkbox-inline">
<inputtype="checkbox"id="inlineCheckbox2"value="option2">选项2
</label>
<labelclass="checkbox-inline">
<inputtype="checkbox"id="inlineCheckbox3"value="option3">选项3
</label>
<labelclass="checkbox-inline">
<inputtype="radio"name="optionsRadiosinline"id="optionsRadios3"
value="option1"checked>选项1
</label>
<labelclass="checkbox-inline">
<inputtype="radio"name="optionsRadiosinline"id="optionsRadios4"
value="option2">选项2
</label>
</div>

在asp.netmvc的视图中，可以使用辅助方法实现。由于<inputtype="radio"标签一次只能创建一个单选按钮，所以要使用多次@Html.RadioButtonFor辅助方法。

第一种方式：按Bootstrap的样式手动创建Label标签。

<divclass="form-group">
@Html.LabelFor(model=>model.InCollege,htmlAttributes:new{@class="control-labelcol-md-2"})
<divclass="col-md-10">
<divclass="radio-inline">
@*@Html.EditorFor(model=>model.InCollege)*@
@*@Html.CheckBoxFor(model=>model.InCollege)<spanclass="help-block">打勾表示为校内老师</span>//使用复选框来表示是否*@

<label>
@Html.RadioButtonFor(model=>model.InCollege,"true")校内@*生成了name和ID值均为Incollege,value为True的<inputtype="radio标签。"*@@*@Html.Label("InCollege","校内")第一个参数指向的对象，第二个为显示的文本*@
</label>
</div>
<divclass="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的<inputtype="radio标签。

@Html.Label("InCollege","校内")//Html.Label辅助方法第一个参数指向的对象的ID，第二个为显示的文本*@

@Html.RadioButtonFor(model=>model.InCollege,"false",new{id="OutsideCollege"})//@*生成了name和ID值均为Incollege,value为True的<inputtype="radio标签。通过new{id=""OutsideCollege"}覆盖了默认生成id值，由原来的inColldge变成了OutSideCollege

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

第三种方式：也可以将两个bool值的单选按钮转换成按钮组的形式。

@{
ViewBag.Title="Index";
varlikesMusic=Model.LikesMusic?"active":null;
varnotAMusicFan=!Model.LikesMusic?"active":null;
}

<p>
<divclass="btn-group"data-toggle="buttons">@*加上data-toggle="buttons"去除了单选框*@

<labelclass="btnbtn-successbtn-sm@likesMusic">
<inputtype="radio"name="options"id="option1"/>LikesMusic
</label>
<labelclass="btnbtn-successbtn-sm@notAMusicFan">
<inputtype="radio"name="options"id="option2"/>SuffersinaDistortedReality
</label>
</div>
</p>

第四种：也可以将枚举类型转换为单选按钮。

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

}