ASP.Net Core Conditional Class Tag Helper

问题

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.

What am I doing wrong?

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);
            }
        }
    }
}

Controller

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);
}

Model

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

View

@model IEnumerable<ConditionalTestViewModel>

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

Output

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

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

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

回答1:

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>
}

in _ViewImports.cshtml add reference to taghelper as following

@addTagHelper "*, WebApplication3"

来源：https://stackoverflow.com/questions/48251583/asp-net-core-conditional-class-tag-helper

标签

asp.net-core

asp.net-core-tag-helpers