原文:Understanding HTML Helpers in ASP.NET MVC

作 者:Shailendra Chauhan works as Software Analyst at reputed MNC and has more than 5 years of hand over Microsoft .NET technologies. He is a .NET Consultant and is the founder & chief editor of www.dotnet-tricks.com and www.dotnetinterviewtricks.com blogs. He is author of book ASP.NET MVC Interview Questions and Answers.
He loves
to work with web applications and mobile apps using Microsoft technology
including ASP.NET, MVC, C#, SQL Server, WCF, Web API, Entity
Framework,Cloud Computing, Windows Azure, jQuery, jQuery Mobile,
Knockout.js, Angular.js and many more web technologies. More...

HTML助手就是用来返回HTML字符串的方法。这些字符串可以用来表现你所期望的任何内容。例如,可以使用HTML助手来渲染标准的HTML标记,如HTML的<input>、<button>和<img>等标记。

还可以通过创建自定义的HTML助手来渲染更多更复杂的内容,如菜单条或用来显示数据库数据的HTML表格。

不同类型的HTML助手

以下列出了三种类下的HTML助手:

内联式的HTML助手

这些需要在同一视图内使用Razor的@hepler标记来创建。这些助手可以在同一视图内被重用。

     @helper ListingItems(string[] items)
{
<ol>
@foreach (string item in items)
{
<li>@item</li>
}
</ol>
} <h3>Programming Languages:</h3> @ListingItems(new string[] { "C", "C++", "C#" }) <h3>Book List:</h3> @ListingItems(new string[] { "How to C", "how to C++", "how to C#" })

内置的HTML助手

内置的HTML助手是HtmlHelper类的扩展方法。内置的HTML助手可以划分为3种类型:

标准的HTML助手

这些助手可以用来渲染最常用的HTML元素类型,如HTML文本输入框、复选框等。以下是最常用的标准Html助手列表:

HTML元素

示例

TextBox

@Html.TextBox("Textbox1", "val")
输出: <input id="Textbox1" name="Textbox1" type="text" value="val" />

TextArea

@Html.TextArea("Textarea1", "val", 5, 15, null)
输出: <textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea>

Password

@Html.Password("Password1", "val")
输出: <input id="Password1" name="Password1" type="password" value="val" />

Hidden Field

@Html.Hidden("Hidden1", "val")
输出: <input id="Hidden1" name="Hidden1" type="hidden" value="val" />

CheckBox

@Html.CheckBox("Checkbox1", false)
输出: <input id="Checkbox1" name="Checkbox1" type="checkbox"
value="true" /> <input name="myCheckbox" type="hidden"
value="false" />

RadioButton

@Html.RadioButton("Radiobutton1", "val", true)
输出: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />

Drop-down list

@Html.DropDownList (“DropDownList1”, new SelectList(new [] {"Male", "Female"}))
输出: <select id="DropDownList1" name="DropDownList1">
<option>M</option> <option>F</option>
</select>

Multiple-select

Html.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"}))
输出: <select id="ListBox1" multiple="multiple" name="ListBox1">
<option>Cricket</option>
<option>Chess</option> </select>

强类型的HTML助手


些助手主要用来在强类型视图内渲染最常用的HTML元素类型,如HTML文本输入框、复选框等等。HTML元素会根据模型属性来创建。强类型HTML助手
需要与lambda表达式一起使用。模型对象会被作为lambda表达式的值来传递,而你可以从模型中选择一个字段或属性来设置HTML助手id、名称和
值属性。以下是最常用的强类型HTML助手的列表:

HTML元素

示例

TextBox

@Html.TextBoxFor(m=>m.Name)
输出: <input id="Name" name="Name" type="text" value="Name-val" />

TextArea

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

Password

@Html.PasswordFor(m=>m.Password)
输出: <input id="Password" name="Password" type="password"/>

Hidden Field

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

CheckBox

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

RadioButton

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

Drop-down list

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

Multiple-select

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

模板化的HTML助手


些助手需要弄清楚那些HTML元素是被要求基于模型类的属性进行渲染的。尽管这需要一些细致和耐心的设置,但这是一种将数据显示给用户的非常灵活的做法。
为了使用模板化的HTML助手来设置适合的HTML元素,需要使用DataAnnitation类的DataType特性。

例如,当使用DataType作为密码,模板化的助手会自动渲染密码类型的HTML的input元素。

模板化助手

示例

Display

渲染一个指定模型属性的只读视图,并基于属性的数据类型和元数据选择适当的HTML元素。

Html.Display("Name")

DisplayFor

前一个的助手的强类型版本。
Html.DisplayFor(m => m. Name)

Editor

为指定的模型属性渲染一个编辑器,并给予属性的数据类型和元数据选择适当的HTML元素。
Html.Editor("Name")

EditorFor

前一个的助手的强类型版本。
Html.EditorFor(m => m. Name)

自定义的HTML助手

