c# - 如何将标签助手的内容放入标签中？

Question

我有一个名为的标签助手<alert>，它呈现<div>带有一些文本内容的样式。

我现在这样调用标签助手：

<alert type="danger" text="Confirm deletion of item"></alert>

如何更改标签助手以便我可以这样调用它：

<alert type="danger">Confirm deletion of item</alert>

我想这样做的原因是我希望能够轻松地将 HTML 代码作为内容。即列表、表格等。

这是标签助手的代码：

public class AlertTagHelper : TagHelper
{
    /// <summary>
    /// primary (default), secondary, info, warning, danger
    /// </summary>
    public string Type { get; set; } = "primary";

    /// <summary>
    /// contents
    /// </summary>
    public string Text { get; set; } = "";

    /// <summary>
    /// true (default) or false
    /// </summary>
    public string DisplayIcon { get; set; } = "true";

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        bool displayIcon = DisplayIcon.ToLower() == "true";
        string icon = (Type.ToLower()) switch
        {
            "primary" => "fa-glasses",
            "secondary" => "fa-glasses",
            "info" => "fa-info-circle",
            "success" => "fa-thumbs-up",
            "warning" => "fa-exclamation-circle",
            "danger" => "fa-exclamation-triangle",
            _ => "fa-glasses",
        };
        output.TagMode = TagMode.StartTagAndEndTag;
        output.SuppressOutput(); // Produce the <div>-tag without being encapsulated by <alert></alert>.
        var sb = new StringBuilder();
        sb.AppendFormat($@"<div class=""alert-{Type} p-3 mb-3 border border-{Type} rounded display-block overflow-auto"">");
        if (displayIcon)
        { 
            sb.AppendFormat($@"<span class=""fas {icon} fa-fw fa-3x float-left mr-3""></span>");
        }
        sb.AppendFormat(Text);
        sb.AppendFormat("</div>");
        output.PreContent.SetHtmlContent(sb.ToString());
    }
}

标签： c#asp.net-coretag-helpers

Answer 1

在 Custom Tag helper Process 方法中，您可以使用以下代码来获取 Custom tag innerText 值：

var innerText = output.GetChildContentAsync().Result.GetContent();

如下修改代码后：

public class AlertTagHelper: TagHelper
{    /// <summary>
     /// primary (default), secondary, info, warning, danger
     /// </summary>
    public string Type { get; set; } = "primary";

    /// <summary>
    /// contents
    /// </summary>
    public string Text { get; set; } = "";

    /// <summary>
    /// true (default) or false
    /// </summary>
    public string DisplayIcon { get; set; } = "true";

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        bool displayIcon = DisplayIcon.ToLower() == "true";

        string icon = (Type.ToLower()) switch
        {
            "primary" => "fa-glasses",
            "secondary" => "fa-glasses",
            "info" => "fa-info-circle",
            "success" => "fa-thumbs-up",
            "warning" => "fa-exclamation-circle",
            "danger" => "fa-exclamation-triangle",
            _ => "fa-glasses",
        };
        output.TagMode = TagMode.StartTagAndEndTag;
        output.SuppressOutput(); // Produce the <div>-tag without being encapsulated by <alert></alert>.
        var sb = new StringBuilder();
        sb.AppendFormat($@"<div class=""alert-{Type} p-3 mb-3 border border-{Type} rounded display-block overflow-auto"">");
        if (displayIcon)
        {
            sb.AppendFormat($@"<span class=""fas {icon} fa-fw fa-3x float-left mr-3""></span>");
        }


        var innerText = output.GetChildContentAsync().Result.GetContent();
        if (string.IsNullOrEmpty(Text))
        { 
            sb.AppendFormat(innerText);
        }
        else
        {
            sb.AppendFormat(Text);
        }
        sb.AppendFormat("</div>");
        output.PreContent.SetHtmlContent(sb.ToString());
    }
}

查看页面代码：

<alert type="danger" text="Confirm deletion of item"></alert>

<alert type="danger">inner Text: Confirm deletion of item</alert>

结果是这样的：