MVC使用tag-it查看foreach列表(SO样式标记)

时间:2015-04-23 01:57:30

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

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

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

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

1 个答案:

答案 0 :(得分: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的上下文,并且您可以通过某种方式填充所有标签的列表以及应该选择的标签。