ASP.NET MVC 中 HTML 辅助方法和创建自定义 HTML 辅助方法的绝对初学者教程

Rahul Rajat Singh

4.74/5 (49投票s)

2014年6月18日

CPOL

4分钟阅读

298163

3204

在本文中，我们将尝试理解 HTML 辅助方法。我们还将了解如何实现自定义 HTML 辅助方法。

下载演示 - 799.8 KB

引言

在本文中，我们将尝试理解 HTML 辅助方法。我们还将了解如何实现自定义 HTML 辅助方法。

背景

来自 asp.net Web Forms 背景的人习惯于使用工具箱将 ASP.NET 服务器控件放在页面上。当我们使用 ASP.NET MVC 应用程序时，我们没有工具箱可以从其中拖放 HTML 控件到视图上。在 MVC 中，如果我们想创建一个视图，它应该包含 HTML 代码以指定标记。 MVC 初学者（特别是具有 Web Forms 背景的人）发现这有点麻烦。

ASP.NET MVC 团队一定已经预见到了这个问题，因此为了缓解这个问题，ASP.NET MVC 框架提供了一组 HTML 辅助方法。这些辅助方法是简单的函数，允许开发人员指定视图上所需的 HTML 类型。这在 C# 中完成。最终的 HTML 将由这些函数在运行时生成，即我们不必担心生成的 HTML 的正确性。

使用代码

内置 HTML 辅助方法

让我们看看如何使用各种 HTML 辅助方法。让我们尝试创建一个简单的联系我们表单，该表单将向用户询问他的姓名、电子邮件地址和他的查询。我们可以很容易地用简单的 HTML 设计这个表单，让我们看看我们如何利用 HTML 辅助方法来实现同样的目标。

在上面的截图，我们可以看到 HTML form 是使用 HTML 辅助函数创建的，页面上的所有 labels 都是使用辅助函数创建的，并且所有 textboxes 也是使用辅助函数创建的。现在，如果我们运行该应用程序并尝试查看结果

如果我们想控制生成的 HTML 的 HTML 属性，那么我们可以使用辅助函数的重载版本。假设在上面的案例中，我们想为所有标签提供 ID 。

如果我们再次运行该应用程序并尝试查看生成的 HTML，我们可以看到我们指定的 ID 值。

以下 HTML 辅助方法内置于 ASP.NET MVC 框架中

Html.BeginForm
Html.EndForm
Html.TextBox
Html.TextArea
Html.Password
Html.Hidden
Html.CheckBox
Html.RadioButton
Html.DropDownList
Html.ListBox

用于强类型视图的 HTML 辅助方法

如果我们正在创建一个强类型视图，那么也可以将 HTML 辅助方法与模型类一起使用。让我们为联系我们页面创建一个 model

public class ContactInfo
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Query { get; set; }
}

现在让我们使用 Html 辅助方法为联系我们页面创建一个强类型视图。

这些辅助方法基于模型属性创建输出 HTML 元素。用于创建 HTML 的属性将作为 lambda 表达式传递给该方法。也可以使用这些辅助方法指定 id、name 和各种其他 HTML 属性。以下 HTML 辅助方法可用于强类型视图

Html.TextBoxFor
Html.TextAreaFor
Html.PasswordFor
Html.HiddenFor
Html.CheckBoxFor
Html.RadioButtonFor
Html.DropDownListFor
Html.ListBoxFor

创建自定义 HTML 辅助方法

如果我们想创建自己的 HTML 辅助方法，那么也可以很容易地完成。有很多方法可以创建自定义辅助方法。让我们看看所有可能的方法。

创建静态方法
编写扩展方法
使用 @helper (仅限 Razor)

让我们尝试创建一个简单的 HTML 辅助方法，它将创建一个标记的 HTML 标签。 HTML5 规范中有一个新的 mark 标签。让我们尝试创建一个标签，该标签创建一个标签，然后使用 HTML5 mark 标签对其进行标记。

让我们尝试使用上述所有方法来实现这一点。

创建静态方法

在这种方法中，我们可以简单地创建一个带有静态方法的静态类，该方法将返回要在呈现时使用的 HTML 字符串。

namespace HTMLHelpersDemo.Helpers
{
     public static class MyHTMLHelpers
     {
          public static IHtmlString LabelWithMark(string content)
          {
              string htmlString = String.Format("<label><mark>{0}</mark></label>", content);
              return new HtmlString(htmlString);
          }
    }
}

编写扩展方法

在这种方法中，我们将为内置的 html 辅助类编写一个简单的扩展方法。这将使我们能够使用相同的 Html 对象来使用我们的自定义辅助方法。

public static class MyExtensionMethods
{
    public static IHtmlString LabelWithMark(this HtmlHelper helper, string content)
    {
        string htmlString = String.Format("<label><mark>{0}</mark></label>", content);
        return new HtmlString(htmlString);
    }
}

使用 @helper (仅限 Razor)

此方法特定于 Razor 视图引擎。让我们看看如何完成。我们需要在视图本身中编写此方法。

@helper LabelWithMarkRazor(string content)
{
    <label><mark>@content</mark></label>
}

注意： 默认情况下，这些辅助方法将在它们定义的视图中可用。如果我们想在多个视图中使用 Razor 创建的辅助方法，那么我们必须将它们全部放在一个视图中，并将该视图文件放在 App_Code 目录中。这样，它们就可以在所有视图中使用。

现在我们有三种不同的方式编写相同的 html 辅助方法，让我们创建一个简单的视图并尝试使用这些辅助方法。

让我们运行该应用程序并查看结果

关注点

在本文中，我们研究了 HTML 辅助方法。我们还研究了如何创建自定义 HTML 辅助方法。本文是从初学者的角度撰写的。我希望这有帮助。

历史

2014 年 6 月 18 日：第一个版本