MVC 5 中的数据绑定和使用 Razor 引擎的 Select2 Multiple Values

Question

通常我在应用程序的 html 端做很少的工作，因为在大多数情况下我只是让它为我生成。

我正在为带有帖子标签和评论的博客开发应用程序。我想要做的是在创建新帖子时，我应该能够将现有标签添加到新帖子中。我正在尝试使用 Select2，但我不知道如何将选定的值传递到后控制器中的 Create 方法，以便将它们存储在数据库中。

这是我正在使用的：

 namespace Blog.Data.Entities
{
    public class Post
    {
        public virtual long PostId { get; set; }

        -------------------

        public virtual ICollection<Tag> Tags { get; set; }
    }

    public class Tag
    {
        public virtual long TagId { get; set; }
        public virtual string Name { get; set; }
        public virtual string Description { get; set; }
    }
}

后控制器

// POST: /Post/Create
    [HttpPost]
    public ActionResult Create(PostsCreateViewModel postModel)
    {
        if (ModelState.IsValid)
        {
            Post post = new Post
            {
                Title = postModel.Title,
                Body = postModel.Body,
                PostDate = _dateTime.UtcNow
            };

            foreach (var tag in postModel.Tags)
            {
                post.Tags.Add(_tagRepository.GetTag(tag.TagId));
            }

            _postRepository.SavePost(post);

            return RedirectToAction("Detail");
        }
        return View(postModel);
    }

我成功地能够从远程加载数据： Json code left out

 <script type="text/javascript">
    $(document).ready(function () {
        $("#tags").select2(
        {
            placeholder: "Select a Tag",
            minimumInputLength: 1,
            multiple: true,
            maximumSelectionSize: 5,
            ajax: {
                url: '@Url.Action("SearchTag", "Post")',
                dataType: 'json',
                data: function (term, page) {
                    return {
                        searchTerm: term,
                        page_limit: 10,
                        page: page,
                    };
                },
                results: function (data, page) {
                    var more = (page * 10) < data.total;
                    return { results: data, more: more };
                }
            }
        });
    });
</script>

视图：通常我会有类似的东西

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

我如何为我的标签文本框编写类似的 html，以便在我单击“保存”时将所有内容保存到适当的表格中？

目前我只有这个用于 select2：

 <div class="form-group">
    @Html.LabelFor(model => model.Tags, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <input id="tags" style="width: 300px" />
        @Html.ValidationMessageFor(model => model.Tags)
    </div>
</div>

哪个产生；

原文由 Komengem 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我也在使用 select2，这对我有用：

风景

@Html.ListBoxFor(M => M.TagsId, new MultiSelectList(Model.Tags, "Id", "Description"), new { @class = "form-control select-multiple", multiple = "multiple" })

视图模型

 public List<Tag> Tags { get; set; } = new List<Tag>();
 public int[] TagsId { get; set; }

您可以使用 Tags 集合来填充多项选择中的选项，并且 TagsId 数组将填充所选标签的 ID。如果您通过 ajax 填充选择选项，我想您可以忽略 Tags 属性。

注意我使用的是多输入选择而不是文本框。

原文由 Roger Saladrigas 发布，翻译遵循 CC BY-SA 4.0 许可协议