How can I get the values of the checkboxes, I made using the quickgrid, and save the ids of the dogs that were favorited.
Like how do I pair each checkbox to the row id and return the primary key of that row. But then at the same time check and see if they reach a max limit of checked rows.
@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();
}
I have just been searching for answers around the web, and I can’t find a good source really explaining how to connect inputs to code.
New contributor
James is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
You could try following sample to add/remove elements of Favorites based on checkbox value change event.
@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; }
}
}