为什么要使用 Taghelper (标记助手)

为什么要使用 Taghelper (标记助手)

在本视频中，我们将讨论为什么我们应该使用 Taghelper 而不是手写相同的 HTML 代码。
让我们通过一个例子来理解使用 Taghelper 的优势。
假设我们想要查看特定的学生详细信息。所以我们想要生成以下超链接。
学生 id 为 5 的详细信息。

/home/details/5

我们可以手动编写，如下所示：

<a href="/home/details/@student.Id">查看</a>

或者使用 A 标签的 Taghelper：

<a asp-controller="home" asp-action="details" asp-route-id="@student.Id"
  >查看</a
>

使用 Taghelper 的优势

Taghelper 是根据应用程序路由模板生成的链接。 这意味着如果我们稍后更改路由模板，Taghelper 生成的链接将自动反映，针对路由模板所做的更改，让生成的链接正常工作。

而如果我们手动硬编码了 URL，当应用程序路由模板发生变化时，我们必须在很多地方更改代码。一点都不效率。

通过一个例子理解这一点

app.UseMvc(routes =>
{
routes.MapRoute("default", "{controller=Home}/{action=Index}/{id?}");
});

以下代码不使用 Taghelper。我们通过对 URL 路径进行硬编码来完成的。

<a href="/home/details/@student.Id">查看</a>

以下代码是使用 <a>的 Taghelper 完成的.

<a asp-controller="home" asp-action="details"
    asp-route-id="@student.Id">查看</a>

请注意，我们没有针对 URL 路径来进行硬编码。我们只指定控制器和操作方法的的名称以及路由参数及其值。在服务器上执行 Taghelper 时，它们会查看路由模板并自动生成正确的 URL。
上述两种方式都会生成正确的 URL 路径(/home/details/5)，它适用于当前路由模板({controller=Home}/{action=Index}/{id?})
现在让我们改变路由模板，参考以下代码。
请注意，在 URL 中我们有字符串“pragim”

app.UseMvc(routes =>
{
    routes.MapRoute("default", "pragim/{controller=Home}/{action=Index}/{id?}");
});

使用 Taghelper 生成的代码是正确的链接:

<a href="/pragim/home/details/1">查看</a>

其中未使用 Taghelper 的代码则没有变化。
请注意，缺少 URL 路径“/ pragim”。

<a href="/home/details/1">查看</a>

我们还有其他 Taghelper，可以生成表格。将此表单发回服务器时，将自动处理发布的值并显示相关的验证消息。如果没有这些 Taghelper，我们将不得不编写大量自定义代码来实现相同的功能。

如果此刻觉得没有多大意义，请不要担心。 我们会在后面的创建学生信息的时候，讨论表单的 taghelper。

---

net core 正确自定义TagHelper

自定义一个 友情链接 的tag

创建一个数据源

namespace NetDream.Models
{
    public class FriendLinkModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Url { get; set; }
        public static List<FriendLinkModel> All()
        {
            var data = new List<FriendLinkModel>();
            data.Add(new FriendLinkModel()
            {
                Name = "ZoDream",
                Url = "https://zodream.cn",
            });
            return data;
        }
    }
}

定义 TagHelper

namespace NetDream.Base.TagHelpers
{
    public class FriendLinkTagHelper : TagHelper
    {
        public string Title = "友情链接";
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "div";
            output.Attributes.Add("class", "friend-link");
            var html = new StringBuilder();
            html.AppendFormat("<div>{0}</div><div>", Title);
            var items = FriendLinkModel.All();
            foreach (var item in items)
            {
                html.AppendFormat("<a href=\"{0}\" target=\"_blank\" rel=\"noopener noreferrer\">{1}</a>", item.Url, item.Name);
            }
            html.Append("</div>");
            output.Content.SetHtmlContent(html.ToString());
        }
    }
}

使用

先在 _ViewImports.cshtml 添加以下代码

@addTagHelper *, netdream

注意 netdream 是本项目的程序集名称，并不是命名空间

没看源码，大致猜测这个是动态引用的即使用时临时检索 程序的dll 引入tagHelper

程序集名称查看方法：

右键项目-> 属性 -> 应用程序 -> 程序集名称(N):

然后在 Home.cshtml 使用

<friend-link title="友情链接"></friend-link>

最终就会输出友情链接了

---

自定义元素的TagHelper

如果我们要为自定义元素定义TagHelper，则我们要符合约定规范，示例代码如下：

public class WebsiteInformationTagHelper : TagHelper
{
    public WebsiteContext Info { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "section";
        output.PostContent.SetContent(string.Format(
            "<p><strong>Version:</strong> {0}</p>" + Environment.NewLine +
            "<p><strong>Copyright Year:</strong> {1}</p>" + Environment.NewLine +
            "<p><strong>Approved:</strong> {2}</p>" + Environment.NewLine +
            "<p><strong>Number of tags to show:</strong> {3}</p>" + Environment.NewLine,
            Info.Version.ToString(),
            Info.CopyrightYear.ToString(),
            Info.Approved.ToString(),
            Info.TagsToShow.ToString()));
        output.SelfClosing = false;
    }
}

则使用的时候，我们需要使用website-information标签，并将info属性赋值一个强类型的值，示例如下：

<website-information info="new WebsiteContext {
                                Version = new Version(1, 1),
                                CopyrightYear = 1990,
                                Approved = true,
                                TagsToShow = 30 }"/>

其渲染结果，则是渲染成一个包含4个p元素的section元素。

---

Form tag helpers 提交学生信息

在我们之前的系列视频中，我们讨论了 A 标签，Img 和 environment 的 taghelper 。在本视频中，我们将讨论 ASP.NET Core 中的 Form Tag Helpers，它们可以帮助我们创建表单。

场景描述

我们使用以下常用 taghelper 在 ASP.NET Core 中创建表单:

• Form Tag Helper
• Label Tag Helper
• Input Tag Helper
• Select Tag Helper
• Textarea Tag Helpe

我们还有 Validation Tag Helper。我们将在即将发布的视频中讨论表单验证和模型绑定。

在本视频结束时，我们希望使用 Form Tag Helper 创建表单，并使用 Bootstrap 4 对其进行样式设置。完成“创建学生信息”如下图所示。

Form Tag Helper

要创建表单，我们使用< form > taghelper，
需要注意的是，我们使用 asp-controller 和 asp-action taghelper。这两个 taghelper 指定控制器和在提交表单时必须将表单数据发布到指定的操作方法上。我们希望在提交表单时发出 POST请求，因此我们将 method 属性设置为post

<form asp-controller="home" asp-action="create" method="post"></form>

在客户端浏览器上呈现表单时，上面的代码会生成以下 HTML。正如您在提交表单时从生成的 HTML 中看到的那样，它将被发布到 HomeController 的index（）方法中。

<form method="post" action="/home/create"></form>

请注意：默认情况下，提交表单时，它将发布到当前页面表单的控制器的操作方法中。所以这意味着，即使我们没有使用 asp-controller 和asp-action taghelper 指定控制器和操作方法，表单仍将被发布到 HomeController 的 index（）方法中。

Input Tag Helper

Input Tag Helper 将 HTML <input>元素绑定到 Razor 视图中的模型表达式。

在我们的例子中，我们想要一个表单来创建一个新学生。因此，我们的 Create.cshtml 视图的模型是 Student 类。我们需要使用 model 指令。

@model Student

为了能够获取学生姓名，我们需要一个文本框。我们希望文本框绑定到 Student 模型类的 Name 属性。我们通过使用 input tag helper 的asp-for属性将其值设置为 Student 模型类的 Name 属性。
请注意，我们会获得智能提示。如果我们在 Student 类上将属性名称表单 Name 更改为 FullName，并且我们不更改分配给 TagHelper 的值，则会出现编译器错误。

<input asp-for="Name" />

上面的代码,会生成一个带有id 和 name 属性的 input 元素。请注意，它们的值均为 Name 。

<input type="text" id="Name" name="Name" value="" />

Name 属性是必需的，它是用来在提交表单时,将输入元素的值映射到模型类的对应属性。这是通过 ASP.NET Core 中称为模型绑定的过程完成的。我们将在下一个视频中讨论模型绑定。

Label Tag Helper

Label Tag Helper 会生成带有 for 属性的标签。属性链接与它相关的输入元素的标签进行绑定。请考虑以下示例。

<label asp-for="Name"></label> <input asp-for="Name" />

上面的代码生成以下 HTML。

<label for="Name">Name</label>
<input type="text" id="Name" name="Name" value="" />

Label 标签链接到 input 元素，因为这两种标签的属性和输入元素的 id 属性具有相同的值（名称）。所以这意味着当我们点击 Label 标签时，相应的 input 元素会收到焦点。

同样，以下代码生成 Label 和 input 入元素以获取学生的电子邮件。

<label asp-for="Email"></label> <input asp-for="Email" />

Select Tag Helper

生成 select 标签及其关联的选项元素。在我们的例子中，我们希望 select 显示班级列表。
最后，我们需要一个 Select 标签和一个带有班级选项列表的选择元素，如下所示。

<label for="ClassName">班级</label>

<select id="ClassName" name="ClassName">
  <option value="0">一年级</option>
  <option value="1">二年级</option>
  <option value="2">三年级</option>
  <option value="3">四年级</option>
</select>

班级的 select 元素的选项内容可以像上面的示例中那样进行硬编码，也可以来自枚举或数据库表。我们还没有连接数据库。因此，对于我们的示例，让我们从枚举中获取选项。

我们在 Models 文件夹中创建一个 ClassNameEnum.cs 枚举类。

namespace EmployeeManagement.Models
{
    public enum Dept
    {
        None,
        HR,
        Payroll,
        IT
    }
}

修改Models文件夹中 Employee.cs 文件中的 Employee 类

Department 属性数据类型为 Dept enum。