如何創建自定義 Blazor 多選 HTML 組件？ 錯誤：MultipleSelect 需要“ValueExpression”參數的值

Question

我正在創建一個自定義 Blazor 多選 HTML 組件。 在我添加驗證之前它一直有效。 此外，如果我禁用多項選擇並保留驗證，它可以工作。

當啟用帶有驗證的多項選擇時，我收到此錯誤：

InvalidOperationException: MultipleSelect requires a value for the 'ValueExpression' parameter. Normally this is provided automatically when using 'bind-Value'.

我無法使用 'bind-Value' 屬性，因為我收到此錯誤。

到目前為止，我能夠找到的文檔僅解決了在不使用多選選項時從 HTML <select>元素構建自定義組件的問題。

如何創建啟用多選的<select>元素？

自定義多選組件

MultipleSelect.razor

@using CustomComponents.DataModels
@using System.Linq.Expressions
@using System
@using System.Collections.Generic
@inherits InputBase<string>

<div class="row">
    <div class="col-3">
        <select id="@Id" @bind=@CurrentValue class="form-control @CssClass" multiple="multiple" size="@BoxHieght" style="width:@BoxWidth">
            @foreach (var option in Options)
            {
                <option @onclick="@(() => SelectOption(option))" value="@option.Value">@option.Text</option>
            }
        </select>
    </div>
</div>

@code {
    [Parameter]
    public string Id { get; set; }
    [Parameter]
    public List<Option> Options { get; set; } = new List<Option>();
    [Parameter]
    public Option SelectedOption { get; set; } = new Option { Text = " ", Value = " " };
    [Parameter]
    public int BoxHieght { get; set; } = 5;
    [Parameter]
    public string BoxWidth { get; set; } = "auto";
    [Parameter, EditorRequired]
    public Expression<Func<string>> ValidationFor { get; set; } = default!;

    private void SelectOption(Option option)
    {
        SelectedOption = option;
    }
    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
    {
        try
        {
            result = value;
            validationErrorMessage = null;
            return true;
        }
        catch (Exception exception)
        {
            result = null;
            validationErrorMessage = exception.Message;
            return false;
        }

    }    
}

選項數據模型對象

選項.cs

namespace CustomComponents.DataModels
{
    public class Option
    {
        public string Text { get; set; }
        public string Value { get; set; }
    }
}

網絡表單模型

表單模型.cs

using CustomComponents.Data.DataModels;

namespace BlazorApp2.Pages.PageModels
{
    public class FormModel
    {
        public Option Option { get; set; } = new Option();
    }
}

數據模型

狀態.cs

using System.ComponentModel.DataAnnotations;

namespace BlazorApp2.Data.DataModels
{
    public class State
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public string Abbreviation { get; set; }
    }
}

網頁表格

索引.razor

@page "/"
@using CustomComponents.Components
@using CustomComponents.Data.DataModels
@using CustomComponents.Pages.PageModels
<PageTitle>Mutiple Select Component</PageTitle>

<EditForm Model="@model" OnValidSubmit="ValidSubmit">  
<DataAnnotationsValidator /> 
<ValidationSummary />
<MyComponent Options="@options" @bind-Value="@model.Option" ValidationFor="() => State.Name"></MyComponent>
Selected option:
<div class="row">
    <div class="col">
        @model.Option.Value  @model.Option.Text
    </div>

</div>
<div class="row">
    <div class="col">
        <button class="btn btn-primary" type="submit">Submit</button>
    </div>
</div>
<div class="row">
    <div class="col">
        @if (formSubmitted) @FormSubmitted
    </div>
</div>
<div class="row">
    <div class="col">
        @if (formSubmitted) @StateSubmitted
    </div>
