如何从 Select2 选项/值（标签）获取数据到 asp.net mvc 中的控制器？

Question

我正在尝试使用 Select2 来编辑文章的标签。我的问题是，我的视图模型中的 Tags 字段在返回到控制器时为空。

一个 ArticleTag 有一个 Id 和一个 Name 字段。

视图模型

public class EditArticleViewModel
{
    public Guid Id { get; set; }
    public string Header { get; set; }
    public string Description { get; set; }
    [AllowHtml]
    public string Body { get; set; }
    public string Image { get; set; }
    public bool IsPublished { get; set; }
    [UIHint("TagsEditor")]
    public IList<ArticleTag> Tags { get; set; }
}

编辑文章视图

<div class="form-group">
@Html.LabelFor(model => model.Tags, new { @class = "control-label col-md-2" })
<div class="col-md-10">
    @Html.EditorFor(model => model.Tags)
    @Html.ValidationMessageFor(model => model.Tags, "", new {@class = "text-danger"})       
</div>

<script type="text/javascript">
    $('#tags')
        .select2({
            data: ["Clare", "Cork", "South Dublin"],
            tags: true,
            tokenSeparators: [','],
            placeholder: "Add your tags here"
        });
</script>

编辑器模板

@model List<MVCForum.Domain.DomainModel.CMS.ArticleTag>
<select id="tags" multiple="multiple" style="width: 100%">
@for (int i = 0; i < Model.Count; i++)
{       
    <option selected="selected">@Model[i].Name</option>
}
</select>

现在我只是不知道如何将数据从我的编辑器模板/视图获取到控制器。返回时列表为空。

我已尝试将其更改为字符串列表（在视图模型、编辑器模板等中）。我试图为名称字段添加一个编辑器模板。结果一样。

对我来说最好的办法实际上是将标签作为逗号分隔的字符串。但我只是不希望它以某种方式工作。

Answer 1

<select multiple> 回发一个简单值数组，而不是复杂对象，因此您不能绑定到属性IList<ArticleTag> Tags。您的视图模型应包含要绑定的属性和选项的属性（以下假设您要回发每个选定的 ArticleTag 的 Name 属性）。

public class EditArticleViewModel
{
    public Guid Id { get; set; }
    ....
    [Display(Name = "Tags")]
    public IEnumerable<string> SelectedTags { get; set; }
    public IEnumerable<SelectListItem> TagsList { get; set; }
}

您的 GET 方法将是

var tags = db.ArticleTag.Select(x => x.Name);
var model = new EditArticleViewModel()
{
     TagsList = new SelectList(tags),
     SelectedTags = ... // set values to be selected initially if required
};
return View(model);

然后删除您的 EditorTemplate 并将其替换为强类型 ListBoxFor() 方法，以便它绑定到您的模型属性

@Html.ListBoxFor(m => m.SelectedTags, Model.TagsList)

并修改脚本以使用ListBoxFor()方法生成的id属性

$('#SelectedTags').select2({
    tags: true,
    tokenSeparators: [','],
    placeholder: "Add your tags here"
});