Блог

Как я мог этого добиться. Как привязать значение флажка и изменить цвет в соответствии с завершенным значением. Как задать условие для проверки этого в Blazor.

Кто-нибудь может поделиться каким-либо предложением, чтобы получить этот результат. Будет проверяться только завершенный процесс, и цвет будет отображаться в каждом заказе, процессе, получении и доставке.

Здесь я использую оператор switch для связанного значения, чтобы указать значение цвета для использования в атрибуте стиля.

 <EditForm Model="@someModel" class="d-flex flex-row">

    <div class="m-2 p-2">
        <div style="background-color: @orderColour;">Order</div>
        <InputRadioGroup @bind-Value="someModel.Order">
            <InputRadio Value="Order.Placed" /> Placed<br>
            <InputRadio Value="Order.Accepted" /> Accepted<br>
            <InputRadio Value="Order.Completed" /> Completed<br>
        </InputRadioGroup>
    </div>
    @if (someModel.Order == Order.Completed)
        {
    <div class="m-2 p-2">
        <div style="background-color: @processColour;">Process</div>
        <InputRadioGroup @bind-Value="someModel.Process">
            <InputRadio Value="Process.InProcess" /> In Process<br>
            <InputRadio Value="Process.Deliver" /> Deliver<br>
        </InputRadioGroup>
    </div>
    @if (someModel.Process == Process.Deliver)
            {
    <div class="m-2 p-2">
        <div style="background-color: @deliveryColour;">Delivery</div>
        <InputRadioGroup @bind-Value="someModel.Delivery">
            <InputRadio Value="Delivery.OutForDelivery" /> Placed<br>
            <InputRadio Value="Delivery.Delivered" /> Accepted<br>
            <InputRadio Value="Delivery.Completed" /> Completed<br>
        </InputRadioGroup>
    </div>
    @if (isComplete)
                {
    <h1 class="text-success">
        ✔
    </h1>
    }
    }
    }
</EditForm>

@code {
    SomeModel someModel = new SomeModel();
    string orderColour => someModel.Order switch
    {
        Order.Placed => "red",
        Order.Accepted => "orange",
        Order.Completed => "green",
        _ => "grey"
    };
    string processColour => someModel.Process switch
    {
        Process.InProcess => "orange",
        Process.Deliver => "green",
        _ => "grey"
    };
    string deliveryColour => someModel.Delivery switch
    {
        Delivery.OutForDelivery => "red",
        Delivery.Delivered => "orange",
        Delivery.Completed => "green",
        _ => "grey"
    };
    bool isComplete =>
        someModel.Order == Order.Completed amp;amp;
        someModel.Process == Process.Deliver amp;amp;
        someModel.Delivery == Delivery.Completed;


    public class SomeModel
    {
        public Order Order { get; set; }
        public Process Process { get; set; }
        public Delivery Delivery { get; set; }
    }
    public enum Order { Unkown, Placed, Accepted, Completed }
    public enum Process { Unkown, InProcess, Deliver }
    public enum Delivery { Unkown, OutForDelivery, Delivered, Completed }
}