Two-way Billing EditorItems

[KisaPs]

Continuation of the discussion #4738 . How can I correct the change in the state of the component and its display? Without using a setter in the product. When a user changes a specific type, insert only the necessary fields into the form.

-26-11-2024.08_03_19.mp4

Link to GitHub

Index.razor

<Table TItem="Product" Items="products" AutoGenerateColumns="true" EditMode="EditMode.Popup" ShowExtendButtons="true"
>
<EditTemplate>
    <EditTemplateProduct Model="context"/>
</EditTemplate>
</Table>

@code {
    List<Product> products = new List<Product>()
    {
        new(),new(),new(),new(),new()
    };
}

EditTemplateProduct.razor

<Switch @bind-Value="Model.IsSale" />

<Button Text="StateHasChanged" OnClick="StateHasChanged"/>

<ValidateForm Model="@Model">
    <EditorForm TModel="Product" AutoGenerateAllItem="false">
        <FieldItems>
            <EditorItem @bind-Field="context.ProductName" /> 
            <EditorItem @bind-Field="context.Price" />
            <EditorItem @bind-Field="context.SaleType" />

            @*          ***Before***  https://github.com/dotnetcore/BootstrapBlazor/discussions/4738
            <Block OnQueryCondition="(async (str) => context.IsSale)">
                <EditorItem @bind-Field="context.PriceSale" />
            </Block>
            *@

            @*         ***After*** https://github.com/dotnetcore/BootstrapBlazor/discussions/4738*@
            <EditorItem @bind-Field="context.PriceSale" Ignore="@Model.IsSale" />

            <EditorItem @bind-Field="context.TypeDescription1" Ignore="@(Model.SaleType != SaleType.Type1)" />
            <EditorItem @bind-Field="context.TypeDescription2" Ignore="@(Model.SaleType != SaleType.Type2)" />
            <EditorItem @bind-Field="context.TypeDescription3" Ignore="@(Model.SaleType != SaleType.Type3)" />
        </FieldItems>
    </EditorForm>
</ValidateForm>

@code {
    [Parameter] public Product Model { get; set; }
}

Product.cs

public class Product
{
    public static int Id = 1;
    public string ProductId { get; set; } = Id.ToString();
    public string ProductName { get; set; } = "Product_" + Id++;
    public int Price { get; set; } = new Random().Next(10, 10000);
    public bool IsSale { get; set; }
    public int PriceSale {  get; set; }

    public SaleType SaleType { get; set; }
    public string TypeDescription1 { get; set; } = "Description Type 1";
    public string TypeDescription2 { get; set; } = "Description Type 2";
    public string TypeDescription3 { get; set; } = "Description Type 3";
}

public enum SaleType
{
    Type1,
    Type2,
    Type3
}

[ArgoZhang]

@KisaPs

I made some changes for your reference.

BootstrapBlazorServerEditForm.zip

create a component for partial render

SaleTypeEditorItem

@using System.Diagnostics.CodeAnalysis

<div class="col-12 col-sm-6 col-md-6">
    <Select @bind-Value="Model.SaleType"></Select>
</div>

@if (Model.SaleType != SaleType.Type1)
{
    <div class="col-12 col-sm-6 col-md-6">
        <BootstrapInput @bind-Value="Model.TypeDescription1"></BootstrapInput>
    </div>
}
@if (Model.SaleType != SaleType.Type2)
{
    <div class="col-12 col-sm-6 col-md-6">
        <BootstrapInput @bind-Value="Model.TypeDescription2"></BootstrapInput>
    </div>
}
@if (Model.SaleType != SaleType.Type3)
{
    <div class="col-12 col-sm-6 col-md-6">
        <BootstrapInput @bind-Value="Model.TypeDescription3"></BootstrapInput>
    </div>
}

@code {
    [Parameter, NotNull, EditorRequired]
    public Product? Model { get; set; }

    [Parameter]
    public EventCallback<Product> ModelChanged { get; set; }
}

set ComponentType and ComponentParameters on TableColumn

<EditorItem @bind-Field="context.SaleType" ComponentType="typeof(SaleTypeEditorItem)" ComponentParameters="GetParameters(context)" />

This is just an idea, not a final solution.

[KisaPs]

It works