MVC View foreach list with tag-it (SO style tagging)答案

【问题标题】：MVC View foreach list with tag-it (SO style tagging)MVC View foreach list with tag-it (SO style tagging)
【发布时间】：2015-04-23 01:57:30
【问题描述】：

我正在用一些复选框在我的 MVC 视图中填充一个表，我希望使用 tag-it 来获得与 SO 相同的效果。

只是想知道是否有人知道如何将我的 foreach 方法与 tag-it 结合起来，这样当输入一个标签时，它首先会填充来自我列表的任何内容，然后如果它是选择输入字段。

<script type="text/javascript">
    $(document).ready(function() {
        $("#myTags").tagit();
    });
</script>

<ul id="myTags">
    <!-- Existing list items will be pre-added to the tags -->
    <li>Tag1</li>
    <li>Tag2</li>
</ul>

查看：

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <table>
            <tr>
                @{
                    int cnt = 0;
                    List<MyBlogger.Models.Tag> tag = ViewBag.Tags;
                    foreach (var tags in tag)
                    {
                        if (cnt++ % 3 == 0)
                    {
                    @:</tr><tr>
                        }
                        @:<td>
                             <input type="checkbox"
                                    name="selectedTags"
                                    value="@tags.Id"
                                    @(Html.Raw(tags.Assigned? "checked=\"checked\"" : "")) />
                                    @tags.Id @:  @tags.Name
                        @:</td>
                     }
                  @:</tr>
                }
            </table>
        </div>
    </div>

【问题讨论】：

你真的应该使用合适的 ViewModel 来让这个逻辑脱离视图。
为什么要删除上一个问题？我正在起草一个答案！你似乎有这样做的习惯。

标签： javascript jquery html asp.net-mvc tag-it

【解决方案1】：

在你看来：

<script type="text/javascript">
    $(document).ready(function() {
        $("#myTags").tagit({
            availableTags: @ViewBag.AllTags
        });
    });
</script>

<ul id="myTags">
    @foreach (var tag in (ViewBag.SelectedTags as List<MyBlogger.Models.Tag>))
    {
           <li>@tag.Name</li>
    }
</ul>

在您的控制器中：

JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
ViewBag.AllTags = serializer.Serialize(context.Tags.ToArray());
ViewBag.SelectedTags = context.Tags.Where(w => w.Selected).ToList();

假设您使用的是 EF 的上下文，并且您有某种方法可以填充所有标签的列表以及应选择的标签。

【讨论】：