📅 最后修改于: 2023-12-03 15:37:24.687000 🧑 作者: Mango
在 MVC 中，HTML Helper 控件是用来生成 HTML 元素的工具类，可以方便地将表单、链接、图像和其他 HTML 元素嵌入到视图中。在这些控件中，我们可以设置 HTML 属性和 CSS 样式来实现更加灵活的页面布局。本文将分享如何在 MVC 中通过 HTML Helper 控件设置 HTML 属性和 CSS 样式。
在创建 HTML 元素的过程中，我们可以通过 htmlAttributes 参数设置 HTML 属性。例如，在使用 Html.TextBoxFor 创建文本框时，我们可以通过设置 htmlAttributes 参数设置该文本框的 class、id、style 等 HTML 属性。
@Html.TextBoxFor(model => model.Username, new { @class = "form-control", id = "username", style="width: 300px;" })
上述代码中，@class、id、style 是 HTML 属性的名称，"form-control"、"username"、"width: 300px;" 则是对应属性的值。需要注意的是，在 Razor 视图中，由于 class 是 C# 中的关键词，所以需要在前面添加 @ 符号来转义。
如果我们需要在多个控件中共用同一个属性，可以定义一个 htmlAttributes 对象，将对应属性添加到该对象中。例如，我们想在多个文本框中应用相同的 class，可以这样做：
@{
var textboxAttrs = new { @class = "form-control" };
}
@Html.TextBoxFor(model => model.Username, textboxAttrs)
@Html.PasswordFor(model => model.Password, textboxAttrs)
@Html.TextBoxFor(model => model.Email, textboxAttrs)
上述代码中，我们创建了 textboxAttrs 对象，将 @class 属性设置为 "form-control"。然后，在使用 Html.TextBoxFor、Html.PasswordFor、Html.TextBoxFor 创建文本框时，都将该对象传入 htmlAttributes 参数中，从而实现在多个控件中共用 class 属性。
在 HTML 元素中，我们可以使用 style 属性设置 CSS 样式。例如，在创建一个 div 元素时，我们可以这样设置样式：
<div style="background-color: #f5f5f5; font-size: 16px; padding: 10px;">
@Html.DisplayFor(model => model.Content)
</div>
上述代码中，我们设置了 div 元素的背景色、字体大小和内边距等样式。需要注意的是，在 Razor 视图中，style 属性的值需要用双引号括起来。
如果我们需要在整个应用程序中应用相同的 CSS 样式，可以使用外部样式表。在 MVC 中，我们可以在 _Layout.cshtml 文件中定义 link 标签引用外部样式表文件。例如：
<!DOCTYPE html>
<html>
<head>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" />
<!-- ... -->
</head>
<body>
@RenderBody()
</body>
</html>
上述代码中，我们通过 @Url.Content 方法生成了 Site.css 文件的路径，并在 link 标签中引用该文件。然后，在 Site.css 文件中编写相应的 CSS 样式即可。
在 MVC 中，我们可以通过 HTML Helper 控件设置 HTML 属性和 CSS 样式，来实现更加灵活的页面布局。本文介绍了如何使用 HTML Helper 控件的 htmlAttributes 参数来设置 HTML 属性，以及如何在 HTML 元素中使用 style 属性设置 CSS 样式。此外，还介绍了如何使用外部样式表来应用全局的 CSS 样式。