提问人:Imogen 提问时间:5/11/2023 更新时间:5/13/2023 访问量:308
如何将 Mudblazor 颜色选择器绑定到模型?
How to bind Mudblazor color picker to model?
问:
我希望用户能够从颜色选择器中选择一种颜色,并在验证正确时将其绑定到模型。验证只是需要一种颜色。我似乎无法正确绑定所选颜色。我在 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();
}
}
答:
1赞
RBee
5/13/2023
#1
MudColorPicker
返回数据类型。因此,您需要将属性类型从 a 更改为 .MudColor
string
MudColor
如果要访问十六进制字符串值,则可以通过其属性访问它。MudColor
Value
<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; }
}
}
评论