【问题标题】:ASP.Net Core Conditional Class Tag HelperASP.Net Core 条件类标签助手
【发布时间】:2018-01-14 16:18:00
【问题描述】:

在 ASP.Net Core 2.0 中为条件类标签助手实现existing question 的解决方案时,我没有得到预期的结果。

标签助手是从发布的答案直接复制的,没有被修改过。

按照示例而不是类名,我将获得完整的属性名称以及指定的类。

我做错了什么?

标签助手

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-*,我已经更新了我的问题,但问题仍然存在。

【问题讨论】:

    标签: c# asp.net-core asp.net-core-tag-helpers


    【解决方案1】:

    根据你提到的question,你有一个拼写错误。您应该使用 condition-class-active 而不是 conditional-class-active,如下所示:

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

    在 _ViewImports.cshtml 中添加对 taghelper 的引用,如下所示

    @addTagHelper "*, WebApplication3"
    

    【讨论】:

    • 当使用condition-class-active时,我仍然得到类似的输出&lt;div condition-class-active="condition-class-active"&gt;True&lt;/div&gt;
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-01
    • 2019-03-09
    • 2023-04-03
    • 1970-01-01
    • 2019-05-22
    • 1970-01-01
    相关资源
    最近更新 更多