<select> 标记帮助程序未在多选选项中将选项标记为"selected"

Question

采用以下模型：

public class SomeModel
{
public ICollection<Tag> Tags { get; set; }
}
public class Tag
{
public int Id { get; set; }
public string Value { get; set; }
}

模型是某种对象(例如，博客条目(，其特征是标签或关键字列表。

我有一个Razor视图，显示了一个编辑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>

CCD_ 2正确地包含当前分配的标签；然而，相应的选项没有被标记为selected。

如何修复此行为？

Answer 1

您需要创建一个属性来传递所选数据，并将其绑定到select标记的asp-for属性。

索引.cshtml.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.chtml:

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

演示结果

您可以参考此链接：设置所选项目

Answer 2

存储所选值的表列宽必须与检索列表值的引用表列宽具有相同的长度。

如果两列的长度不同，则比较将为false，并且不会选择任何选项值。