MudBlazor Select with multiselect with database values

Question

My goal is to have a multiselect dropdown that manages the 1 to many relationship between Pieces and Parts. Pieces and Parts have 'int ID' and 'string Name' in their tables. There is also a joiner table named PieceParts which has 'int pieceId' and 'int partId'.

I'm imaging the following as far as all the processes that need to happen.

Populate select with all Parts from the PartsService.
Selected Parts are those from the PieceParts table where pieceId = Id of the selected Piece.
If a new part is checked, then Add a new PiecePart with pieceID of the selected Piece and partID of the checked Part.
If a part is unchecked, then Delete the PiecePart with pieceID of the selected Piece and partID of the unchecked Part.

I'm just not sure how to implement all this. I have the Select dropdown populated with all the Parts, but I'm unsure about the value I should set for @bind-Value and @bind-SelectedValues. And then I am not sure how to run either the Add or Delete methods I have for the checked or unchecked actions. I'm attempting to use this link to get this working.

https://mudblazor.com/components/select#multiselect

Below is the code I have so far. Any help is greatly appreciated!

@page "/piece"
@page "/piece/{id:int}"

@inject IPieceService PieceService
@inject IPartService PartService

<MudSelect T="Part" Label="Parts" MultiSelection="true" @bind-Value="partsValue" @bind-SelectedValues="partsOptions">
  @foreach (var part in PartService.Parts)
  {
    <MudSelectItem T="Part" Value="@part">@part.Name</MudSelectItem>
  }
</MudSelect>

@code {
  private string partsValue { get; set; } = "Nothing selected";
  private IEnumerable<Part> partsOptions { get; set; } = new HashSet<Part>();

  protected override async Task OnInitializedAsync()
  {
    await PartService.GetParts();
  }
}

Thank you!

--EDIT 3/27/22-- I actually got the following working. It's getting the values from the DB as I had hoped, but I'm not sure how to get it to select the values already associated with the piece.

The associated parts are queried with the Piece api call, here's an example of the data.

{
  "data": {
    "id": 1,
    "title": "Piece 1",
    "parts": [
      {
        "id": 1,
        "name": "Tenor",
      },
      {
        "id": 3,
        "name": "Clarinet",
      }
    ]
  },
  "success": true,
  "message": ""
}

<MudSelect T="Part" Label="Part(s)" MultiSelection="true" @bind-Value="partValue" @bind-SelectedValues="partSelectedValues">
@foreach (var part in PartService.Parts)
{
    <MudSelectItem T="Part" Value="@part">@part.Name</MudSelectItem>
}
</MudSelect>

private Part partValue { get; set; } = new Part();
private IEnumerable<Part> partSelectedValues { get; set; } = new HashSet<Part>();

Do you have any ideas? Thanks!

Navid Yazdi · Accepted Answer · 2022-03-18 23:50:11Z

1

1- MudSelect doesn't support server-side data currently. Check the answer I wrote Here, use that way to load data (if you have large dataset).

2- Re-Render MudSelect for next level of data.

Example: Show firs level of data on page initialize, after user selected some data, fetch data from server and render second MudSelect.

If you want to handle data change on parent level, simply re-render child MudSelect. I suggest you to create razor component per MudSelect to achieve a clean code result.

answered Mar 18, 2022 at 23:50

Navid Yazdi

514 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MudBlazor Select with multiselect with database values

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related