C#•2y ago

❔ Render HTML classes based on properties (Blazor)

So we managed to setup a Linq expression to get all matching tags from two lists and all. Which is awesome, but now I can't seem to render the Blazor component colors based on these properties.. Here's the Linq we managed to setup earlier:

_matchingTags.AddRange(
    User
        .Profile
        .Experiences
        .SelectMany(experience => experience.Methods).Distinct()
        .SelectMany(method =>
            Assignment.Tags.Select(tag => new MatchingTags
            {
                Tag = method,
                Matches = false
                          || tag.IndexOf(method, StringComparison.CurrentCultureIgnoreCase) >= 0
                          || method.IndexOf(tag, StringComparison.CurrentCultureIgnoreCase) >= 0
            }).Distinct()
        ).Distinct()
    );

_matchingTags.AddRange(
    User
        .Profile
        .Experiences
        .SelectMany(experience => experience.Methods).Distinct()
        .SelectMany(method =>
            Assignment.Tags.Select(tag => new MatchingTags
            {
                Tag = method,
                Matches = false
                          || tag.IndexOf(method, StringComparison.CurrentCultureIgnoreCase) >= 0
                          || method.IndexOf(tag, StringComparison.CurrentCultureIgnoreCase) >= 0
            }).Distinct()
        ).Distinct()
    );

and my issue is the following I have a List of strings, these should be rendered as Badges in the HTML component, and then change the class "bg-..." based on the properties of another List Basically:

List<string> Tags = new() { "Tag One", "Tag Two", "Tag Three" };
List<MatchingTag> _matchingTags = new() { new() {Tag = "Tag One", Matches = false }, new() { Tag = "Tag Two", Matches = false }, new() { Tag = "Tag Three", Matches = false } };
@foreach (string tag in Tags)
{
  <span class="badge @(/* Here is where I run into usse. See below for conditions */)">@tag</span>
}

List<string> Tags = new() { "Tag One", "Tag Two", "Tag Three" };
List<MatchingTag> _matchingTags = new() { new() {Tag = "Tag One", Matches = false }, new() { Tag = "Tag Two", Matches = false }, new() { Tag = "Tag Three", Matches = false } };
@foreach (string tag in Tags)
{
  <span class="badge @(/* Here is where I run into usse. See below for conditions */)">@tag</span>
}

so the conditions should be as follows (very verbose): if any item in _matchingTags has the property Tag the same as the current iteration in the loop (tag) then it should check if the property Matching is true, if so render bg-success else bg-secondary So what I've got so far is this:

@foreach (var tag in Tags)
{
  <span class="badge @(_matchingTags.Any(x => x.Tag == tag && x.Matching)">@tag</span>
}

@foreach (var tag in Tags)
{
  <span class="badge @(_matchingTags.Any(x => x.Tag == tag && x.Matching)">@tag</span>
}

but this only renders green the first item of the tags, and never all matching ones... What am I doing wrong here?

1 Reply

Accord•2y ago

Looks like nothing has happened here. I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ Render HTML classes based on properties (Blazor)