如何将对象绑定到 Blazor 中的 <select> 选项？

Question

我有以下下拉菜单：

public class object {
    public other_object apple {get; set;}
    ...
    public string stuff {get; set;}
    ...
}

public class other_object {
    public string id {get; set;}
    public string name {get; set;}
}

<select class="custom-select" @bind="@object.apple">
     <option value="@object.apple">@object.apple.name</option>
     ...
</select>

我想将选择绑定到一个对象，但只想显示该对象的某些属性。这会给我错误：

System.InvalidOperationException：类型“other_object”不 有一个 关联的 TypeConverter 支持字符串转换。申请 'TypeConverterAttribute' 到要注册转换器的类型。

这可以做到吗？我不太确定类型转换器是如何工作的。

Answer 1

您无法绑定到

other_object

，您可以绑定到

other_object

的字符串属性或使用

TypeConverterAttribute

将

other_object

转换为字符串。

您的代码可以是：

<select class="custom-select" @bind="@_selected.id">
     <option value="@object.apple.id">@object.apple.name</option>
     ...
</select>
@code {
    private other_object _selected = new other_object();
    ...
}

Answer 2

以下是使用

<select>

和

@bind-Value:get

将对象绑定到 Blazor 中的

@bind-Value:set

选项的解决方案。在此示例中，我们使用

<InputSelect>

将选定值绑定到

selected

属性，并定义

SetSelected

方法以使用从

object

列表中选定的对象更新

ListOtherObjects

对象。

<InputSelect @bind-Value:get="selected" @bind-Value:set="SetSelected" class="form-control">
    <option value="">Select an option</option>
    @foreach (var value in ListOtherObjects)
    {
        <option value="@value.Id">@value.name</option>
    }
</InputSelect>

@code {
    private string selected = null!;
    private List<other_object> ListOtherObjects = new() { new() { id = 1, name = "name1" }, new() { id = 2, name = "name2" } };
    public object object { get; set; } = new();

    void SetSelected(string value)
    {
        var _ = ListOtherObjects.Find(e => e.Id == value);
        if (_ != null)
            object.apple = _;
        selected = value;
    }
}

我希望这个解决方案对您有所帮助。如果您有任何疑问或需要更多信息，请告诉我。

Answer 3

如果出于任何原因您需要在此处创建对象，您可以这样做：

<InputSelect @bind-Value="@object.apple.id" @onchange="@((args) => @object.apple = new other_object { id = (int)args.Value })" class="form-control">
      <option value="@object.apple.id">@object.apple.name</option>                        
</InputSelect>

Answer 4

如果您有可供选择的对象列表，则可以使用 Radzen Blazor 组件 自定义对象绑定下拉列表。

    <RadzenDropDown [email protected] TValue="other_object" @[email protected]/>