ASP.Net核心条件类标记帮助器 [英] ASP.Net Core Conditional Class Tag Helper

问题描述

在ASP.Net Core 2.0中为条件类标记助手实现现有问题的解决方案时，我不是获得预期的结果。

When implementing the solution to an existing question for a conditional class tag helper in ASP.Net Core 2.0 I am not getting the expected results.

标记帮助器是发布答案的直接副本，尚未修改。

The tag helper is a direct copy from the posted answer and has not been modified.

以下示例代替了类名，我得到了完整的属性名以及指定的类。

Following the example instead of the class name I'm getting the full attribute name along with the specified class.

我在做什么错了？

TagHelper

TagHelper

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Collections.Generic;
using System.Linq;

namespace PerformanceTools.TagHelpers
{
    [HtmlTargetElement("div", Attributes = ClassPrefix + "*")]
    public class ConditionClassTagHelper : TagHelper
    {
        private const string ClassPrefix = "condition-class-";

        [HtmlAttributeName("class")]
        public string CssClass { get; set; }

        private IDictionary<string, bool> _classValues;

        [HtmlAttributeName("", DictionaryAttributePrefix = ClassPrefix)]
        public IDictionary<string, bool> ClassValues
        {
            get
            {
                return _classValues ?? (_classValues = new Dictionary<string, bool>(StringComparer.OrdinalIgnoreCase));
            }
            set
            {
                _classValues = value;
            }
        }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            var items = _classValues.Where(e => e.Value).Select(e => e.Key).ToList();

            if (!string.IsNullOrEmpty(CssClass))
            {
                items.Insert(0, CssClass);
            }

            if (items.Any())
            {
                var classes = string.Join(" ", items.ToArray());

                output.Attributes.Add("class", classes);
            }
        }
    }
}

控制器

public IActionResult ConditionalTest()
{
    List<ConditionalTestViewModel> model = new List<ConditionalTestViewModel>();
    model.Add(new ConditionalTestViewModel { Active = true });
    model.Add(new ConditionalTestViewModel { Active = false });
    return View("ConditionalTest", model);
}

模型

public class ConditionalTestViewModel
{
    public bool Active { get; set; }
}

查看

@model IEnumerable<ConditionalTestViewModel>

<div>Conditional Test</div>
@foreach(var c in Model)
{
    <div condition-class-active="@c.Active">@c.Active</div>
}

输出

<div id="container-body" class="container">

<div>Conditional Test</div>
    <div condition-class-active="conditional-class-active">True</div>
    <div>False</div>
</div>

更新：如前所述，TagHelper是 condition-class-* 不是 conditional-class-* ，我对此进行了更新，但问题仍然存在。

Update: As pointed out the TagHelper is condition-class-* not conditional-class-*, I have updated my question with this but the issue still remains.

推荐答案

根据 问题 > 您提到的是拼写错误。您应该使用condition-class-active而不是conditional-class-active，如下所示：

According to the question you mentioned, you have a spelling mistake. You should use condition-class-active instead of conditional-class-active as following:

<div>Conditional Test</div>
@foreach(var c in Model)
{
    <div condition-class-active="@c.Active">@c.Active</div>
}

在tagViewer中添加引用，如下所示

in _ViewImports.cshtml add reference to taghelper as following

@addTagHelper "*, WebApplication3"

这篇关于ASP.Net核心条件类标记帮助器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！