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

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

1. 基础HTML辅助方法

1.1 Html.ActionLink()

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

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

参数说明：

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

1.2 Html.RouteLink()

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

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

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

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

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

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

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

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

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

生成<label>标签。

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

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

生成文本输入框。

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

2. 表单相关辅助方法

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

生成<form>标签。

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

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

2.2 Html.AntiForgeryToken()

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

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

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

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

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

2.4 Html.ValidationSummary()

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

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

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

生成下拉列表。

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

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

生成多选列表框。

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

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

生成复选框。

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

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

生成单选按钮。

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

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

生成密码输入框。

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

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

生成隐藏字段。

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

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

生成多行文本框。

@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.DisplayNameFor(model => model.Name)

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

显示属性的文本值。

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

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

获取属性的格式化值。

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

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

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

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

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

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

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

4. 部分视图和布局方法

4.1 Html.Partial()

渲染部分视图。

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

4.2 Html.RenderPartial()

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

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

4.3 Html.Action()

调用子动作并渲染结果。

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

4.4 Html.RenderAction()

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

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

5. 其他实用方法

5.1 Html.Raw()

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

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

5.2 Html.Encode()

对字符串进行HTML编码。

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

5.3 Html.AttributeEncode()

对属性值进行编码。

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

5.4 Html.FormatValue()

格式化值。

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

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

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

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

6. 自定义HTML辅助方法

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

6.1 创建扩展方法

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.SubmitButton("提交表单")

7. 高级用法

7.1 模板辅助方法

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

7.2 使用模板

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

7.3 条件渲染

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

总结

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

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

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