Razor编程中@Html的方法使用大全

文章目录

- [1. 基础HTML辅助方法](#1. 基础HTML辅助方法)
- - [1.1 Html.ActionLink()](#1.1 Html.ActionLink())
  - [1.2 Html.RouteLink()](#1.2 Html.RouteLink())
  - [1.3 Html.Display() / Html.DisplayFor()](#1.3 Html.Display() / Html.DisplayFor())
  - [1.4 Html.Editor() / Html.EditorFor()](#1.4 Html.Editor() / Html.EditorFor())
  - [1.5 Html.Label() / Html.LabelFor()](#1.5 Html.Label() / Html.LabelFor())
  - [1.6 Html.TextBox() / Html.TextBoxFor()](#1.6 Html.TextBox() / Html.TextBoxFor())
- [2. 表单相关辅助方法](#2. 表单相关辅助方法)
- - [2.1 Html.BeginForm() / Html.BeginRouteForm()](#2.1 Html.BeginForm() / Html.BeginRouteForm())
  - [2.2 Html.AntiForgeryToken()](#2.2 Html.AntiForgeryToken())
  - [2.3 Html.ValidationMessage() / Html.ValidationMessageFor()](#2.3 Html.ValidationMessage() / Html.ValidationMessageFor())
  - [2.4 Html.ValidationSummary()](#2.4 Html.ValidationSummary())
  - [2.5 Html.DropDownList() / Html.DropDownListFor()](#2.5 Html.DropDownList() / Html.DropDownListFor())
  - [2.6 Html.ListBox() / Html.ListBoxFor()](#2.6 Html.ListBox() / Html.ListBoxFor())
  - [2.7 Html.CheckBox() / Html.CheckBoxFor()](#2.7 Html.CheckBox() / Html.CheckBoxFor())
  - [2.8 Html.RadioButton() / Html.RadioButtonFor()](#2.8 Html.RadioButton() / Html.RadioButtonFor())
  - [2.9 Html.Password() / Html.PasswordFor()](#2.9 Html.Password() / Html.PasswordFor())
  - [2.10 Html.Hidden() / Html.HiddenFor()](#2.10 Html.Hidden() / Html.HiddenFor())
  - [2.11 Html.TextArea() / Html.TextAreaFor()](#2.11 Html.TextArea() / Html.TextAreaFor())
- [3. 模型绑定相关方法](#3. 模型绑定相关方法)
- - [3.1 Html.DisplayName() / Html.DisplayNameFor()](#3.1 Html.DisplayName() / Html.DisplayNameFor())
  - [3.2 Html.DisplayText() / Html.DisplayTextFor()](#3.2 Html.DisplayText() / Html.DisplayTextFor())
  - [3.3 Html.Value() / Html.ValueFor()](#3.3 Html.Value() / Html.ValueFor())
  - [3.4 Html.Name() / Html.NameFor()](#3.4 Html.Name() / Html.NameFor())
  - [3.5 Html.Id() / Html.IdFor()](#3.5 Html.Id() / Html.IdFor())
- [4. 部分视图和布局方法](#4. 部分视图和布局方法)
- - [4.1 Html.Partial()](#4.1 Html.Partial())
  - [4.2 Html.RenderPartial()](#4.2 Html.RenderPartial())
  - [4.3 Html.Action()](#4.3 Html.Action())
  - [4.4 Html.RenderAction()](#4.4 Html.RenderAction())
- [5. 其他实用方法](#5. 其他实用方法)
- - [5.1 Html.Raw()](#5.1 Html.Raw())
  - [5.2 Html.Encode()](#5.2 Html.Encode())
  - [5.3 Html.AttributeEncode()](#5.3 Html.AttributeEncode())
  - [5.4 Html.FormatValue()](#5.4 Html.FormatValue())
  - [5.5 Html.EnableClientValidation() / Html.EnableUnobtrusiveJavaScript()](#5.5 Html.EnableClientValidation() / Html.EnableUnobtrusiveJavaScript())
- [6. 自定义HTML辅助方法](#6. 自定义HTML辅助方法)
- - [6.1 创建扩展方法](#6.1 创建扩展方法)
  - [6.2 在视图中使用](#6.2 在视图中使用)
- [7. 高级用法](#7. 高级用法)
- - [7.1 模板辅助方法](#7.1 模板辅助方法)
  - [7.2 使用模板](#7.2 使用模板)
  - [7.3 条件渲染](#7.3 条件渲染)
- 总结

在ASP.NET MVC和Razor Pages中，@Html对象提供了许多有用的HTML辅助方法，用于生成HTML元素、表单控件、链接等。这些方法可以帮助开发者更高效地创建视图，并与模型绑定。以下是@Html常用方法的详细说明和代码示例。

1. 基础HTML辅助方法

1.1 Html.ActionLink()

生成一个超链接(<a>标签)，指向指定的控制器动作。

html 复制代码

@Html.ActionLink("链接文本", "ActionName", "ControllerName", new { id = 1 }, new { @class = "btn" })

参数说明：

第一个参数：链接显示的文本
第二个参数：动作方法名
第三个参数：控制器名
第四个参数：路由值对象
第五个参数：HTML属性对象

1.2 Html.RouteLink()

基于路由名称生成超链接。

html 复制代码

@Html.RouteLink("我的账户", "UserProfile", new { username = "john" })

1.3 Html.Display() / Html.DisplayFor()

显示模型属性的值，会自动选择合适的显示模板。

html 复制代码

@Html.DisplayFor(model => model.Name)
@Html.Display("Name")

1.4 Html.Editor() / Html.EditorFor()

为模型属性生成编辑控件。

html 复制代码

@Html.EditorFor(model => model.Email)
@Html.Editor("Email")

1.5 Html.Label() / Html.LabelFor()

生成<label>标签。

html 复制代码

@Html.LabelFor(model => model.Name)
@Html.Label("Name", "用户名")

1.6 Html.TextBox() / Html.TextBoxFor()

生成文本输入框。

html 复制代码

@Html.TextBoxFor(model => model.Name)
@Html.TextBox("Name", Model.Name, new { @class = "form-control" })

2. 表单相关辅助方法

2.1 Html.BeginForm() / Html.BeginRouteForm()

生成<form>标签。

html 复制代码

@using (Html.BeginForm("Create", "Product", FormMethod.Post))
{
    <!-- 表单内容 -->
}

@using (Html.BeginRouteForm("Default", new { controller = "Account", action = "Login" }))
{
    <!-- 表单内容 -->
}

2.2 Html.AntiForgeryToken()

生成防伪令牌，用于防止CSRF攻击。

html 复制代码

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <!-- 表单内容 -->
}

2.3 Html.ValidationMessage() / Html.ValidationMessageFor()

显示模型属性的验证错误信息。

html 复制代码

@Html.TextBoxFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)

2.4 Html.ValidationSummary()

显示所有验证错误的摘要。

html 复制代码

@Html.ValidationSummary()
@Html.ValidationSummary(true) <!-- 只显示模型级错误 -->

2.5 Html.DropDownList() / Html.DropDownListFor()

生成下拉列表。

html 复制代码

@Html.DropDownListFor(model => model.Country, 
    new SelectList(ViewBag.Countries, "Value", "Text"), 
    "选择国家",
    new { @class = "form-control" })

2.6 Html.ListBox() / Html.ListBoxFor()

生成多选列表框。

html 复制代码

@Html.ListBoxFor(model => model.SelectedSkills, 
    new MultiSelectList(Model.AllSkills, "Id", "Name"))

2.7 Html.CheckBox() / Html.CheckBoxFor()

生成复选框。

html 复制代码

@Html.CheckBoxFor(model => model.IsActive)
@Html.CheckBox("IsActive", Model.IsActive)

2.8 Html.RadioButton() / Html.RadioButtonFor()

生成单选按钮。

html 复制代码

@Html.RadioButtonFor(model => model.Gender, "Male") 男
@Html.RadioButtonFor(model => model.Gender, "Female") 女

2.9 Html.Password() / Html.PasswordFor()

生成密码输入框。

html 复制代码

@Html.PasswordFor(model => model.Password)
@Html.Password("Password", "", new { @class = "form-control" })

2.10 Html.Hidden() / Html.HiddenFor()

生成隐藏字段。

html 复制代码

@Html.HiddenFor(model => model.Id)
@Html.Hidden("Id", Model.Id)

2.11 Html.TextArea() / Html.TextAreaFor()

生成多行文本框。

html 复制代码

@Html.TextAreaFor(model => model.Description, 5, 20, null)
@Html.TextArea("Description", Model.Description, 5, 20, new { @class = "form-control" })

3. 模型绑定相关方法

3.1 Html.DisplayName() / Html.DisplayNameFor()

显示属性的显示名称（考虑[Display]特性）。

html 复制代码

@Html.DisplayNameFor(model => model.Name)

3.2 Html.DisplayText() / Html.DisplayTextFor()

显示属性的文本值。

html 复制代码

@Html.DisplayTextFor(model => model.Name)

3.3 Html.Value() / Html.ValueFor()

获取属性的格式化值。

html 复制代码

@Html.ValueFor(model => model.Price)

3.4 Html.Name() / Html.NameFor()

获取属性的名称（用于name属性）。

html 复制代码

<input type="text" name="@Html.NameFor(model => model.Name)" />

3.5 Html.Id() / Html.IdFor()

获取属性的ID（用于id属性）。

html 复制代码

<label for="@Html.IdFor(model => model.Name)">用户名</label>

4. 部分视图和布局方法

4.1 Html.Partial()

渲染部分视图。

html 复制代码

@Html.Partial("_LoginPartial")
@Html.Partial("_Address", Model.Address)

4.2 Html.RenderPartial()

与Partial()类似，但直接写入响应流，性能更好。

html 复制代码

@{ Html.RenderPartial("_Header"); }

4.3 Html.Action()

调用子动作并渲染结果。

html 复制代码

@Html.Action("LatestNews", "News")

4.4 Html.RenderAction()

与Action()类似，但直接写入响应流。

html 复制代码

@{ Html.RenderAction("Menu", "Navigation"); }

5. 其他实用方法

5.1 Html.Raw()

输出原始HTML，不进行HTML编码。

html 复制代码

@Html.Raw("<strong>加粗文本</strong>")

5.2 Html.Encode()

对字符串进行HTML编码。

html 复制代码

@Html.Encode("<script>alert('xss')</script>")

5.3 Html.AttributeEncode()

对属性值进行编码。

html 复制代码

<div title="@Html.AttributeEncode(Model.Tooltip)"></div>

5.4 Html.FormatValue()

格式化值。

html 复制代码

@Html.FormatValue(Model.Price, "{0:C}")

5.5 Html.EnableClientValidation() / Html.EnableUnobtrusiveJavaScript()

启用客户端验证和不显眼的JavaScript。

html 复制代码

@{
    Html.EnableClientValidation();
    Html.EnableUnobtrusiveJavaScript();
}

6. 自定义HTML辅助方法

你可以创建自己的HTML辅助方法扩展。

6.1 创建扩展方法

csharp 复制代码

public static class HtmlHelperExtensions
{
    public static MvcHtmlString SubmitButton(this HtmlHelper htmlHelper, string buttonText)
    {
        var builder = new TagBuilder("input");
        builder.MergeAttribute("type", "submit");
        builder.MergeAttribute("value", buttonText);
        builder.AddCssClass("btn btn-primary");
        return MvcHtmlString.Create(builder.ToString());
    }
}

6.2 在视图中使用

html 复制代码

@Html.SubmitButton("提交表单")

7. 高级用法

7.1 模板辅助方法

html 复制代码

@Html.DisplayForModel()  <!-- 显示整个模型 -->
@Html.EditorForModel()   <!-- 编辑整个模型 -->

7.2 使用模板

html 复制代码

@Html.DisplayFor(model => model, "CustomTemplate")

7.3 条件渲染

html 复制代码

@if (Html.HasRazorSyntax())
{
    <p>当前是Razor视图</p>
}

总结

@Html辅助方法提供了强大的功能来生成HTML元素并与模型交互。合理使用这些方法可以：

提高开发效率
增强代码可维护性
实现强类型绑定
自动处理验证和格式化
保持一致的UI风格

在实际开发中，推荐优先使用强类型的For方法（如TextBoxFor、LabelFor等），因为它们提供了编译时检查，减少了运行时错误的可能性。