如何在 HtmlTargetElement（标签助手）中使用属性 属性 来定位一个或另一个标签？

Question

我正在努力理解如何在 HtmlTargetElement class 属性中显示分配给属性的字符串。我有几个问题，我认为它们会突出我的问题和理解。

假设我们只想在 make 以 gm 开头并且有任何模型时激活一个 Html 元素。我认为有一种方法可以使用单个 class 属性（而不是多个）来做到这一点。

我正在尝试以下操作，但它只是一个 SWAG，无法正常工作。我很感激提示，这样我就可以理解文档中说此属性可以采用 "query selector like string".

的含义

标签助手Class

[HtmlTargetElement("auto-price", Attributes = "[make^=gm][model]")]
public class AutoPriceTagHelper : TagHelper
{

和剃刀标记

<auto-price make="gm" model="volt" ></auto-price>
<auto-price make="ford" model="mustang"></auto-price>
<auto-price make="ford" ></auto-price>
<auto-price test></auto-price>

Answer 1

它确实像您期望的那样工作。您唯一缺少的一点是 Attributes 是逗号分隔的属性列表 因此当指定多个属性时，您需要像 Attributes = "[make^=gm],[model]" 中那样使用逗号。

因此，您的助手的以下模拟版本：

[HtmlTargetElement("auto-price", Attributes = "[make^=gm],[model]")]
public class AutoPriceTagHelper : TagHelper
{
    public string Make { get; set; }
    public string Model { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "ul";
        output.Content.SetHtmlContent(
$@"<li>Make: {Make}</li>
<li>Model: {Model}</li>");
    }
}

使用以下剃须刀标记：

<auto-price make="gm" model="volt" ></auto-price>
<auto-price make="ford" model="mustang"></auto-price>
<auto-price make="gmfoo" model="the foo"></auto-price>
<auto-price make="gmbar"></auto-price>
<auto-price test></auto-price>

将仅匹配第一次和第三次出现，因为它们是唯一具有两个必需属性（make 和 model）并且匹配前缀条件 ^gm 的 make属性。

结果 html 如下所示：

<ul><li>Make: gm</li>
<li>Model: volt</li></ul>
<auto-price make="ford" model="mustang"></auto-price>
<ul><li>Make: gmfoo</li>
<li>Model: the foo</li></ul>
<auto-price make="gmbar"></auto-price>
<auto-price test=""></auto-price>