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.