在ASP.Net MVC 6中使用Tag Helpers有什么好处

时间:2015-03-12 09:22:58

标签: asp.net-core asp.net-core-mvc

道歉,我在asp.net mvc中表现得不是很好,我想承认。我刚刚从this url看到了一篇很好的asp.net 5新功能。

从那里我听说了一个名为Tag Helpers in ASP.Net MVC 6的词,我看到有人在开发人员创建表单之前说过:

@model MyProject.Models.Product

@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(m => p.Name, "Name:")
        @Html.TextBoxFor(m => p.Name)
    </div>
    <input type="submit" value="Create" />
}

现在人们可以通过以下方式使用标记助手编写相同的代码

@model MyProject.Models.Product
@addtaghelper "Microsoft.AspNet.Mvc.TagHelpers"

<form asp-controller="Products" asp-action="Create" method="post">
    <div>
        <label asp-for="Name">Name:</label>
        <input asp-for="Name" />
    </div>

    <input type="submit" value="Save" />
</form>

他们使用一些名为asp-controller, asp-for etc的新语法,但它会做什么?使用这种新语法asp-controller, asp-for etc将如何以及为什么人们会受益。

所以请一些人帮助我理解这个新的标签帮助器概念以及它如何使开发人员的生活更轻松。感谢。

3 个答案:

答案 0 :(得分:36)

到目前为止,我所看到的最重要的改进是它保证对HTML元素的控制。虽然方便,MVC使用的Html帮助程序在您尝试执行它们未构建的内容时会产生问题。

在MVC5中使用TextBox时可以看到一个简单的例子:

 @Html.TextBoxFor(m => p.Name)

生成的HTML标记如下所示:

<input class="form-control" id="Name" name="Name" type="text" value="">

美好而简单。但是,如果要添加占位符属性,该怎么办?如果你想使用bootstrap的验证状态怎么办?如果你有一些需要自定义属性的第三方超酷javascript库怎么办?在 MVC5的初始版本中,这些都不可能。虽然它们最终是通过更新以 htmlAttributes 的形式添加的。即使现在添加自定义属性也是最好的。

@Html.TextBoxFor(m => p.Name, 
    new {@class="form-control has-error", placeholder="Enter Name", 
    superCoolFeature="Do something cool"})

虽然您可能认为这仍然是直接HTML的代码,但它不再是一个显着的优势。更糟糕的是,这个解决方案仍然没有涵盖相当普遍的属性中的破折号。如果您需要它们,您将遇到ActionLink htmlAttributes

等变通方法

我已经解决了使用自定义编辑器解决这些缺陷的问题,并尝试构建自己的TextBox控件。很明显,替换包含的TextBox模板需要大量的工作。更糟糕的是,您的模板必须知道您要添加的任何扩展才能使用它们。

似乎将Bootstrap和其他第三方工具包含在MVC中使得当前设计更加明显的是扩展HTML需要修复的问题。希望标签帮助程序的实现足够完善,以便将来可以避免使用它们。

答案 1 :(得分:11)

更不用说,您的网络设计师 将拥有可编辑的真实HTML标记,以便他们识别重新设计您的网页。设计师不应该成为编码员,并且足以让这些敏锐的人跟上,研究HTML5和CSS3规范的移动目标。

答案 2 :(得分:8)

有些事情会浮现在脑海中:

  1. 正如@ChrisWalter所指出的,这些标记帮助程序为HTML标记提供了开放/封闭质量。您可以扩展 HTML元素,而不仅仅是让您编写常见HTML模式的扩展方法。这使您可以为每个组件选择并混合多个扩展,而不必在它们之间进行选择。
  2. 对于需要提供内部HTML作为参数的元素,HTML Helpers往往不能很好地工作。他们提出了一个聪明的模式,所以你可以说:

    @using (Html.BeginForm(...)){
    {
        <input ... />
    }
    

    BeginForm()没有任何内容会强迫您将其置于using语句中,并且没有什么可以阻止您使用不正确的HTML结构。 (<input>技术上isn't allowed直接位于<form>标记内。)

  3. 这为HTML5的Web组件世界提供了一个非常简单的过渡踏脚石。您今天为jQuery或Bootstrap编写的组件可以在几年内作为Angular 2或Polymer组件更有意义。使用HTML语法可以按照您希望它在Web组件上查看的方式编写HTML,并将其自动转换为现在必须采用的结构(或者特定浏览器,以后)。