还可以通过创建HtmlHelper类的扩展方法或在功能类内创建静态方法的方式来创建自定义的辅助方法。

         public static class CustomHelpers
{
//Submit Button Helper
public static MvcHtmlString SubmitButton(this HtmlHelper helper, string
buttonText)
{
string str = "<input type=\"submit\" value=\"" + buttonText + "\" />";
return new MvcHtmlString(str);
}
//Readonly Strongly-Typed TextBox Helper
public static MvcHtmlString TextBoxFor<TModel, TValue>(this
HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>>
expression, bool isReadonly)
{
MvcHtmlString html = default(MvcHtmlString); if (isReadonly)
{
html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
expression, new { @class = "readOnly",
@readonly = "read-only" });
}
else
{
html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
expression);
}
return html;
}
}

【翻译】了解ASP.NET MVC的HTML助手的更多相关文章

  1. [翻译] 使用ASP.NET MVC操作过滤器记录日志

    [翻译] 使用ASP.NET MVC操作过滤器记录日志 原文地址:http://www.singingeels.com/Articles/Logging_with_ASPNET_MVC_Action_ ...

  2. 【翻译】ASP.NET MVC 5属性路由(转)

    转载链接:http://www.cnblogs.com/thestartdream/p/4246533.html 原文链接:http://blogs.msdn.com/b/webdev/archive ...

  3. [渣翻译] 在ASP.NET MVC WebAPI项目中使用 AngularJS

    原文地址http://blog.technovert.com/2013/12/setting-up-angularjs-for-asp-net-mvc-n-webapi-project/ 我们最近发布 ...

  4. ASP.NET MVC 5 入门指南汇总

    经过前一段时间的翻译和编辑,我们陆续发出12篇ASP.NET MVC 5的入门文章.其中大部分翻译自ASP.NET MVC 5 官方教程,由于本系列文章言简意赅,篇幅适中,从一个web网站示例开始讲解 ...

  5. ASP.NET MVC 入门10、Action Filter 与 内置的Filter实现(实例-防盗链)

    于ASP.NET MVC Preview5. 前一篇中我们已经了解了Action Filter 与 内置的Filter实现,现在我们就来写一个实例.就写一个防盗链的Filter吧. 首先继承自Filt ...

  6. [转]ASP.NET MVC 入门10、Action Filter 与 内置的Filter实现(实例-防盗链)

    前一篇中我们已经了解了Action Filter 与 内置的Filter实现,现在我们就来写一个实例.就写一个防盗链的Filter吧. 首先继承自FilterAttribute类同时实现IAction ...

  7. 【转】ASP.NET MVC教程

    转自:http://www.cnblogs.com/QLeelulu/category/123326.html ASP.NET MVC的最佳实践与性能优化的文章 摘要: 就一些文章链接,就不多废话了. ...

  8. ASP.NET MVC 5 学习教程:Details 和 Delete 方法详解

    原文 ASP.NET MVC 5 学习教程:Details 和 Delete 方法详解 在教程的这一部分,我们将研究一下自动生成的 Details 和Delete 方法. Details 方法 打开M ...

  9. 【翻译】了解ASP.NET MVC中的Ajax助手

    原文:Understanding AJAX Helpers in ASP.NET MVC 作者: Shailendra Chauhan works as Software Analyst at rep ...

随机推荐

  1. android JSONArray JSONObject 字符串转json数组 遍历json对象

    String json = "{''data'':[{''name'':''Wallace''},{''name'':''Grommit''}]}"; StringBuffer m ...

  2. SSH项目整合教学Eclipse搭建SSH(Struts2+Spring3+Hibernate3)

    这篇博文的目的 尝试搭建一个完整的SSH框架项目. 给以后的自己,也给别人一个参考. 读博文前应该注意: 本文提纲:本文通过一个用户注册的实例讲解SSH的整合.创建Struts项目,整合Hiberna ...

  3. WinForm数字小键盘/WPF数字小键盘

    模仿原本的WinForm触摸屏小键盘制作WPF触摸屏小键盘 原WinForm触摸屏小键盘样式(WinForm采用Krypton系列控件)如下图: Designer代码如下: // // BtnNum1 ...

  4. 第六篇 SQL Server安全执行上下文和代码签名

    本篇文章是SQL Server安全系列的第六篇,详细内容请参考原文. SQL Server决定主体是否有必要的执行代码权限的根本途径是其执行上下文规则.这一切都可能复杂一个主体有执行代码的权限,但是却 ...

  5. Visual Studio 编译纯 C 项目的方法

    项目属性 -> 配置属性 -> C/C++ -> 高级 -> 编译为 -> 选择 `编译为C代码(/TC)` 参考资料: http://stackoverflow.com ...

  6. iOS XML  解析(原生的)

    #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...

  7. appcon 图标打包

    ERROR ITMS-90022: "Missing required icon file. The bundle does not contain an app icon for iPho ...

  8. Windows2000安装Winform Clickonce提示升级系统版本的解决方案

    Windows2000安装Winform Clickonce提示升级系统版本.只需要把所有应用的DLL的独立性设置为false就可以了.

  9. ubuntu14.04安装eclipse

    1.安装jdk7.x,参考上篇<Linux14.04安装JDK> 2下载eclipse.tar 3.sudo tar -zxvf eclipse-x-x-.tar.gz mv eclips ...

  10. 学习jsp(1)

    我的开发环境是:jdk1.7;netbean ;tomcat7. 尝试着写了第一个程序: ublic class myServlet extends HttpServlet{    @Override ...