TagHelper отображается неправильно в ASP.NET Core 1.1

У меня есть помощник по тегам, который я создал следующим образом:

public class GooglePlusOneTagHelper : TagHelper {
   [ViewContext]
    public ViewContext ViewContext { get; set; }
    public string Size { get; set; }
    public string Annotation { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output) {
        output.TagMode = TagMode.StartTagAndEndTag;
        output.TagName = "div";

        var request = ViewContext.HttpContext.Request;
        var absoluteUri = string.Concat(
            request.Scheme,
            "://",
            request.Host.ToUriComponent(),
            request.PathBase.ToUriComponent(),
            request.Path.ToUriComponent(),
            request.QueryString.ToUriComponent());

        output.Attributes.SetAttribute("class", "g-plusone");

        string size = Size.ToLower().Trim() ?? "";
        if (size == "small" || size == "medium" || size == "tall")
            output.Attributes.SetAttribute("data-size", size);

        string annotation = Annotation.ToLower().Trim() ?? "";
        if (annotation == "none" || annotation == "inline")
            output.Attributes.SetAttribute("data-annotation", annotation);

        output.Attributes.SetAttribute("data-href", absoluteUri);
    }
}

И когда я помещаю этот код в представление:

<google-plusone size="medium" annotation="bubble"  />

Он отображается в представлении следующим образом:

<google-plusone size="medium" annotation="bubble"  >

Итак, помощник тега почему-то не обрабатывает его, поскольку он действительно должен выводить DIV. Кроме того, он превращает мой необработанный тег из самозакрывающегося в открытый и никогда не закрывающийся!


person Lord of Scripts    schedule 08.06.2017    source источник
comment
Думаю, я вспомнил, что вы не можете использовать для этого пустые / самозакрывающиеся теги (если вы хотите добавить контент в тег через taghelper). Попробуйте <google-plusone size="medium" annotation="bubble"></google-plusone>   -  person Tseng    schedule 09.06.2017
comment
Его нельзя использовать для рендеринга DIV с пустым содержимым, НО с атрибутами? @Tseng   -  person Lord of Scripts    schedule 12.06.2017
comment
См. этот ответ и связанные с ним проблемы с GitHub, когда контент не будет правильно отображаться с самозакрывающимися тегами (т. Е. <span asp-validation-for="UserName" class="text-danger" /> выиграл Сообщение проверки не отображается, но <<span asp-validation-for="UserName" class="text-danger"></span> будет, обратите внимание на закрытие </span>.   -  person Tseng    schedule 12.06.2017
comment
По сути, практическое правило заключается в том, что если вы хотите отображать контент внутри тега, он не должен быть самозакрывающимся <div asp-something/> по сравнению с <div asp-something></div>.   -  person Tseng    schedule 12.06.2017
comment
но я не визуализирую контент, он должен отображаться как ‹div att = xx att1 = yyy› ‹/div›   -  person Lord of Scripts    schedule 12.06.2017
comment
Это содержимое <google-plusone></google-plusone>, с той лишь разницей, что исходный тег будет отброшен и будет отображено только содержимое. Просто добавьте закрывающий тег и убедитесь, что вы добавили [HtmlTargetElement("google-plusone")], как указал Анурадж в своем ответе. Важным моментом является то, что вспомогательные теги / теги тегов, содержащие атрибуты, которые что-то делают с содержимым , не являются самозакрывающимися. В какой-то момент вы вызовете output.Write(...) в своем коде, это тот момент, когда вы пишете содержимое тегов. Но если он закрыт, вы не можете создать недопустимый html   -  person Tseng    schedule 12.06.2017


Ответы (2)


Похоже, вспомогательная функция тегов не отображается должным образом. Вот то, что вы можете проверить.

  1. Надеюсь, вы добавили @addTagHelper *, <Your Assembly Name> в свой файл _ViewImports.cshtml. Если нет, вам нужно его добавить.
  2. Включите ссылку на Microsoft.AspNetCore.Mvc.TagHelpers в файл проекта.
  3. Добавьте атрибут [HtmlTargetElement("google-plusone")] в свой помощник по тегам.

Вот вывод HTML для меня

<div class="g-plus" data-action="share" data-href="http://localhost:5000/"></div>

А вот скриншот.  Помощник по тегам Google Plus

person Anuraj    schedule 09.06.2017
comment
Странно, я могу использовать все другие помощники тегов, определенные в той же внешней DLL, но этот просто не работает, и я сделал все вышеперечисленное. - person Lord of Scripts; 12.06.2017

Помощники тегов переводят имена и свойства классов C # на основе Паскаля и свойства помощников тегов в нижний регистр кебаба.

Следовательно, для вашего GooglePlusOneTagHelper в Razor вы будете писать <google-plus-one />, а не <google-plusone />.

Если вы хотите использовать <google-plusone />, добавьте атрибут [HtmlTargetElement("google-plusone")] в свой помощник по тегам, как предлагает @Anuraj.

person David Liang    schedule 07.10.2017