如何在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>

我希望将select绑定到一个对象，但只想显示该对象的一些属性。 这会导致以下错误：

System.InvalidOperationException：类型“other_object”没有关联的TypeConverter支持从字符串进行转换。请将“TypeConverterAttribute”应用于该类型以注册转换器。

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

- mymemesarespiciest

---

你能分享更多的代码吗？这样无法确定类型。 - Flores

类型仍然缺失。 - Flores

检查一下，但这还需要更多的代码。你是如何初始化的？现在的代码不可能工作。 - Flores

你还需要什么？我只是在尝试弄清楚如何使用类型转换器来绑定我的对象。我认为我不需要提供更多的代码... - mymemesarespiciest

因为您现在拥有的代码，类型转换器是无法帮助您的。@object 是如何初始化的？ - Flores

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();
    ...
}

- agua from mars

---

你如何使用TypeConverter？ - mymemesarespiciest

@mymemesarespiciest 我加了TypeConverterAttribute文档的链接。 - agua from mars

Answer 2

如果由于任何原因需要在此处创建对象，则可以按照以下方式执行：

<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>

- MarchalPT

Answer 3

这是一个使用 @bind-Value:get 和 @bind-Value:set 在 Blazor 中将对象绑定到 <select> 选项的解决方案。在此示例中，我们使用 <InputSelect> 将选择的值绑定到一个 selected 属性，并定义一个 SetSelected 方法，将从 ListOtherObjects 列表中选择的对象更新到 object 对象中。

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

我希望这个解决方案能帮到你。如果你有任何问题或需要更多信息，请让我知道。

- Laaziv