A multiselect component which supports binding to a collection of any type.
$ dotnet add package BlazorMultiselectComponentI built this component because I found the collection binding to InputSelect tedious. This component allows you to bind complex types to a simple multiselect.
The type for the collection being passed to the component.
The text that labels the multiselect input box on the page.
A collection of all of the possible options for the component to display.
The string name of the property to use when displaying the options.
Preferred way of passing this parameter is by nameof(Model.Property).
The callback which is invoked whenever the underlying value is updated.
The value that the component holds.
Inside of an EditForm, bind your collection to the BlazorMultiSelectComponent.
Say we have a product with a list of categories:
class ProductCategory {
public int Id { get; set; }
public string Name { get; set; }
}
class Product {
...
public virtual ICollection<ProductCategory> Categories { get; set; } = new List<ProductCategory>();
...
}
protected List<ProductCategory> AllCategories { get; set; } = new List<ProductCategory>()
{
new ProductCategory
{
Id = 1,
Name = "Category 1"
},
new ProductCategory
{
Id = 2,
Name = "Category 2"
},
new ProductCategory
{
Id = 3,
Name = "Category 3"
}
};
protected Product Product { get; set; } = new Product();
Bind it to the component like so:
<EditForm>
...
<BlazorMultiSelectComponent.MultiSelect @bind-Selected=@(Product.Categories) Label="Categories" DisplayField=@(nameof(ProductCategory.Name)) Options="AllCategories" />
...
</EditForm>