Passing C# variable using MVC/Razor for use with Dygraph

Question

So here is my problem, and I'm sure it's something very simple. I'm relatively new to Web Development and I'm running into a little problem that I just can't figure out.

I have this code in an MVC view. . .

@{
var data = "";
var count = 1;
foreach (var item in ViewModel.Data)
{
    data += count.ToString() + "," + item.Reading.ToString() + "\n";
    count++;
}

}

I want to pass this 'data' variable to a very tiny script in order to create a graph using Dygraph. This is what I currently have, and believe should work, it doesn't though.

<script type="text/javascript">
g = new Dygraph(document.getElementById("readingGraph"), @data,{ labels: ["Sample Number", "Reading"] });
</script>

I know the script itself will work. If I hard-code some CSV values into a string where @data is, the graph pops up and everything is fine. With the @data there, the graph doesn't load and the script won't run at all (I placed an alert('hi') in there to see if it would pop-up, it didn't).

In addition, I know the string is being 'built' correctly because I have set break points in Visual Studio and checked.

Any help at all would be great guys. Thanks in advance.

You probably just need quotes around it: "@data". If you don't, then you are passing a comma-separated string, and thus passing in multiple js params. — Tim Hobbs, Jul 17 '14 at 19:30
Yes sir, I tried with quotes around @data. Is there any way to 'tell' js it is supposed to be one long string? I.E: in C# @"blabla". — Ilnetd, Jul 17 '14 at 19:37
The way I mentioned above. @data will just be "replaced" with the value. For js '@data' would work too. To get a better idea, set a var to the value then console.log it or whatever: `var data = "@data";`. Also, I think the newlines may be something that causes an issue for you. I am not familiar with Dygraph. Maybe the format of the data you are passing is part of the issue? According to the docs, that second param is supposed to be a file - so I am thinking what you are trying to do is not going to work. — Tim Hobbs, Jul 17 '14 at 20:52
The [docs](http://dygraphs.com/tutorial.html) say path to file *or* raw comma separated values. I initially thought line endings too, but the example linked shows `\n`. The only difference I can see is the `@data` variable values are not enclosed in quotes - i.e. `data += count.ToString() + "," ...` -> `data += "\"" + count.ToString() + ","...` (or better yet, `string.Format(...)` :) ) — Fred, Jul 17 '14 at 21:50

score 1 · Answer 1 · edited May 23 '17 at 12:05

Mixing javascript and Razor requires that you surround your Razor call with any code block

@{ ... } or @if(condition){}, etc.

and putting the code itself in an escaped sequence

@: or the <text> tag.

So, knowing this, you can do something like

<script>
    var jsData = '';
    @{
        <text>
            jsData = '@data';
        </text>
     }

     g = new Dygraph(document.getElementById("readingGraph"), jsData,{ labels: ["Sample Number", "Reading"] });

</script>

Check out Mix Razor and Javascript code and Using Razor within JavaScript

score 1 · Accepted Answer · answered Jul 18 '14 at 13:09

I found the issue. A JS literal string cannot span multiple lines (which is how I was feeding it information via the C# created 'data' variable).

I had to add an '@' in the C# code in order to turn it into a string literal. . .

foreach (var item in CompletePreview.BatteryData)
{
    data += count.ToString() + "," + item.Voltage + @"\n"; //note the new @ in front of "\n"
    count++;
}

The script had to be altered to replace the literal '\n' with one that would break it up in JS.

g = new Dygraph(document.getElementById("voltGraph"), jsgraphData.replace('\n','\n'), { labels: ["Sample Number", "Voltage"] });
alert('graphs should follow');

Thanks everybody for the help. I appreciate it greatly.

BTW, I know the code doesn't match exactly, that is cut and paste from the actual code I was working with, not generic variable names and such. Sorry for being lazy and not changing it to look like my first example. — Ilnetd, Jul 18 '14 at 13:11

Passing C# variable using MVC/Razor for use with Dygraph

2 Answers2

Linked