Blazor QuickGrid复选框绑定与选中数量限制实现咨询

1. 关联复选框与狗狗ID并管理收藏列表 #

通过绑定复选框的勾选状态到收藏列表的判断逻辑，同时处理勾选事件来更新收藏列表：

• 给复选框添加@bind:checked="@Favorites.Contains(context.Id)"，同步前端勾选状态与后端收藏列表
• 绑定@onchange事件触发收藏列表的添加/移除操作
• 在代码块中实现ToggleFavorite方法，处理ID的增删

2. 限制同时勾选的数量上限 #

在勾选操作中加入数量判断，达到上限时阻止新的勾选并提示：

• 定义收藏数量上限常量（例如MaxFavorites = 5）
• 勾选前检查当前收藏数量是否小于上限，否则不执行添加操作
• 可禁用超出上限后的未勾选复选框，或显示提示信息

3. 前端输入与后端代码关联 #

你已使用的@bind指令就是Blazor中前端输入与后端变量关联的核心方式：

• @bind="BreedFilter"会自动将输入框值同步到后端的BreedFilter变量
• @bind:event="oninput"确保输入时实时同步，而非等待输入框失去焦点

修改后的完整代码 #

@page "/available"
@rendermode InteractiveServer
@using Microsoft.EntityFrameworkCore
@using Microsoft.AspNetCore.Components.QuickGrid
@using DogAdoption_Final.Models
@using DogAdoption_Final.Data
@implements IAsyncDisposable
@inject IDbContextFactory<DogAdoption_Final.Data.DogAdoption_FinalContext> DbFactory

<PageTitle>Index</PageTitle>

<h1>Available Dogs</h1>

<p>
    Search Breed: <input type="search" @bind="BreedFilter" @bind:event="oninput" />
    Search Trainability: <input type="search" @bind="TrainabilityFilter" @bind:event="oninput" />
    Search Temperament: <input type="search" @bind="TemperamentFilter" @bind:event="oninput" />
</p>

<p>
    <a href="manage/create">Create New</a>
    @if (Favorites.Any())
    {
        <span>已收藏狗狗ID：@string.Join(", ", Favorites)</span>
    }
</p>

<QuickGrid Class="table" Items="FilteredDogs">
    <TemplateColumn Title="Dog Image"> 
        <img class="dogImage" src="@(context.DogImage)" style="width:100px;height:100px">
    </TemplateColumn>
    <PropertyColumn Property="dog => dog.Name" />
    <PropertyColumn Property="dog => dog.Age" />
    <PropertyColumn Property="dog => dog.Gender" />
    <PropertyColumn Property="dog => dog.Breed" />
    <PropertyColumn Property="dog => dog.Trainability" />
    <PropertyColumn Property="dog => dog.Temperament" />
    <PropertyColumn Property="dog => dog.Available" />

    <TemplateColumn Title="Favorite">
        <input type="checkbox" 
               @bind:checked="@Favorites.Contains(context.Id)" 
               @onchange="(e) => ToggleFavorite(context.Id, e.Value)"
               disabled="@(Favorites.Count >= MaxFavorites && !Favorites.Contains(context.Id))" />
        @if (Favorites.Count >= MaxFavorites && !Favorites.Contains(context.Id))
        {
            <span style="color:red; font-size:0.8em;">已达收藏上限</span>
        }
    </TemplateColumn>

    <TemplateColumn Context="dog">
        <a href="@($"available/details?id={dog.Id}")">Details</a> 
    </TemplateColumn>
</QuickGrid>

@code {
    private DogAdoption_FinalContext context = default!;
    private const int MaxFavorites = 5; // 自定义收藏数量上限
    private List<int> Favorites = new List<int>();

    private string BreedFilter = string.Empty;
    private string TrainabilityFilter = string.Empty;
    private string TemperamentFilter = string.Empty;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    private void ToggleFavorite(int dogId, object? isChecked)
    {
        bool checkedState = Convert.ToBoolean(isChecked);
        if (checkedState)
        {
            if (Favorites.Count < MaxFavorites && !Favorites.Contains(dogId))
            {
                Favorites.Add(dogId);
            }
        }
        else
        {
            Favorites.Remove(dogId);
        }
    }

    IQueryable<Dog> FilteredDogs => 
    context.Dog.Where(m => m.Available!.Equals(true) && m.Breed!.Contains(BreedFilter) && m.Trainability!.Contains(TrainabilityFilter) && m.Temperament!.Contains(TemperamentFilter));

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

内容的提问来源于stack exchange，提问作者James