Blazor 自定义多选下拉组件 Webassembly答案

【问题标题】：Blazor Custom Multiselect Dropdown Component WebassemblyBlazor 自定义多选下拉组件 Webassembly
【发布时间】：2022-02-16 01:03:23
【问题描述】：

我厌倦了在网上搜索解决方案。基本上我正在使用 InputBase 将普通输入框扩展到自定义组件。对于单选来说还可以，但是当我进行多选“select multiple="multiple"”时会变得复杂

代码如下：

文件：XDropDownMultiSelect.razor

@using System.Linq.Expressions

@typeparam T
@inherits InputBase<T>

@if (!string.IsNullOrEmpty(Label))
{
    <label class="form-label">@Label</label>
}


<select @bind="CurrentValue" class="form-control select2 @CssClass" id="@Id" @attributes="AdditionalAttributes" multiple>

    @if (DropdownValues != null)
    {
        foreach (var cursor in DropdownValues)
        {
            <option value="@cursor.Key">@cursor.Value</option>
        }
    }
</select>

@code {
    [Inject] public IJSRuntime _js { get; set; }
    [Parameter, EditorRequired] public string Id { get; set; }
    [Parameter] public string Label { get; set; }
    [Parameter] public Expression<Func<T>> ValidationFor { get; set; }
    [Parameter] public bool ShowDefaultOption { get; set; } = true;
    [Parameter] public Dictionary<string, string> DropdownValues { get; set; }
    [Parameter] public string Selected { get; set; }

    protected override bool TryParseValueFromString(string value, out T result, out string validationErrorMessage)
    {
        if (typeof(T) == typeof(string))
        {
            result = (T)(object)value;
            validationErrorMessage = null;

            return true;
        }
        else if (typeof(T) == typeof(string[]))
        {
            result = (T)(object)(new string[] { value });
            validationErrorMessage = null;
            return true;
        }
        else if (typeof(T) == typeof(Guid))
        {
            Guid.TryParse(value, out var parsedValue);
            result = (T)(object)parsedValue;
            validationErrorMessage = null;

            return true;
        }
        else if (typeof(T).IsEnum)
        {
            try
            {
                result = (T)Enum.Parse(typeof(T), value);
                validationErrorMessage = null;

                return true;
            }
            catch (ArgumentException)
            {
                result = default;
                validationErrorMessage = $"The {FieldIdentifier.FieldName} field is not valid.";

                return false;
            }
        }


        throw new InvalidOperationException($"{GetType()} does not support the type '{typeof(T)}'.");
    }
}

我使用“CurrentValue”而不是“CurrentValueAsString”，因为它是一个没有字符串的数组，如果我设置 CurrentValueAsString 会出现渲染 json 问题...

现在我通过简单的方式调用：

 <XDropDownMultiSelect @bind-Value="usersSelected" Id="test" DropdownValues="usersAll" />

@code{
 public string[] usersSelected { get; set; } = new [] { "user1" };
 public string[] usersAll{ get; set; } = new [] { "user1", "user2", "user3" };

它可以工作，但不会将新的选择值绑定到我的 selectValues 对象。

【问题讨论】：

标签： c# blazor blazor-webassembly

【解决方案1】：

我找到了如何使用 CurrentValueAsString

 protected override string FormatValueAsString(T? value)
    {
      
        if( value != null)
        {
                return value.ToJson(); //this is extension my to convert any object to json format.
        }
       
        return base.FormatValueAsString(value);
    }

但这不会用新的选择更新源模型。

【讨论】：