Access MVC3 Model properties from Javascript in the View

Question

I am trying to build out a google chart in an mvc app.

Here is a snippet of google Chart javascript

function drawChart() {
 var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows([

      ['Work',    11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

}

what I would like to do is essentially replace the data.addRows line above with a for loop iterating through the items in my model. I can iterate just fine in the view outside of the tag like so of course:

 "@foreach (var item in Model) {
    <div>@Html.DisplayFor(modelItem => item.Customer.Name)</div>
  }"

I cannot seem to find a solution to iterate through my model INSIDE a tag. Any ideas?

Darin Dimitrov · Accepted Answer · 2012-01-25 18:00:16Z

6

Assuming you have a view model:

public class MyViewModel
{
    public object[][] Values { get; set; }
}

in which you store some values and pass along to the view:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            Values = new[]
            {
                new object[] { "Work",     11 },
                new object[] { "Eat",      2 },
                new object[] { "Commute",  2 },
                new object[] { "Watch TV", 2 },
                new object[] { "Sleep",    7 },
            }
        };
        return View(model);
    }
}

in your view you could JSON encode it:

@model MyViewModel
<script type="text/javascript">
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(@Html.Raw(Json.Encode(Model.Values)));
    }
</script>

which will be rendered in the final markup as:

<script type="text/javascript">
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows([["Work",11],["Eat",2],["Commute",2],["Watch TV",2],["Sleep",7]]);
    }
</script>

And you shouldn't be worried at all about having values that contain single or double quotes which could potentially break your javascript because you have used a JSON serializer instead of manually building it.

edited Jan 25, 2012 at 18:00

answered Jan 25, 2012 at 17:52

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

5 Comments

Chris Over a year ago

I think this is very close, however my Model does not have a "pre-built" collection of values. The model is actually a class that will be difficult to alter. This method returns a list of "AppItems" public List<AppItems> Apps() { Uri appsUri; Uri.TryCreate(ApiTarget, "/apps", out appsUri); var result = _restClient.Get(appsUri); var apps = JsonConvert.DeserializeObject<List<AppItems>>(result); return apps; } So what I think I need is a way to iterate through the items and add them to the javascript.

Darin Dimitrov Over a year ago

@Chris, you should be able to alter it extremely easy. That's what view models are intended to do. You are not passing your domain models to your view, are you? You should always define specific view models for your views and never pass any domain models. So go ahead and define a view model which will contain everything necessary for this view. I don't know what other things you might need but the public object[][] Values { get; set; } property is a must to generate the javascript. You could include any other properties you need. So in your controller you will map your model to view model.

Chris Over a year ago

Yea, I am guilty of passing my domain model directly to the view :( . I will take this advice and create a model to represent the Domain classes. thanks!

Darin Dimitrov Over a year ago

@Chris, glad I could help. Do you have some further questions or you might consider closing this question?

Chris Over a year ago

I will go ahead and close it. I think I have enough information to accomplish my goal. thanks again!

Collectives™ on Stack Overflow

Access MVC3 Model properties from Javascript in the View

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related