I have created Selectable.razor:

@inherits ComponentBase
<div class="@getClass()" @onclick="() => SetSelected()"></div>

and Selectable.razor.cs:

using Microsoft.AspNetCore.Components;

namespace TestBlazor.Components.Pages
{
    public partial class Selectable : ComponentBase
    {
        public bool selected = false;
        public static Selectable? alreadySelected = null;
        private string getClass()
        {
            return selected ? "selectable selected" : "selectable";
        }

        protected void SetSelected()
        {
            if (alreadySelected != null)
                alreadySelected.selected = false;

            selected = true;
            alreadySelected = this;
            StateHasChanged();
        }
    }
}

Why is not SetSelected triggered when clicking the div?

GetClass is triggering however (I was setting a breakpoint in there to make sure).

I have created Selectable.razor:

@inherits ComponentBase
<div class="@getClass()" @onclick="() => SetSelected()"></div>

and Selectable.razor.cs:

using Microsoft.AspNetCore.Components;

namespace TestBlazor.Components.Pages
{
    public partial class Selectable : ComponentBase
    {
        public bool selected = false;
        public static Selectable? alreadySelected = null;
        private string getClass()
        {
            return selected ? "selectable selected" : "selectable";
        }

        protected void SetSelected()
        {
            if (alreadySelected != null)
                alreadySelected.selected = false;

            selected = true;
            alreadySelected = this;
            StateHasChanged();
        }
    }
}

Why is not SetSelected triggered when clicking the div?

GetClass is triggering however (I was setting a breakpoint in there to make sure).

• razor
• mudblazor

Share Improve this question Follow edited Mar 10 at 13:22 Anders Lindén asked Mar 10 at 12:26 Anders LindénAnders Lindén 7,3521313 gold badges6060 silver badges121121 bronze badges 1

• Potential issues, 1. @rendermode (Because SetSelected is not triggering). 2. Inheritence issues. Is ComponentBase a component .razor or only a .cs class?. Because the code works fine in the snippet environment. – RBee Commented Mar 12 at 12:25

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You're not updating alreadySelected when a new selection happens. Try this:

protected void SetSelected()
{
    if (alreadySelected != null)
        alreadySelected.selected = false;

    selected = true;
    alreadySelected = this; // This will make sure the last selected item is tracked
    StateHasChanged();
}

Without this, alreadySelected stays null (or stuck on the first selection), so it never resets the previous selection.

Without the Use case, I'm guessing at the intent of the control.

First, a couple of points:

1. I can't see a purpose for public static Selectable? alreadySelected = null;
2. There's no need for StateHasChanged(); within a UI handler that already calls it on completion.

So, based on the code you've provided, this is my refactored version of Selectable.

• I've added some some binding functionality, which I assume you'll probably need,
• Everything but the Parameters is private - it's all internal only code.

<div class="@CssClass" style="cursor:pointer" @onclick="SetSelected">
    @this.ChildContent
</div>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public EventCallback<bool> OnChanged { get; set; }

    private bool _selected = false;

    private string CssClass => _selected ? "bg-success text-white p-2" : "bg-danger text-white p-2";

    private async Task SetSelected()
    {
        _selected = !_selected;
        await this.OnChanged.InvokeAsync(_selected);
    }
}

And a demo page:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<Selectable OnChanged="OnSelect">
    <h2>Toggle me!</h2>
</Selectable>

@code {
    private void OnSelect(bool state)
    {
        Console.WriteLine($"State:{state}");
    }
}