MVC 6 .Net Core1 为李克特量表创建自定义标签助手

Question

我正在尝试使用 .Net Core RC1 为 MVC 6 创建标签助手。我找到了一些不错的sources，但不是很接近，this 是我找到的最接近的，并采用了我认为创建现有代码所需的元素：

首先是我的目标 HTML：

<span class="form-control">
                Highly Disagree
                <input type="radio" name="MakingSense" value=1 />
                <input type="radio" name="MakingSense" value=2 />
                <input type="radio" name="MakingSense" value=3 />
                <input type="radio" name="MakingSense" value=4 />
                <input type="radio" name="MakingSense" value=5 />
                Highly Agree
            </span>

现在我只是想显示一个输入标签。如果我能弄清楚，我将添加一个循环来获取其他人。这是我的 TagHelper

[HtmlTargetElement("input", Attributes = LikertForAttributeName)]
public class LikertTagHelper : TagHelper
{
    private const string LikertForAttributeName = "likert-for";

    [HtmlAttributeName(LikertForAttributeName)]
    public string ModelField { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        var content = new StringBuilder();
        var input = new TagBuilder("input");
        input.MergeAttribute("type", "radio");
        input.MergeAttribute("name", ModelField);
        input.MergeAttribute("value", "1");
        content.AppendLine(input.ToString());
        output.Content.SetContent(content.ToString());
        output.PreContent.SetHtmlContent("<span class=\"form-control\"");
        output.PostContent.SetHtmlContent("</span>");
    }

}

这是我的剃须刀 cshtml：

<input likert-for="CharacterUnderstanding" />

但是，我只得到这个作为我的 html 输出：

<input />

所以它正在拾取标签并处理它，但不像我预期的那样。在我出错的地方提供帮助将不胜感激。

Answer 1

您的标签助手起点是一个输入标签，因此content 开始成为一个自闭合输入标签。

你要做的第一件事就是把它变成一个span标签，例如：

//Replace initial output (an input tag) with a span
var outerTag = new TagBuilder("span");
outerTag.AddCssClass("form-control");
output.MergeAttributes(outerTag);
output.TagName = outerTag.TagName;
output.TagMode = TagMode.StartTagAndEndTag;

现在由于输出是一个跨度标签，您可以开始添加内部内容：

• 非常同意、非常不同意标签可以添加为前/后内容（仍在范围内）：

  //Add Pre/Post texts
  output.PreContent.SetHtmlContent("Highly Disagree");
  output.PostContent.SetHtmlContent("Highly Agree");
  

• 单选按钮可以附加到 span 的内容中：

  //Add the radio buttons
  for(var x =0; x<5; x++)
  {
      var input = new TagBuilder("input");
      input.MergeAttribute("type", "radio");
      input.MergeAttribute("name", ModelField);
      input.MergeAttribute("value", x.ToString());
      output.Content.Append(input);
  }
  

有了这个标签助手，剃刀视图中的以下行：

<input likert-for="CharacterUnderstanding" />

呈现为：

<span class="form-control">
    Highly Disagree
    <input name="CharacterUnderstanding" type="radio" value="0">
    <input name="CharacterUnderstanding" type="radio" value="1">
    <input name="CharacterUnderstanding" type="radio" value="2">
    <input name="CharacterUnderstanding" type="radio" value="3">
    <input name="CharacterUnderstanding" type="radio" value="4">
    Highly Agree
</span>

附带说明，在使用接受字符串的重载添加内容时要小心。在您的原始代码中，content.AppendLine(input.ToString()); 行实际上是附加 Microsoft.AspNet.Mvc.Rendering.TagBuilder 而不是标签生成器内容。