I want to use my ViewBag in JavaScript array. I follow using viewbag with jquery asp mvc 3, and I think the following code is what I am looking for,

 @model MyViewModel

<script type="text/javascript">
   var model = @Html.Raw(Json.Encode(Model));
    // at this stage model is a javascript variable containing
    // your server side view model so you could manipulate it as you wish
   if(model.IsLocal)
   {
       alert("hello " + model.FirstName);
   }
</script>

But this code causes error for Json.Encode, then I add System.Runtime.Serialization.Json, but It also cause error for Encode, says no method for Encode, I already include Newtonsoft.Json, but still no result.

My ViewBag data ::

 public ActionResult Dashboard() 
 {
    ViewBag.inc = (from inc in db.Incident select inc.Title).ToList();
    return View();
 }

And I want to use this ViewBag.inc data in JavaScript array

I want to use my ViewBag in JavaScript array. I follow using viewbag with jquery asp mvc 3, and I think the following code is what I am looking for,

 @model MyViewModel

<script type="text/javascript">
   var model = @Html.Raw(Json.Encode(Model));
    // at this stage model is a javascript variable containing
    // your server side view model so you could manipulate it as you wish
   if(model.IsLocal)
   {
       alert("hello " + model.FirstName);
   }
</script>

But this code causes error for Json.Encode, then I add System.Runtime.Serialization.Json, but It also cause error for Encode, says no method for Encode, I already include Newtonsoft.Json, but still no result.

My ViewBag data ::

 public ActionResult Dashboard() 
 {
    ViewBag.inc = (from inc in db.Incident select inc.Title).ToList();
    return View();
 }

And I want to use this ViewBag.inc data in JavaScript array

• javascript
• jquery
• asp
• asp-mvc
• json

• not seeing any ViewBag.inc in your script, what actually you want to do? where's is your viewbag.inc? How bout show us also your controller? – Se0ng11 Commented May 6, 2014 at 6:02

3 Answers 3

As you said, you are already referencing the Newtonsoft Json.Net library, you can use this following code::

 var inc = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.inc))';

 inc= JSON.parse(inc);

 $.each(inc, function(index, data) {
     //you next code
 });

The snippet you are using does not use the ViewBag, but the Model. Regardless, if you want to print the serialisation of an object to the view, and you are already referencing the Newtonsoft Json.Net library (as you said you are), then you can do the following:

var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));

If you want to use the item in the ViewBag instead, you can do:

var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.inc));

You can use like for ViewBag -

var mn =  @{@Html.Raw(Json.Encode(ViewBag.ViewBagProperty));}
alert(mn.YourModelProperty);

And for Model -

var mn =  @{@Html.Raw(Json.Encode(Model));}
alert(mn.YourModelProperty);

There is no need for NewtonSoft.Json, we can use default System.Web.Helpers.Json.

Update: Here goes the plete solution with Model, the same concept can be used with ViewBag too -

Lets say you have this Model -

public class XhrViewModel
{
    public string data1 { get; set; }
    public string data2 { get; set; }
}

Then in the controller action you are constructing the List of above Model in following way -

    public ActionResult GetData()
    {
        List<XhrViewModel> model = new List<XhrViewModel>();
        model.Add(new XhrViewModel() { data1 = "Rami", data2 = "Ramilu" });
        return View(model);
    }

Then on the View, you can have something like this -

@model IEnumerable<Rami.Vemula.Dev.Mvc.Controllers.XhrViewModel>
@{
    ViewBag.Title = "GetData";
}

<h2>GetData</h2>

<script type="text/javascript">
    var mn =  @{@Html.Raw(Json.Encode(Model));}
    alert(mn[0].data1);
</script>

And when you execute the page -