使用 ViewBag 作为数据源插件的 Jquery TagIt 问题答案

【问题标题】：Jquery TagIt issue using ViewBag as datasource plugin使用 ViewBag 作为数据源插件的 Jquery TagIt 问题
【发布时间】：2013-02-20 09:11:53
【问题描述】：

我想用 ViewBag 绑定数据来标记它，不幸的是它不起作用。

所以，这是我的控制器：

    public ActionResult ArticleEdit(Guid id)
    {
        ViewBag.Tags = db.Tags.Select(tag => tag.Name).ToList();

        Article article = db.Articles.Single(a => a.ArticleID == id);
        return View(article);
    }

我的看法：

    <div class="tags">
        <label for="tags">
            Tags</label>
        <ul id="mytags">
        </ul>
    </div>

Javascript：

$(document).ready(function () {
    $("#mytags").tagit({
        availableTags: @Html.Raw(Json.Encode(@ViewBag.Tags))
    });
});

它呈现为：

$(document).ready(function () {
   $("#mytags").tagit({
   availableTags: ["boool! ","asd ","asdasdasd "]
   });
});

如果我使用 availableTags: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]

它工作得很好。

我尝试了使用 ViewBag 的常规 jquery 自动完成插件，它可以工作。这是它的代码：

 <div class="ui-widget">
     <label for="tags">
         Tags:
     </label>
     <input id="tags" />
 </div>

 $(function() {
    var availableTags = @Html.Raw(Json.Encode(@ViewBag.Tags));
    $( "#tags" ).autocomplete({
    source: availableTags
    });
});

有什么想法吗？

我正在使用带有 Razor 的 MVC3。而当我availableTags 和ViewBag 时，输入字段就消失了。

【问题讨论】：

您能否仔细检查呈现的 HTML，因为它应该可以工作：jsfiddle.net/XT6Aj。你检查你的浏览器JS控制台有没有错误？
我检查了两次，效果很好。我在视觉工作室只有conditional compilation is turned off。无论如何它现在可以工作了，感谢您关注我的问题）
嗨@makambi。无需将标题标记为 [已修复] - 只需勾选您的答案 :)。
嗨@halfer，You can accept your own answer in 2 days，现在最好标记为已解决）
啊，我忘记了。不用担心，几天后再回来 - 我的观点是，为了保持一致性，标题最好不要自制标签。

标签： jquery asp.net-mvc-3 razor viewbag tag-it

【解决方案1】：

嗯，我变了

$(document).ready(function () {
    $("#mytags").tagit({
        availableTags: @Html.Raw(Json.Encode(@ViewBag.Tags))
    });
});

到

    var myTags = @Html.Raw(Json.Encode(@ViewBag.Tags));

    $(document).ready(function () {
        $("#mytags").tagit({
            availableTags: myTags
        });
    });

现在可以使用了

【讨论】：