如何保存一组复选框并限制一次可以检查的数量

Question

如何获取我使用快速网格制作的复选框的值，并保存最喜欢的狗的 ID。

就像如何将每个复选框与行 id 配对并返回该行的主键。 但同时检查并查看它们是否达到检查行的最大限制。

@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>
</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.Description" />*@
    <PropertyColumn Property="dog => dog.Available" />

    <TemplateColumn Title ="Favorite">
        <input type="checkbox" name="check+_+@(context.Id)" value ="false" />
    </TemplateColumn>

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

@code {
    private DogAdoption_FinalContext context = default!;


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

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

    private List<int> Favorites = new List<int>();

    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();
}

我刚刚在网络上寻找答案，但找不到真正解释如何将输入连接到代码的好来源。

Answer 1

您可以尝试以下示例，根据复选框值更改事件添加/删除收藏夹元素。

@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.QuickGrid

<QuickGrid Class="table" Items="FilteredDogs">
    <PropertyColumn Property="@(dog => dog.Name)" />

    <TemplateColumn Title ="Favorite">
        <input type="checkbox" @onchange="@((e) => OnCheckboxChanged(e, context.Id))" />
    </TemplateColumn>
</QuickGrid>

@code {
    private void OnCheckboxChanged(ChangeEventArgs e, int Id)
    {
        bool isChecked = (bool)e.Value;
        if (isChecked){
            //condition if have already checked the max limit, suppose 2 
            if (Favorites.Count< 2){
                Favorites.Add(Id);
            }
        }
        else{
            Favorites.Remove(Id);
        }
        //log the current selected id in console
        Console.Write("Current Checked rows: ");
        Favorites.ForEach(x => Console.Write(x+""));
        Console.WriteLine();
    }

    private List<int> Favorites = new List<int>();

    private IQueryable<Dog> FilteredDogs = new[]
    {
        new Dog{Id=1,Name="dog1" },
        new Dog{Id=2,Name="dog2" },
        new Dog{Id=3,Name="dog3" },
        new Dog{Id=4,Name="dog4" },
    }.AsQueryable();

    private class Dog{
        public int Id{ get; set; }
        public string Name { get; set; }
    }
}