blazor - 如何在 Blazor 服务器应用程序中使用作为绑定值“tick”的 id 更改复选框值，并且标签颜色将相应更改

Question

我怎么能做到这一点。如何绑定复选框值并根据完成的值更改颜色。如何在 Blazor 中提供条件来检查这一点。

任何人都可以分享任何建议以获得此输出。仅检查已完成的流程，颜色将出现在每个订单、流程、取货和交付中。

标签： blazorblazor-server-side

Answer 1

在这里，我在绑定值上使用 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 &&
        someModel.Process == Process.Deliver &&
        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 }
}