❔ 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

_matchingTags

has the property

Tag

Tag

the same as the current iteration in the loop (tag) then it should check if the property

Matching

Matching

is true, if so render

bg-success

bg-success

else

bg-secondary

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?

❔ Render HTML classes based on properties (Blazor)

_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

_matchingTags

has the property

Tag

Tag

the same as the current iteration in the loop (tag) then it should check if the property

Matching

Matching

is true, if so render

bg-success

bg-success

else

bg-secondary

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?

❔ Render HTML classes based on properties (Blazor)

❔ Render HTML classes based on properties (Blazor)

Similar Threads

Similar Threads

Similar Threads