using viewbag data with jquery json

Question

I want to use my ViewBag in JavaScript array. I follow using viewbag with jquery asp.net 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

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, May 06 '14 at 06:02

sabbir · Accepted Answer · 2016-02-05T10:11:12.127

5

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

edited Feb 05 '16 at 10:11

answered May 06 '14 at 06:37

sabbir

2,020
3
26
48

score 3 · Answer 2 · answered May 06 '14 at 06:09

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

I only remove the last ; and It works very well. Thanks – user3587919 May 06 '14 at 06:12 — user3587919, May 06 '14 at 06:12

ramiramilu · Answer 3 · 2014-05-06T06:39:25.173

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

enter image description here

@user3587919 Nope it worked for me. Can you tell me where exactly you are getting error? — ramiramilu, May 06 '14 at 06:32

using viewbag data with jquery json

3 Answers3