Блог

Я пытаюсь создать страницу для создания рецепта, рецепт может содержать несколько тегов.

Это HttpGet, который дает мне представление для создания рецепта

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

Это моя ViewModel для страницы

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

На мой взгляд, это кнопка, которая вызывает действие для создания нового тега

<тип ввода = «отправить» asp-действие =»addTag» значение =»Добавить тег» класс =»btn btn-primary» />

И это действие в моем контроллере

     [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 тега, и я нажимаю кнопку X в среднем теге, тег с правильным индексом удаляется, но при перезагрузке представления он удаляет нижний тег вместо среднего тега, например: 2 тега, поэтому значения в моделиправильно, но значения в выпадающих списках нет.

Как я могу заставить выпадающие списки отображаться с правильными значениями?

Надеюсь, это имеет смысл для кого-то, кто все еще учится и еще не начал работать с javascript, поэтому любое решение без него было бы предпочтительнее, спасибо!

Казалось бы, публикация здесь заставила меня решить мою собственную проблему!

Вместо того, чтобы использовать asp-items taghelper для опций, я сделал foreach для SelectListItems в itemlist и заставил его установить selecteditem в if / else

Вот как я это исправил

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