web框架UI系列--MVC常用控件讲解三

InputExtention之CheckBox、TextBox、RadioButton、Hidden、Password

云微开发平台web开发框架

@Html.HiddenFor(m => m.Id) @** 或者 @Html.Hidden("Id")*@
@using (Html.BeginForm("HtmlHelperTest", "Home", FormMethod.Post, new { id = "beginformtest" }))
{
    <div class="row">
        <div class="col-md-1">@Html.Label("Editor:")</div>
        <div class="col-md-2">@Html.EditorFor(m => m.EditorValue) @*或者 @Html.Editor("inputt",Model.EditorValue)*@</div>
        <div class="col-md-1">@Html.Label("TextBox:")</div>
        <div class="col-md-2">@Html.TextBoxFor(m => m.TextBoxValue) @*或者 @Html.TextBox("inputt",Model.TextBoxValue)*@</div>
        <div class="col-md-1">@Html.Label("CheckBox:")</div>
        <div class="col-md-2">@Html.CheckBoxFor(m => m.CheckBoxValue) @*或者 @Html.CheckBox("inputt",Model.CheckBoxValue)*@</div>
    </div>
    <div class="row">
        <div class="col-md-1">@Html.Label("RadioBtn:")</div>
        <div class="col-md-2">@Html.RadioButtonFor(m => m.RadioButtonValue, 1) @*或者 @Html.RadioButton("inputt",Model.TextBoxValue,1)*@</div>
        <div class="col-md-1">@Html.Label("Password:")</div>
        <div class="col-md-2">@Html.PasswordFor(m => m.PasswordValue) @*或者 @Html.Password("inputt",Model.PasswordValue)*@</div>
    </div>
    <input type="submit" class="study-btn" value="提交" />
    @Html.Raw(Model==null?"":Model.TestResult)
}

　B/S开发框架页面渲染成Html：

<form action="/Home/HtmlHelperTest" id="beginformtest" method="post"> <div class="row">
<div class="col-md-1"><label for="Editor:">Editor:</label></div>
<div class="col-md-2"><input class="text-box single-line" id="EditorValue" name="EditorValue" type="text" value="" /> </div>
<div class="col-md-1"><label for="TextBox:">TextBox:</label></div>
<div class="col-md-2"><input id="TextBoxValue" name="TextBoxValue" type="text" value="" /> </div>
<div class="col-md-1"><label for="CheckBox:">CheckBox:</label></div>
<div class="col-md-2"><input data-val="true" data-val-required="CheckBoxValue 字段是必需的。" id="CheckBoxValue" name="CheckBoxValue" type="checkbox" value="true" /><input name="CheckBoxValue" type="hidden" value="false" /> </div>
</div>
<div class="row">
<div class="col-md-1"><label for="RadioButton:">RadioButton:</label></div>
<div class="col-md-2"><input id="RadioButtonValue" name="RadioButtonValue" type="radio" value="1" /> </div>
<div class="col-md-1"><label for="Password:">Password:</label></div>
<div class="col-md-2"><input id="PasswordValue" name="PasswordValue" type="password" /> </div>
 
</div>
<input type="submit" class="study-btn" value="提交" />
</form>

TextAreaExtention之TextArea，SelectExtensions之DropDownList、ListBox

<div class="col-md-1">@Html.Label("TextArea:")</div>
<div class="col-md-3">@Html.EditorFor(m => m.TextAreaValue) @*或者 @Html.TextArea("TextArea",Model.TextAreaValue)*@</div>
<div class="col-md-1">@Html.Label("TextBox:")</div>
<div class="col-md-3">@Html.DropDownListFor(m => m.DropDownListValue, (List<SelectListItem>)ViewBag.ListValues) @*或者 @Html.DropDownList("DropDownList",Model.DropDownListValue,(List<SelectListItem>)ViewBag.ListValues)*@</div>
<div class="col-md-1">@Html.Label("ListBoxValue:")</div>
<div class="col-md-3">@Html.ListBoxFor(m => m.ListBoxValue, (List<SelectListItem>)ViewBag.ListValues) @*或者 @Html.ListBox("ListBox",Model.ListBoxValue,(List<SelectListItem>)ViewBag.ListValues)*@</div>

　　转化成Html：

<div class="col-md-3"><input class="text-box single-line" id="TextAreaValue" name="TextAreaValue" type="text" value="" /> </div>
<div class="col-md-1"><label for="TextBox:">TextBox:</label></div>
<div class="col-md-3"><select id="DropDownListValue" name="DropDownListValue"><option value="1">value1</option>
<option value="2">value2</option>
</select> </div>
<div class="col-md-1"><label for="ListBoxValue:">ListBoxValue:</label></div>
<div class="col-md-3"><select id="ListBoxValue" multiple="multiple" name="ListBoxValue"><option value="1">value1</option>
<option value="2">value2</option>
</select> </div>

　　

PartialExtention之Partial，ValidationExtensions之Validation

云微开发平台B/S开发框架

@Html.Partial("PartialName")是局部视图，表示将分部视图呈现为 HTML 编码字符串的功能。我们在可重用视图片段、大业务场景视图时可用到分部视图，目的是代码重用性高和可读写性强。分部视图我们会单写一章来介绍。

ValidationExtensions之Validation，这是一个非常常用的扩展函数，我们窗体中很多重要的数据都需要数据验证，比如需要控制一个数值不能大于1000,控制如下：

Model中字段申明:  
[DisplayName("Validation")]
[Required]
[Range(0,1000)]
public int ValidationValue { get; set;} 

　　View层代码：

<div class="col-md-1">@Html.LabelFor(m=>m.ValidationValue)</div>
<div class="col-md-3">
    @Html.TextBoxFor(m => m.ValidationValue) @*或者 @Html.TextBox("inputt",Model.ValidationValue)*@
    @Html.ValidationMessageFor(m => m.ValidationValue)
</div>

　　转化成Html：

<div class="col-md-1"><label for="ValidationValue">Validation</label></div>
<div class="col-md-3">
<input data-val="true" data-val-number="The field Validation must be a number." data-val-range="字段 Validation 必须在 0 和 1000 之间。" data-val-range-max="1000" data-val-range-min="0" data-val-required="Validation 字段是必需的。" id="ValidationValue" name="ValidationValue" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="ValidationValue" data-valmsg-replace="true"></span>
</div>