Show 2 datasets on one screen that having a matching column between them in Blazor

Viewed 42

I have 2 tables, one called NewYearPrices and one called FruitTable. Here are the models for these tables

 public partial class FruitTable
    {
        public int FruitTableId { get; set; }
        public int? Fruit{ get; set; }
        public int? SalesCost { get; set; }
        public int? Branch{ get; set; }
    }
  public partial class NewYearPrices
        {
            public int NewYearPricesId { get; set; }
            public int? NyPrice{ get; set; }
            public int? Month { get; set; }
            public int? Branch{ get; set; }
        }


  public partial class Branches
            {
                public int Id { get; set; }
                public int? Description{ get; set; }            
            }

Currently I have a view which shows the FruitsTable in a table form along with a dropdown which allows a user to select a branch and the list will be filtered to show that branch's products. Here is the code for that:

dropdown for branch selection:

<label for="Branch">Choose a Branch:</label>
<select Name="Branch" id="Branch" @bind="selectedBranchString">
    <option value="">---All Branches---</option>
    @foreach (var item in branch)
    {
        <option value="@item.Id">@item.Description</option>
    }
</select>

Fruit table code:

<MudTable Dense="true" Virtualize="true" FixedHeader="true" Height="750px" Elevation="25" Items="FilteredFruits" @bind-customer="fruits">
    <HeaderContent>
        <MudTh>Branch</MudTh>
        <MudTh>Fruit</MudTh>
        <MudTh>Cost</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Branch">@context.Branch</MudTd>
        <MudTd DataLabel="Fruit">@context.Fruit</MudTd>
        <MudTd DataLabel="Cost">@context.Cost</MudTd>
    </RowTemplate>   
</MudTable>
@code{
   private int? selectedBranch;
private List<FruitTable> fruits=new List <FruitTable>();
    private List<FruitTable> FilteredFruits => selectedBranch.HasValue ?
    fruits.Where(s => s.Branch==selectedBranch.Value).ToList() :
    fruits;

    public string selectedBranchString{ get{
            if(selectedBranch.HasValue){return selectedBranch.Value.ToString();
            }
            else{
                return null;
            }} 
        set{selectedBranch = int.Parse(value);}}
    private NewYearsPrices nyprices= new NewYearsPrices();
    private List<NewYearsPrices> nyprice= new List<NewYearsPrices>();
    Branches branches = new Branches();
    private List<Branches> branch = new List<Branches>();
    private FruitTable fruit= new FruitTable();
 protected override async Task OnInitializedAsync()
    {
        await Task.Delay(0);
        GetFruitTable();
        GetNewYearsPrices();
        GetBranches();
    }
 private List<FruitTable> GetFruitTable()
    {
        fruits= fruitService.GetFruitTable();       
        return fruits;
    }
   private List<NewYearsPrices> GetNewYearsPrices()
    {
        nyprice=fruitService.GetNewYearsPrices();
        return nyprice;
    }
   private List<Branches> GetBranches()
    {
        branch=fruitService.GetBranches();
        return branch;
    }
}

Currently the records are filtered with

private List<FruitTable> FilteredFruits => selectedBranch.HasValue ?
fruits.Where(s => s.Branch==selectedBranch.Value).ToList() :
fruits;

public string selectedBranchString{ get{
        if(selectedBranch.HasValue){return selectedBranch.Value.ToString();
        }
        else{
            return null;
        }} 
    set{selectedBranch = int.Parse(value);}}

so I tried to duplicate this for the NewYearPrices table and then I relazied that It would mean binding twice to the branch dropdown... Could anyone please advise me on what I could do or the direction I should be heading?

1 Answers

You already have the selected branch saved to a field, so similar to the FilteredFruits all you need to do is do the same for NewYearPrices:

private List<NewYearsPrices> nyprice = new List<NewYearsPrices>();

private List<NewYearPrices> FilteredNewYearPrices => !string.IsNullOrEmpty(selectedBranch) ?
    nyprice.Where(s => s.Branch == selectedBranch).ToList() :
    nyprice;

Also I would like to mention that there is not need for the selectedBranchString property. You can bind directly to the selectedBranch:

<label for="Branch">Choose a Branch:</label>
<select Name="Branch" id="Branch" @bind="selectedBranch">
    <option value="">---All Branches---</option>
    @foreach (var item in branch)
    {
        <option value="@item.Id">@item.Description</option>
    }
</select>

@code {
    private string selectedBranch;
}
Related