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
– Se0ng11, Commented May 6, 2014 at 6:02

sabbir · Accepted Answer · 2016-02-05 10:11:12Z

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 5, 2016 at 10:11

answered May 6, 2014 at 6:37

sabbir

2,0253 gold badges26 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stefano Dalpiaz · Accepted Answer · 2014-05-06 06:09:23Z

3

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

answered May 6, 2014 at 6:09

Stefano Dalpiaz

1,67310 silver badges11 bronze badges

1 Comment

user3587919 Over a year ago

I only remove the last ; and It works very well. Thanks

ramiramilu · Accepted Answer · 2014-05-06 06:39:25Z

2

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

edited May 6, 2014 at 6:39

answered May 6, 2014 at 6:28

ramiramilu

17.2k6 gold badges51 silver badges66 bronze badges

1 Comment

ramiramilu Over a year ago

@user3587919 Nope it worked for me. Can you tell me where exactly you are getting error?

Collectives™ on Stack Overflow

using viewbag data with jquery json

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related