如何将 Mudblazor 颜色选择器绑定到模型?

How to bind Mudblazor color picker to model?

提问人:Imogen 提问时间:5/11/2023 更新时间:5/13/2023 访问量:308

问:

我希望用户能够从颜色选择器中选择一种颜色,并在验证正确时将其绑定到模型。验证只是需要一种颜色。我似乎无法正确绑定所选颜色。我在 Blazor 服务器端使用 Mudblazor 组件。我没有使用和javascript。

@using System.ComponentModel.DataAnnotations
@using MudBlazor.Utilities

<EditForm Model="@model" OnValidSubmit="OnValidSubmit">
<DataAnnotationsValidator/>
<MudGrid>
    <MudItem xs="12" sm="7">
        <MudCard>
            <MudCardContent>
                <MudTextField Label="Category Name" HelperText="Max. 20 characters" @bind-Value="model.Name" For="@(() => model.Name)"/>
                <MudItem xs="12" md="6" lg="4">       
                    <MudPaper Class="d-flex">
                        <MudColorPicker T="color" Rounded="true" Value="_pickerColor" ValueChanged="UpdateSelectedColor" Label="Category Colour*" Placeholder="Select Color" 
                        ColorPickerView="ColorPickerView.Grid" DisableAlpha="true" DisableColorField="false" DisablePreview="false"  DisableModeSwitch="true" 
                        DisableSliders="true" ColorPickerMode="ColorPickerMode.HEX" />
                    </MudPaper>  
                </MudItem>           
            </MudCardContent>
            <MudCardActions>
                <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto">Register</MudButton>
            </MudCardActions>
        </MudCard>
    </MudItem>
    <MudItem xs="12" sm="5">
        <MudPaper Class="pa-4 mud-height-full">
            <MudText Typo="Typo.subtitle2">Validation Summary</MudText>
            @if (success)
            {
                <MudText Color="Color.Success">Success</MudText>
            }
            else
            {
                <MudText Color="@Color.Error">
                    <ValidationSummary />
                </MudText>
            }
        </MudPaper>
    </MudItem>
    <MudItem xs="12">
        <MudText Typo="Typo.body2" Align="Align.Center">
            Fill out the form correctly to see the success message.
        </MudText>
    </MudItem>
</MudGrid>
</EditForm>


@code {
    Category model = new Category();
    public MudColor _pickerColor ;
    bool success;

   public class Category
    {
        [Required]
        [StringLength(20, ErrorMessage = "Name length can't be more than 20")]
        public string Name { get; set; }


        [Required]
        [StringLength(20, ErrorMessage = "Coloir length can't be more than 20")]
        public string colour { get; set; }
    }

    public void UpdateSelectedColor(MudColor value)
    {
        _pickerColor = value;
    }  

    private void OnValidSubmit(EditContext context)
    {
        success = true;
        StateHasChanged();
    }
}
模型 blazor-server-side bind 颜色选取器 mudblazor

评论


答:

1赞 RBee 5/13/2023 #1

MudColorPicker返回数据类型。因此,您需要将属性类型从 a 更改为 .MudColorstringMudColor

如果要访问十六进制字符串值,则可以通过其属性访问它。MudColorValue

<MudColorPicker @bind-Value="model.Colour" />
@code {
   Category model = new Category();
   public class Category
    {
        [Required]
        [StringLength(20, ErrorMessage = "Name length can't be more than 20")]
        public string Name { get; set; }

        [Required]
        public MudColor Colour { get; set; }
    }
}

片段