c# - MVC 5 中的数据绑定(bind)和使用 Razor 引擎的 Select2 Multiple Values

Question

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

我正在为一个带有帖子标签和评论的博客开发应用程序。我想要做的是在创建新帖子时，我应该能够将现有标签添加到新帖子中。我正在尝试使用 Select2，但我不知道如何将选定的值传递到后 Controller 中的 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; }
    }
}

后 Controller

// 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 代码被遗漏了

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

View :通常我会有类似的东西

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

哪个产生；

Answer 1

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

View

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

ViewModel

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

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

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