復選框和單選按鈕標簽包含在<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>
內聯的復選框和單選按鈕,
- 對一系列復選框和單選框使用 .checkbox-inline 或 .radio-inline class,控制它們顯示在同一行上。
<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>
基架自動創建的Create 視圖的代碼:
如果是一個對象的成員是枚舉類型,基架的 Create視圖會自動生成枚舉類型的下拉菜單。 @Html.EnumDropDownListFor(model => model.NotificationType, htmlAttributes: new { @class =
"form-control" })
<div class="form-group">
@Html.LabelFor(model => model.NotificationType, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.NotificationType, htmlAttributes: new { @class = "form-control" })
雖然下面用的是@Html.EditorFor方法,但是 MVC框架能識別它是一個boolean類型,因此,會使用checkbox來渲染視圖。
<div class="form-group">
@Html.LabelFor(model => model.IsDismissed, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.IsDismissed)
@Html.ValidationMessageFor(model => model.IsDismissed, "", new { @class = "text-danger" })
</div>
</div>
</div>
@Html.ValidationMessageFor(model => model.NotificationType, "", new { @class = "text-danger" })
</div>
</div>