<select> помощник по тегам не помечает опции как "выбранные" в множественном выборе - PullRequest
Новая
       19

<select> помощник по тегам не помечает опции как "выбранные" в множественном выборе

0 голосов
/ 21 февраля 2020

Возьмите следующую модель: 

public class SomeModel
{
    public ICollection<Tag> Tags { get; set; }
}

public class Tag
{
    public int Id { get; set; }
    public string Value { get; set; }
}

Модель - это какой-то объект (например, запись в блоге), который содержит список тегов или ключевых слов.

У меня есть Razor view, показывающий форму для редактирования объекта SomeModel: 

@model SomeModel
@{
    // List of available tags is passed by controller
    var tags = (List<Tag>)ViewData["Tags"];
}
<label asp-for="Tags">Tags</label>
<select asp-for="Tags"
        asp-items="@(new SelectList(tags, nameof(Tag.Id), nameof(Tag.Value)))">
</select>

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

<label for="Tags">Tags</label>
<select class="input-validation-error"
        data-val="true" data-val-required="The Tags field is required."
        id="Tags" multiple="multiple" name="Tags">
    <option value="1">tag1</option>
    <option value="2">tag2</option>
</select>

@Model.Tags правильно содержит назначенные в настоящее время теги; однако соответствующие параметры не помечены как selected.

Как мне исправить это поведение?

1 Ответ

1 голос
/ 21 февраля 2020

Необходимо создать свойство для передачи выбранных данных и связать его с атрибутом asp-for тега select.

Index.cs html .cs: 

public class IndexModel : PageModel
{
    [BindProperty]
    public List<int> SelectedTags { get; set; } =  new List<int>{  2, 3 };
    [BindProperty]
    public List<Tag> Tags { get; set; }
    public void OnGet()
    {
        Tags = new List<Tag> {
    new Tag { Id = 1, Value="Mike" },
    new Tag { Id = 2, Value="Pete" },
    new Tag { Id = 3, Value="Katy" },
    new Tag { Id = 4, Value="Carl" } };

    }
}

Index.cs html: 

@page
@model WebApplication1_rzaor_page.IndexModel
@{
    ViewData["Title"] = "SelectTag";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>SelectTag</h1>

<label asp-for="Tags">Tags</label>
<select asp-for="SelectedTags"
        asp-items="@(new SelectList(Model.Tags, "Id","Value"))">
</select>

Результат этой демонстрации

Вы можете обратиться по этой ссылке: Настройка выбранного элемента

...