Blazor web assembly pass checkbox list values to model

Question

I'm new to Blazor. I'm working in a web assembly Blazor project. I am trying to create a form that passes values back to a model. I have it working with input text fields and drop downs, but I am trying to get it to work with checkboxes and have not had any success finding a good guide on how to do this.

Here's what I have. This is my razor page:

@page "/manageprods"

@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using FormProject.Shared.Data.Models.ValuePairs;
@using FormProject.Shared.Data.Models.Forms;
@using FormProject.Client.Services.Interfaces;
@using Microsoft.AspNetCore.Components.Forms;
@using System.Net.Http.Json;
@using System.Net.Http;

@inject IHttpClientFactory factory;
@inject HttpClient httpClient;
@inject IConfigPath cnfg;
@inject ProductForm productForm;


@code {

    private IEnumerable<CheckboxPairing>? states { get; set; }
    string? stateId { get; set; }
    string? Value { get; set; }
    string? apiPath;
    EventCallback<string> ValueChanged { get; set; }


    bool isSubmitting = false;

    protected override async Task OnInitializedAsync()
    {

        await base.OnInitializedAsync();

        apiPath = cnfg.GetApiBasePath() + @"ProductForm/ProcessProductForm";

        states = await httpClient.GetFromJsonAsync<IEnumerable<CheckboxPairing>>("StateList/GetStateList");
        stateId = "";

    }

    async Task DoProduct()
    {
        isSubmitting = true;

        var response = await httpClient.PostAsJsonAsync(apiPath, productForm);
        var productId = response.Content.ReadFromJsonAsync<int>();

        isSubmitting = false;
    }

    private Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();
        return ValueChanged.InvokeAsync(Value);
    }

}

<div class="container productSetup product" id="productSetup">
    <EditForm Model="productForm" OnValidSubmit="DoProduct">
        <button type="submit" disabled="@isSubmitting" class="btn-primary">
            Save
        </button>
                    <InputText @bind-Value="productForm.FormCode" />
                    <ValidationMessage For="@(()=> productForm.FormCode)" />

                    @if (states == null)
                    {
                        <p>
                            <em>Loading ...</em>
                        </p>
                    }
                    else
                    {
                        <div class="form-group state_restriction">
                            <div class="state-list">
                                <label class="checkbox-inline state-name">
                                    <input type="checkbox" id="SelectAllHeader" />
                                    Select All
                                </label>
                                @foreach (var state in states)
                                {
                                    <label>
                                        <InputCheckbox @bind-Value="state.Checked" name="StateExceptions" />
                                        @state.Name
                                    </label>
                                }
                            </div>
                        </div>
                    }
    </EditForm>
    <br />
</div>

Here's the model for the state list:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace FormProject.Shared.Data.Models.ValuePairs
{
   public class CheckboxPairing
   {

       public int? Value { get; set; }
       public string? Name { get; set; }
       public bool Checked { get; set; } 

   }
}

And the model for the form itself:

using System.ComponentModel.DataAnnotations;

namespace FormProject.Shared.Data.Models.Forms
{
   public class ProductForm
   {

       public string? FormCode { get; set; }

       public List<int>? StateExceptions{ get; set; }

   }
}

The form is passed through to my controller with the input text value (and if I use a simple InputSelect dropdown, that passes through, too) but I just haven't figured out how to get that checkbox list to pass through.

Answer 1

but I just haven't figured out how to get that checkbox list to pass through.

<InputCheckbox @bind-Value="state.Checked" name="StateExceptions" />

we can use @bind-Value to pass the Checkbox value to state.Checked , not StateExceptions

If you want to pass Checked checkbox list values to StateExceptions?

I add some code like below you can refer to it, hope it help you.

@code {
public List<int> StateExceptions { get; set; } = new List<int>();
...
async Task DoProduct()
    { 
     ...
     foreach (var state in states)
        {
            if (state.Checked)
            { StateExceptions.Add(state.Value); }
        }
     ...
}

result: