2

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

首先是我的目标 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 />

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

4

1 回答 1

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;

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

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

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

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

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

于 2016-04-23T10:28:31.030 回答