Jquery TagIt issue using ViewBag as datasource plugin

Question

I want to bind data to tag it with ViewBag and unfortunately it does not work.

So, here is my controller:

    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);
    }

And my view:

    <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))
    });
});

It renders as:

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

If I use availableTags: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]

it work perfectly fine.

I tried regular jquery auto complete plugin with ViewBag and it works. Here is code for it:

 <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
    });
});

Any ideas what can it be?

I am using MVC3 with Razor. And when I availableTags with ViewBag, input field just disappear.

Answer 1

Hm, I changed

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

to

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

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

and it works now