选择选项下拉菜单未显示所选选项

Question

我有一个Blazor应用程序，它使用来自数据库的数据填充了6个选择选项下拉列表。其中三个使用字符串列表中的日期和时间进行填充。

当我选择日期和时间后，它不会显示在下拉框中。选择日期时间后，下拉框为空，但实际上已经选择并绑定成功。只是没有显示出来。

如果我删除 "bind=@..." ，它就可以正确显示。

有其他人遇到过这个问题吗？你是如何解决的？

<select bind="@Innput.Klokkeslett1">
                        <option value="@(0)">Tid1</option>
                        @foreach (var tid1 in tidListe)
                        {
                            <option value="@tid1">@tid1</option>
                        }
                    </select>

- johajan

---

请展示您的全部代码... - enet

Answer 1

需要翻译的内容如下：

需要注意两点，select使用字符串值，并且该值需要与option的值匹配。 因此，如果您的字段Input.Klokkeslett1是DateTime类型，则需要使用属性处理字符串和DateTime之间的绑定/转换。 如果确保对值使用明确的日期格式，并且您的属性以相同的日期格式返回其值，则将能够将其与其之一的匹配并显示相应的文本，可以以任何您喜欢的方式进行格式化。 <select bind="@MySelectProxy"> <option value="@(0)">Tid1</option> @foreach (var tid1 in tidListe) { <option value="@tid1.ToString("yyyy-MM-dd HH:mm:ss")">@tid1</option> } </select> @functions { string MySelectProxy { get => Innput.Klokkeslett1.ToString("yyyy-MM-dd HH:mm:ss"); set => DateTime.TryParse(value, out Innput.Klokkeslett1); } }

- Mister Magoo

---

我还没有尝试过你的解决方案，但它让我思考了一下，我发现我的代码中犯了一个愚蠢的错误，即将日期从数据库填充到字符串列表中，这导致了一些问题。一旦我在控制器中将其更改为Datetime列表等等，就解决了所有问题，现在在选择时日期显示正确。 - johajan

可能会帮助其他遇到困难的人：您需要在<option>中使用Blazor代码才能使重新绑定起作用。我花了很长时间才发现这一点。因此，在填充<option>时，请使用@foreach，就像这个例子一样。 - Sire

Answer 2

<select onchange="@ComboSelectionChanged">
        <option value="0" selected>
            @list[0]
        </option>
        @for (int i = 1; i < list.Count; i++)
        {
            <option value="@i">
                @list[i]
            </option>
        }
    </select>    

public void ComboSelectionChanged(UIChangeEventArgs e)
    {
        if (int.TryParse(e.Value.ToString(), out int index))
        {
            SelectedStyleIndex = index
             //now you know which one is selected

        }
    }    

- Vakhtangi Abashidze

---

你没有回答他的问题，即为什么选定的项目未显示，尽管“实际上已选择该值并绑定有效”。 - enet

顺便提一下，这是Steve Senderson对你所做的事情的看法：“如果是我，我不想使用onchange事件、解析整数并且通常依赖于DOM来跟踪下拉列表的选定索引。与其如此，我更喜欢在C#中建模选择，并使用Blazor的双向绑定与DOM同步。” - enet

这是简单且可行的解决方案，你可以继续寻找更好的方式。我已经尽力了。下面的第二个答案看起来更好。 - Vakhtangi Abashidze

从版本3 Blazor开始，第二个答案将不起作用，因为UIChangeEventArgs已被弃用。 - MC9000