下拉列表未显示正确的 SelectedItem答案

【问题标题】：Dropdown List not showing correct SelectedItem下拉列表未显示正确的 SelectedItem
【发布时间】：2021-03-08 09:42:08
【问题描述】：

我正在尝试制作一个页面来创建一个食谱，一个食谱可以包含多个标签。

这是让我获得创建配方的视图的 HttpGet

 [HttpGet]
    public ViewResult Index() {
        return View(new RecipeViewModel { 
            TagsFromDb = repository.Tags.ToList()
    }

这是我的页面视图模型

public class RecipeViewModel : Recipe {
    public List<Tag> Tags { get; set; } = new List<Tag>();
    public List<Tag> TagsFromDb { get; set; }

这是我视图中调用操作以创建新标签的按钮

这是我控制器中的操作

    [HttpPost]
    public IActionResult AddTag(RecipeViewModel model) {
        model.Tags.Add(new Tag());
        return View("Index", model);
    }

这是我认为为添加的每个标签创建一个新下拉列表的代码

 <div class="form-group">
                @if (Model.Tags.Count > 0) {
                    @for (int i = 0; i < Model.Tags.Count; i++) {
                        List<SelectListItem> items = new List<SelectListItem>();
                        foreach (Tag tag in Model.TagsFromDb) {
                            items.Add(new SelectListItem() {
                                Text = tag.Name,
                                Value = tag.ID.ToString(),
                                Selected = tag.ID == Model.Tags[i].ID ? true : false
                            });
                        }
                <div class="d-flex justify-content-center">
                    <select asp-for="@Model.Tags[i].ID" asp-items="items" class="form-control">
                        <option value="">Vælg tag</option>
                    </select>
                    <button class="btn-danger" asp-action="RemoveTag" type="submit" name="index" value="@i">X</button>
                </div>
                    }
                }
            </div>

这是控制器中的删除操作

    [HttpPost]
    public IActionResult RemoveTag(RecipeViewModel model, int index) {
        model.Tags.RemoveAt(index);
        return View("Index", model);
    }

头疼的来了..

添加标签并保存它们的值可以正常工作，删除它们也是如此。但是，假设我添加了以下 3 个标签： 3 tags 然后我按下中间标签上的 X 按钮，正确索引处的标签被删除，但是当视图重新加载时，它会删除底部标签而不是中间标签，如下所示： 2 tags 因此模型中的值是正确的，但下拉列表中的值不正确。

如何让下拉菜单显示正确的值？

希望这对仍在学习且尚未开始使用 javascript 的人有意义，因此任何没有的解决方案都是首选，谢谢！

【问题讨论】：

标签： asp.net-mvc asp.net-core html.dropdownlistfor

【解决方案1】：

似乎在这里发帖让我解决了我自己的问题！

我没有使用 asp-items taghelper 作为选项，而是在 itemlist 中的 SelectListItems 上创建了一个 foreach，并将其设置为 if/else 中的 selecteditem

这是我修复它的方法

   <div class="form-group">
                @if (Model.Tags.Count > 0) {
                    @for (int i = 0; i < Model.Tags.Count; i++) {
                        var items = new List<SelectListItem>(Model.TagsFromDb.Select(tag => new SelectListItem() {
                            Value = tag.ID.ToString(),
                            Text = tag.Name,
                            Selected = tag.ID == Model.Tags[i].ID ? true : false
                        }).ToList());
                        <div class="d-flex justify-content-center">
                            <select asp-for="@Model.Tags[i].ID" class="form-control">
                                <option value="">Vælg tag</option>
                                @foreach (SelectListItem item in items) {
                                    if (item.Selected) {
                                        <option selected="selected" value="@item.Value">@item.Text</option>
                                    }
                                    else {
                                        <option value="@item.Value">@item.Text</option>
                                    }
                                }
                            </select>
                            <button class="btn-danger" asp-action="RemoveTag" name="index" value="@i">X</button>
                        </div>
                    }
                }
            </div>

【讨论】：