</div>
</EditForm>

    @code {
    private List<Option> options = new List<Option>();
    public FormModel model = new FormModel();
    public State State { get; set; } = new State();
    private List<State> states = new List<State>
    {
        new State { Name = "Utah", Abbreviation = "UT" },
        new State { Name = "Texas", Abbreviation = "TX" },
        new State { Name = "Florida", Abbreviation = "FL" }
    };
    public string FormSubmitted { get; set; } = "Form submitted.";
    public string StateSubmitted { get; set; } = string.Empty;
    private bool formSubmitted = false;

    protected override void OnInitialized()
    {
        foreach(State state in states)
        {
            options.Add(new Option{ Value = state.Abbreviation, Text = state.Name});
        }
        model.Option = options[0];
    }

    public void ValidSubmit()
    {
        State.Abbreviation = model.Option.Value;
        State.Name = model.Option.Text;
        formSubmitted = true;
        StateSubmitted = $"{State.Abbreviation}  {State.Name}";
    }
}

Answer 1

因為繼承了組件InputBase，所以必須使用bind-value。 我編輯了很多代碼以使其工作

@using BlazorApp2.Client.Components
@using System.Linq.Expressions
@using System
@using System.Collections.Generic
@using System.Diagnostics.CodeAnalysis
@inherits InputBase<Option>

<div class="row">
    <div class="col-3">
        <select id="@Id" class="form-control" size="@BoxHieght" style="width:@BoxWidth"
        @bind="OptionValueSelected"  @bind:event="oninput">
            @foreach (var option in Options)
            {
                <option value="@option.Value">@option.Text</option>
            }
        </select>

        <p>Selected option:@SelectedOption.Value </p>
    </div>
</div>

@code {
    [Parameter]
    public string Id { get; set; }
    [Parameter]
    public List<Option> Options { get; set; } = new List<Option>();
    [Parameter]
    public Option SelectedOption { get; set; } = new Option { Text = " ", Value = " " };
    [Parameter]
    public int BoxHieght { get; set; } = 5;
    [Parameter]
    public string BoxWidth { get; set; } = "auto";
    [Parameter, EditorRequired]
    public Expression<Func<string>> ValidationFor { get; set; } = default!;

    private string OptionValueSelected
    {
        get => CurrentValue.Value;
        set
        {
            CurrentValue = Options.Find(o => o.Value == value);
        }
    }

    protected override bool TryParseValueFromString(string value,
        [MaybeNullWhen(false)] out Option result, [NotNullWhen(false)] out string validationErrorMessage)
    {
        try
        {
            result = Options.First(o => o.Value == value.ToString());
            validationErrorMessage = null;
            return true;
        }
        catch (Exception exception)
        {
            result = null;
            validationErrorMessage = exception.Message;
            return false;
        }
    }
}

經過很長時間的研究，以下是我所做的一些重要更改：

• 繼承自 Option 類型的 InputBase 而不是字符串。 原因：所以表單上下文知道類型並正確綁定
• 使用 setter 將值與屬性綁定。 原因：從字符串轉換為選項
• 從 Input base CurrectValue 設置 SelectedOption 的值。 原因：提醒表單上下文有關更改，以便更新主視圖

我在新項目中使用此頁面測試了組件：

@page "/"
@using BlazorApp2.Client.Components

<PageTitle>Index</PageTitle>

@code {
    List<Option> options = new List<Option>
    {
        new Option{Text = "Test1", Value = "Test1"},
        new Option{Text = "Test2", Value = "Test2"}
    };
    ExampleModel model;

    protected override void OnInitialized()
    {
        model = new ExampleModel();
    }
}

<h1>Hello, world!</h1>


<EditForm Model="@model">   
<MyComponent Options="@options" @bind-Value="@model.Option"></MyComponent>
</EditForm>
<p>@model.Option.Text : @model.Option.Value</p>

示例模型：

public class ExampleModel
{
    public Option Option { get; set; } = new Option();
}

資源幫助我進行了研究：

Blazor 組件

Blazor 表單組件綁定

Blazor 自定義綁定