MVC View foreach list with tag-it（SO 样式标记）

Question

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

只是想知道是否有人知道如何将我的 foreach 方法与 tag-it 合并，以便在键入标签时它首先填充来自我的列表的任何内容，然后填充它 "selected" 如果它是一个选择的输入字段。

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

Answer 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 的上下文，并且您有一些方法来填充所有标签以及应选择的标签的列表。

MVC View foreach list with tag-it（SO 样式标记）

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

html

javascript

asp.net-mvc

jquery

tag-it