asp.net MVC 单选按钮的使用

时间：2023-03-10 03:50:43
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>

}

 

相关文章