使用Razor引擎在MVC 5和Select2多值中进行数据绑定

Question

通常我在应用程序的html方面做的很少,因为在大多数情况下我只是让它为我生成.

我正在开发一个带有帖子标签和评论的博客的应用程序.我想要做的是在创建新帖子时,我应该能够将现有标签添加到新帖子中.我正在尝试使用Select2,但我无法弄清楚如何将所选值传递给post控制器中的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代码遗漏了

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

哪个产生;

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属性。

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

Answer 2

<select multiple>
我认为它与例如 相同

    <select name="abc" multiple>
        <option value=1>a</option>
        <option value=2>b</option>
        <option value=3>c</option>
        <option value=4>d</option>
    </select>

您选择选项a和选项b，然后使用post方法提交表单，
post数据将为
abc 1
abc 2
，您可以使用如下参数在mvc操作中获取数据IEnumeralbe<int> abc

行动会喜欢

public ActionResult ActionName(IEnumerable<int> abc)  

select2插件只改变视图，发布数据也使用http post