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

Question

我正在尝试使用 .Net Core RC1 为 MVC 6 创建标签助手。我发现了一些好的 sources but not something super close, 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 开始成为一个自闭合输入标签。

您要做的第一件事就是将其转换为跨度标记，例如：

//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;

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

可以添加非常同意、非常不同意标签作为pre/post内容（还在里面跨度）：

//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);
}

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

<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 而不是标签生成器内容。

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

MVC 6 .Net Core1 Create Custom tag helper for Likert Scale

c#

asp.net-core-mvc

tag-helpers