Get Data from List to JavaScript MVC 3?

Question

I am trying to use jq plot to plot a bar graph off car rentals per day so - the x-axis will contain Dates and then two bars - Rented/Not Rented. I currently get this back to a List in my controller. If I set a breakpoint I can see the data is returned and at the minute there is a count of 4 in the list (the max will be 10 ever as a Take(10) is done to on my Linq query to the DB.

So I can see the below as an example of a row in my List

Date         Rented   Not Rented
18/02/2013   100      200

The javascript for jq plot is below just with hard coded values to see if it displays which it does so what I want to try and get now is the values in S1 Replaced with each of my Rented Value from my list and the values in s2 replaced with my not rented and then the Ticks replaced with the corresponding date for that row

//s1 = Rented Values
//s2 = Not Rented Values
var s1 = [200, 600, 700, 1000];
var s2 = [460, 210, 690, 820];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['Date', 'Date', 'Date', 'Date'];

I was looking for ideally something like a Hidden For on my cshtml page that would contain the List of results and somehow get access to this in JS? is that possible?

Darin Dimitrov · Accepted Answer · 2013-02-18 15:05:08Z

2

As always start by defining a view model:

public class MyViewModel
{
    public int Rented { get; set; }
    public int NotRented { get; set; }
    public DateTime Date { get; set; }
}

and then have your controller action query your backend and populate this view model:

public ActionResult SomeAction()
{
    IEnumerable<MyViewModel> model = ... go query your backend
    return View(model);
}

and finally in your strongly typed view:

@model IEnumerable<MyViewModel>
...
<script type="text/javascript">
    var s1 = @Html.Raw(Json.Encode(Model.Select(x => x.Rented)));
    var s2 = @Html.Raw(Json.Encode(Model.Select(x => x.NotRented)));
    var ticks = @Html.Raw(Json.Encode(Model.Select(x => x.Date.ToString("dd/MM/yyyy"))));

    // Now that you have the 3 arrays plot them up.
</script>

answered Feb 18, 2013 at 15:05

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

1 Comment

Zar Shardan Over a year ago

Or if you want to load/update it dynamically - use Controller.Json on the server side and one of the JQuery AJAX methods (load, get, post) on the client.

Collectives™ on Stack Overflow

Get Data from List to JavaScript MVC 3?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related