MudBlazor上的泛型选择
MudBlazor上的泛型选择
提问于 2022-03-30 16:10:34
我有一个问题，将几个普通的HTML选择升级到MudSelect和MudSelectItems。vanilla通过一个RenderFragment模板工作，以使它们具有通用性，并且运行得相当好；但是，当将它们升级到它们的MudBlazor对应项时，@onchange EvenCallBack事件不会触发，并且当用户选择项时什么也不会发生。我做了很多研究，但不幸的是，我没有找到任何关于通用MudBlazors选择的例子，而且它们的文档也相当缺乏。
如果有人能给我任何提示或指出我可以查找的资源，我将不胜感激。谢谢!
/****Selects on the Blazor page****/
<div class="col-sm">
<CbgDropDownTemplate Name="Trusts" Label="Select Trust"
DefaultMessage="Select a Trust"
LoadingMessage="Loading Trusts..."
Items="_trusts" TItem="Trust"
OnChangeCallBack="OnTrustIdChanged">
<OptionTemplate Context="trust">
<MudSelectItem Value="@(trust.Abbr)">@trust.Abbr</MudSelectItem>
</OptionTemplate>
</CbgDropDownTemplate>
</div>
<div class="col-sm">
<CbgDropDownTemplate Name="GroupNumber" Label="Group Number:"
DefaultMessage="Select Group Number"
Items="_employers" TItem="EmployerContactFlags"
OnChangeCallBack="OnEmployerIdChanged" LoadingMessage="You need to pick a Trust first...">
<OptionTemplate Context="employerContactFlags">
<MudSelectItem Value="@employerContactFlags.EmployerNumber">@employerContactFlags.EmployerNumber</MudSelectItem>
@* <option value="@employerContactFlags.EmployerNumber">@employerContactFlags.EmployerNumber</option> *@
</OptionTemplate>
</CbgDropDownTemplate>
/**** The Blazor Selects components*****/
@typeparam TItem
<div class="container">
<div class="form-group">
<MudSelect T="string" Placeholder="@DefaultMessage"
Label="@DefaultValue" Margin="Margin.Dense" Variant="Variant.Text"
@onchange="ChangeCallBack">
@if (Items != null)
{
@foreach (var item in Items)
{
@OptionTemplate(item)
}
}
else
{
<MudSelectItem Value="@(LoadingMessage)">"@(LoadingMessage)"</MudSelectItem>
}
</MudSelect>
</div>
</div>
@code {
[Parameter]public string Name { get; set; }
[Parameter]public string Label { get; set; }
[Parameter]public string DefaultMessage { get; set; }
[Parameter]public string DefaultValue { get; set; }
[Parameter]public bool Disabled { get; set; }
[Parameter]public string LoadingMessage { get; set; } = "Loading...";
[Parameter]public RenderFragment<TItem> OptionTemplate { get; set; }
[Parameter]public IReadOnlyList<TItem> Items { get; set; }
[Parameter]public EventCallback<ChangeEventArgs> OnChangeCallBack { get; set; }
Task ChangeCallBack(ChangeEventArgs e)
{
return OnChangeCallBack.InvokeAsync(e);
}}
/**These are the the classes used in the selects**/
public class Trust
{
public int Id { get; set; }
public string Abbr { get; set; }
public string Name { get; set; }
public int RenewalId { get; set; }
// GetHashCode and to string overridden for MudBlazor selects components
public override int GetHashCode() => Id.GetHashCode();
// Implement this for the Pizza to display correctly in MudSelect
public override string ToString() => Name;
}
public partial class EmployerContactFlags
{
public int Trust { get; set; }
public long EmployerNumber { get; set; }
public long EmployerContactFlag { get; set; }
public int ContactStatus { get; set; }
public override string ToString() => EmployerNumber.ToString();
}回答 1
Stack Overflow用户
发布于 2022-03-30 17:36:44
由于您的代码相当复杂，以下是一些简单的代码，演示了当您希望将编辑控件封装到用于构建更复杂表单的组件中时，如何将它们连接起来。
您应该能够将该方法应用于自定义控件。
首先是组件。注意：
MudSelect
- The
- ：
@bind绑定到的三个参数的定义。
- 将这些参数的连接连接到组件中的控件中--在本例中，为选项列表呈现片段。
。
// MySelect.razor
@typeparam TValue
@using System.Linq.Expressions
<MudSelect T=TValue Value=@this.Value ValueChanged=this.ValueChanged ValueExpression=this.ValueExpression Label="Select" HelperText="Choose" >
@ChildContent
</MudSelect>
@code {
[Parameter] public TValue? Value { get; set; }
[Parameter] public EventCallback<TValue> ValueChanged { get; set; }
[Parameter] public Expression<Func<TValue>>? ValueExpression { get; set; }
[Parameter] public RenderFragment? ChildContent { get; set; }
}现在是简单的编辑。注意：
@bind-Value到模型。- 控件以正确的选择值
- 启动，模型在显示值中被更新为shoiwn。
。
@page "/"
<PageTitle>Index</PageTitle>
@using Microsoft.Extensions.Options
<MudText Typo="Typo.h3" GutterBottom="true">Demo/MudText</MudText>
<EditForm Model=model>
<MySelect @bind-Value=model.Value>
<MudSelectItem T="int" Value=1>Spain</MudSelectItem>
<MudSelectItem T="int" Value=2>Portugal</MudSelectItem>
<MudSelectItem T="int" Value=3>France</MudSelectItem>
</MySelect>
</EditForm>
<MudText Class="mt-4">Value = @model.Value</MudText>
@code {
private MyModel model = new();
public class MyModel
{
public int Value { get; set; } = 3;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71680631
复制相关文章
相似问题
腾讯云开发者
