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

Question

道歉,我在asp.net mvc中表现得不是很好,我想承认.我刚刚从这个网址上看到了一个很好的写入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.

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

Answer 1

到目前为止,我看到的最重要的改进是它保证了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形式的更新添加的.即使现在添加自定义属性充其量只是kludgey.

@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需要修复的问题.希望标记帮助程序的实现足够完整,以便将来可以避免它们.

Answer 2

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

Answer 3

我想到了一些事情:

1. 正如@ChrisWalter所指出的,这些标记帮助程序为HTML标记提供了开放/封闭质量.您可以扩展 HTML元素,而不仅仅是让您编写常见HTML模式的扩展方法.这使您可以为每个组件挑选和混合多个扩展,而不必在它们之间进行选择.

2. 对于需要将内部HTML作为参数提供的元素,HTML Helper往往不能很好地工作.他们提出了一个聪明的模式,所以你可以说:

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

   但没有任何关于BeginForm()这会迫使你把它放在一个using声明中,并没有什么可以阻止你使用不正确的HTML结构.(<input>技术上不允许直接在<form>标签内.)

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