c# - MudBlazor 上的通用选择

Question

我在将几个普通 HTML 选择升级为 MudSelect 和 MudSelectItems 时遇到问题。普通的 Selects 通过 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();
    }

Answer 1

由于您的代码相当复杂，这里有一些简单的代码，演示当您想要将编辑控件封装在用于构建更复杂表单的组件中时如何连接编辑控件。

您应该能够将该方法应用于您的自定义控件。

首先是组件。注:

1. @bind 绑定(bind)的三个参数的定义。
2. 将这些连接到组件中的控件 - 在本例中是MudSelect
3. 选项列表的渲染片段。

// MySelect.razor
@typeparam TValue
@using System.Linq.Expressions

<MudSelect T=TValue <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c4a7d706979215c6874756f324a7d706979" rel="noreferrer noopener nofollow">[email protected]</a> 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; }
}

现在是简单的编辑器。注:

1. @bind-Value 到模型。
2. 控件以正确的选定值启动
3. 模型将按照显示值中的显示进行更新。

@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;
    }
}