理解ASP.NET MVC中的HTML Helpers

时间：2023-03-09 21:52:34
理解ASP.NET MVC中的HTML Helpers

01 内联Html Helpers

 @helper listItems(string[] items)

 {

     <ol>

         @foreach (var item in items)

         {

             <li>@item</li>

         }

     </ol>

 }

 <h1>页面内自定义helper</h1>

 @listItems(new string[] { "项目一","项目二","项目三"})

02 内置Html Helpers

HTML Element Standard Html Helpers Example Strongly Typed HTML Helpers Example
TextBox @Html.TextBox("Textbox1", "val")
Output:
<input id="Textbox1" name="Textbox1" type="text" value="val" /> 		@Html.TextBoxFor(m=>m.Name)

Output:
<input id="Name" name="Name" type="text" value="Name-val" />
TextArea @Html.TextArea("Textarea1", "val", 5, 15, null)

Output:
<textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea> 		@Html.TextArea(m=>m.Address , 5, 15, new{}))

Output:
<textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>
Password @Html.Password("Password1", "val")

Output:
<input id="Password1" name="Password1" type="password" value="val" /> 		@Html.PasswordFor(m=>m.Password)

Output:
<input id="Password" name="Password" type="password"/>
Hidden Field @Html.Hidden("Hidden1", "val")

Output:
<input id="Hidden1" name="Hidden1" type="hidden" value="val" /> 		@Html.HiddenFor(m=>m.UserId)

Output:
<input id=" UserId" name=" UserId" type="hidden" value="UserId-val" />
CheckBox @Html.CheckBox("Checkbox1", false)

Output:
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" />
<input name="myCheckbox" type="hidden" value="false" /> 		@Html.CheckBoxFor(m=>m.IsApproved)

Output:
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" />
<input name="myCheckbox" type="hidden" value="false" />
RadioButton @Html.RadioButton("Radiobutton1", "val", true)

Output:
<input checked="checked" id="Radiobutton1" name="Radiobutton1"
type="radio" value="val" /> 		@Html.RadioButtonFor(m=>m.IsApproved, "val")

Output:
<input checked="checked" id="Radiobutton1" name="Radiobutton1"
type="radio" value="val" />
Drop-down list @Html.DropDownList (“DropDownList1”, new SelectList(new [] {"Male", "Female"}))

Output:
<select id="DropDownList1" name="DropDownList1">
<option>M</option>
<option>F</option>
</select> 		@Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"}))

Output:
<select id="Gender" name="Gender">
<option>Male</option>
<option>Female</option>
</select>
Multiple-select Html.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"}))

Output:
<select id="ListBox1" multiple="multiple" name="ListBox1">
<option>Cricket</option>
<option>Chess</option>
</select> 		Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"}))

Output:
<select id="Hobbies" multiple="multiple" name="Hobbies">
<option>Cricket</option>
<option>Chess</option>
</select>

相关文章