[Blazor] div 항목 선택할 수 있는 구조로 만들기

div 항목이 나열된 경우 해당 항목을 선택 시 선택된 것으로 나타내는 방법입니다.

@page "/"

<style>
    .selectable-div {
        padding: 10px;
        border: 1px solid #ccc;
        cursor: pointer;
    }

    .selected {
        background-color: lightblue;
    }
</style>

<h3>Select div Items</h3>

<div>
    @foreach (var item in items)
    {
        <div class="selectable-div @(item.IsSelected ? "selected" : "")" @onclick="() => ToggleSelection(item)">
            @item.Name
        </div>
    }
</div>


@code {
    private List<Item> items = new List<Item>
    {
        new Item { Id = 1, Name = "Item 1", IsSelected = false },
        new Item { Id = 2, Name = "Item 2", IsSelected = false },
        new Item { Id = 3, Name = "Item 3", IsSelected = false },
    };

    private void ToggleSelection(Item item)
    {
        item.IsSelected = !item.IsSelected;
    }
}

위처럼 하게 되면 Item 선택에 따라 style 이 적용되어 배경색이 변경됩니다.

결과 화면