Using Viewbag data on javascript on views page

Question

In my project ı am trying to use a javascript chart with my datas on database,

firstly I have sent my data with viewbag

 public IActionResult Index()
    {
        var student = _context.Student.Select(x => x.Name).ToList();
        ViewBag.student = student;
        var notes = _context.Student.Select(y => y.Note).ToList();
        ViewBag.notes = notes;

        return View();
    }

So in javascript The premade chart has a code like this;

   $('#graph2').graphify({
    start: 'donut',
        obj: {
        id: 'lol',
            legend: false,
            showPoints: true,
            width: 775,
            legendX: 450,
            pieSize: 200,
            shadow: true,
            height: 400,
            animations: true,
          

        x: [2000, 2001, 2002, 2003, 2004, 2005, 2006],
        points: [17, 33, 64, 22, 87, 45, 38],
        xDist: 90,
            scale: 12,
            yDist: 35,
            grid: false,
            xName: 'Year',
            dataNames: ['Amount'],
            design: {
            lineColor: 'red',
                tooltipFontSize: '20px',
                pointColor: 'red',
                barColor: 'blue',
                areaColor: 'orange'
            }
        }
    });

I want to add my viewbag datas into the x and point arrays i tried something like this;

@foreach(var item in (List<string>Viewbag.student)
{x.push(item);}

but it did not work at all.

poke · Accepted Answer · 2020-12-22 14:21:32Z

You cannot mix Razor and JavaScript like that. You will have to keep in mind that the Razor rendering happens on the server and once it’s done, the result will be served as static HTML to the browser which will only then interpret it and run the JavaScript.

So in order to pass information from Razor to JavaScript, you will need to do it in a way that survives the rendering process.

A good way to do this is to serialize your data as JSON and store it in a variable that the JavaScript code can access. You can use the Json.Serialize method from within your Razor view to do that:

<script>
var studentData = @Json.Serialize(ViewBag.Student);
var notesData = @Json.Serialize(ViewBag.Notes);

// now do something with those JavaScript variables…
</script>

The @… part will be executed by the Razor renderer, so the rendered result could look for example like this:

<script>
var studentData = ["student1", "student2", "student3"];
var notesData = [123, 456, 789];

// now do something with those JavaScript variables…
</script>

That result is now valid JavaScript and can be properly executed by the client.

Ehsan Sajjad · Accepted Answer · 2020-12-22 14:26:25Z

0

First of all you should not be doing it this way either send json object from a controller action and then utilize it in your view. A quick dirty solution is to call js code with @: like:

@foreach(var item in (List<string>ViewBag.student)
{
  @:x.push("@item");
}

As @ tells that this is razor or server side c# code and if we need to loop a server side and in it do something with js we can use @: to tell that it's not c# or sercer side code.

answered Dec 22, 2020 at 14:26

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Collectives™ on Stack Overflow

Using Viewbag data on javascript on views page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related