HTMLhelper
使用 HTML 帮助器在 ASP.NET MVC 中呈现窗体
ASP.NET MVC 框架包含帮助器方法,通过使用这些帮助器方法,可以轻松地在视图中呈现 HTML。 本主题介绍如何使用最常用的 HTML 帮助器。 最后一节演示了一个示例,该示例包括本主题中描述的 HTML 帮助器。
以下列表显示了当前可用的一些 HTML 帮助器。 本主题演示所列出的带有星号 (*) 的帮助器。
-
ActionLink - 链接到操作方法。
-
BeginForm * - 标记窗体的开头并链接到呈现该窗体的操作方法。
-
CheckBox * - 呈现复选框。
-
DropDownList * - 呈现下拉列表。
-
Hidden - 在窗体中嵌入未呈现的信息以供用户查看。
-
ListBox * - 呈现列表框。
-
Password - 呈现用于输入密码的文本框。
-
RadioButton * - 呈现单选按钮。
-
TextArea - 呈现文本区域(多行文本框)。
-
TextBox * - 呈现文本框。
BeginForm 帮助器标记 HTML 窗体的开头并呈现为 HTML form 元素。 BeginForm 帮助器方法具有多个重写。 以下示例中显示的 BeginForm 帮助器的版本采用两个参数,即操作方法的名称和用于提交窗体的控制器。 BeginForm 帮助器可实现 IDisposable 接口,这使您可以像使用 ASP.NET AJAX 那样使用 using 关键字(Visual Basic 中的 Using)。
下面的示例演示如何在 using 模式中使用 BeginForm 帮助器。
您也可以以声明方式使用 BeginForm 帮助器。 以声明方式使用 BeginForm 与使用 HTML form 标记的不同之处在于:BeginForm 会为操作方法和操作特性分配默认值,从而简化标记。 下面的示例使用声明性标记来标记窗体的开头和结尾。
CheckBox 帮助器方法将呈现一个具有您指定的名称的复选框。 呈现的控件将返回一个布尔值(true 或 false)。 下面的示例演示 CheckBox 帮助器方法的标记。
DropDownList 帮助器将呈现下拉列表。 最简单的 DropDownList 采用一个参数,即值类型为 SelectList 且包含下拉列表选项值的 ViewData 关键字的名称。 MVC 框架使用 ViewData 的ModelState 属性来确定选定的值。 如果 ModelState 属性为空,则该框架将查找已设置了其 Selected 属性的项。
下面的示例演示 DropDownList 帮助器方法的标记。
注意 |
---|
DropDownList 和 ListBox 帮助器均接受 SelectList 或 MultiSelectList 对象。 |
下面的代码是用于向 List 对象添加值的 Index 操作方法的一部分。 List 对象将传递给 SelectList 的实例,然后后者会添加到 ViewData 对象中。
RadioButton 帮助器方法将呈现单选按钮。 该方法最简单的形式是采用以下三个参数:控件组的名称、选项值以及用于确定单选按钮最初是否处于选定状态的 Boolean 值。 下面的标记演示RadioButton 帮助器方法的标记。
Select your favorite color:<br /> <%= Html.RadioButton("favColor", "Blue", true) %> Blue <br /> <%= Html.RadioButton("favColor", "Purple", false)%> Purple <br /> <%= Html.RadioButton("favColor", "Red", false)%> Red <br /> <%= Html.RadioButton("favColor", "Orange", false)%> Orange <br /> <%= Html.RadioButton("favColor", "Yellow", false)%> Yellow <br /> <%= Html.RadioButton("favColor", "Brown", false)%> Brown <br /> <%= Html.RadioButton("favColor", "Green", false)%> Green
TextBox 帮助器方法将呈现一个具有指定名称的文本框。 下面的标记演示 TextBox 帮助器方法的标记。
下面的示例是上述示例所摘自的完整示例。 Index 页显示了一个实现 HTML 帮助器方法的窗体。 当用户提交窗体时,窗体由 HandleForm 操作方法进行处理,从而生成一个显示用户提交的信息的视图。
下面的示例演示 HomeController 类。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcHtmlHelpers.Controllers { [HandleError] public class HomeController : Controller { public ActionResult Index() { ViewData["Message"] = "Welcome to ASP.NET MVC!"; List<string> petList = new List<string>(); petList.Add("Dog"); petList.Add("Cat"); petList.Add("Hamster"); petList.Add("Parrot"); petList.Add("Gold fish"); petList.Add("Mountain lion"); petList.Add("Elephant"); ViewData["Pets"] = new SelectList(petList); return View(); } public ActionResult About() { return View(); } public ActionResult HandleForm(string name, string favColor, Boolean bookType, string pets) { ViewData["name"] = name; ViewData["favColor"] = favColor; ViewData["bookType"] = bookType; ViewData["pet"] = pets; return View("FormResults"); } } }
下面的示例演示 Index 视图。
<h2><%= Html.Encode(ViewData["Message"]) %></h2> <br /><br /> <% using(Html.BeginForm("HandleForm", "Home")) %> <% { %> Enter your name: <%= Html.TextBox("name") %> <br /><br /> Select your favorite color:<br /> <%= Html.RadioButton("favColor", "Blue", true) %> Blue <br /> <%= Html.RadioButton("favColor", "Purple", false)%> Purple <br /> <%= Html.RadioButton("favColor", "Red", false)%> Red <br /> <%= Html.RadioButton("favColor", "Orange", false)%> Orange <br /> <%= Html.RadioButton("favColor", "Yellow", false)%> Yellow <br /> <%= Html.RadioButton("favColor", "Brown", false)%> Brown <br /> <%= Html.RadioButton("favColor", "Green", false)%> Green <br /><br /> <%= Html.CheckBox("bookType") %> I read more fiction than non-fiction.<br /> <br /><br /> My favorite pet: <%= Html.DropDownList("pets") %> <br /><br /> <input type="submit" value="Submit" /> <% } %>
下面的示例演示 FormResults 视图。
<h2>FormResults</h2> <p> Your name: <b><%= Html.Encode(ViewData["name"])%></b> </p> <p> Your favorite color: <b><%= Html.Encode(ViewData["favColor"]) %></b> </p> <% if (ViewData["bookType"].Equals(true)) { %> <p>You read more <b>fiction</b> than non-fiction.</p> <% } else { %> <p>You read more <b>non-fiction</b> than fiction.</p> <% } %> Your favorite pet: <b><%= Html.Encode(ViewData["pet"]) %></b>