如何将标签助手的内容放入标签中?
How can I put the contents of a tag helper inside the tag?
我有一个名为 <alert>
的标签助手,它呈现带有一些文本内容的样式 <div>
。
我现在这样调用标签助手:
<alert type="danger" text="Confirm deletion of item"></alert>
如何更改标签助手以便我可以这样调用它:
<alert type="danger">Confirm deletion of item</alert>
我想这样做的原因是我希望能够轻松地将 HTML 代码作为内容。 IE。列表、表格等
这是标签助手的代码:
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());
}
}
在 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>
结果是这样的:
我有一个名为 <alert>
的标签助手,它呈现带有一些文本内容的样式 <div>
。
我现在这样调用标签助手:
<alert type="danger" text="Confirm deletion of item"></alert>
如何更改标签助手以便我可以这样调用它:
<alert type="danger">Confirm deletion of item</alert>
我想这样做的原因是我希望能够轻松地将 HTML 代码作为内容。 IE。列表、表格等
这是标签助手的代码:
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());
}
}
在 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>
结果是这样的: