Converting C# List To Javascript

Question

I want to convert a Model property of type List to a Javascript variable usable in that same view. This is my model structure:

 public string Title { get; set; }
 public string Description { get; set; }
 public List<String> ImgLinks { get; set; }

I want a Javascript array or json of the ImgLinks property of my model. I have tried-

var imageLinks = @(Html.Raw(Json.Encode(Model.ImgLinks)));

But i get a syntax error warning. Can anyone please help me out with the conversion to both javascript array and json?

What does this line in the rendered page actually look like? — James Thorpe, Dec 18 '15 at 10:52
Now, i get no syntax error warning. I think i tried this earlier but i forgot that JSON.parse takes a string as parameter. Thanks @ShekharPankaj — Willie, Dec 18 '15 at 10:54
I know this converts to JSON. Is there a way to convert the model property to javascript array directly? — Willie, Dec 18 '15 at 10:56
Since JSON is a key value pair object, what will be the keys for my new json variable? — Willie, Dec 18 '15 at 11:02
You just need to remove the `;` at the end - `var imageLinks = @Html.Raw(Json.Encode(Model.ImgLinks))`. But the 'syntax error' not a problem and the code will still run fine anyway. The `@foreach` loop solution in the accepted answer is unnecessary. — , Dec 18 '15 at 11:54
@psyLogic, My comment was in relation to the question. But the comment your referring to is as a result of a suggestion to use `JSON.parse('@Html.Raw(Json.Encode(Model.ImgLinks))');` which converts the model to a json string and then converts it to a javascript array. There is nothing wrong with your answer, but it is unnecessary (if OP wants to write 3 lines of code instead of 1, so be it :) — , Dec 18 '15 at 20:49

Vibhesh Kaul · Accepted Answer · 2020-10-29T01:10:49.300

6

To get rid of the 'syntax error' you just need to remove ; at the end

var imageLinks = @Html.Raw(Json.Encode(Model.ImgLinks))

Despite the warning your code will run fine anyway.

Here's a different kind of solution to the problem if anyone's interested. You can loop through the razor collection and store the values in a Javascript Array like this.

<script type="text/javascript">

    var myArray = [];

    @foreach (var link in Model.ImgLinks)
    {
        @:myArray.push("@link");
    }

</script>

edited Oct 29 '20 at 01:10

answered Dec 18 '15 at 10:58

Vibhesh Kaul

2,593
1
21
38

what does the : before myArray mean? Is it a way to reference a javascript variable in razor for loop? – Willie Dec 18 '15 at 10:59
It says “this line is not *executed* as C#”, and should be emitted (in this case that is JS) after replacements. It might not necessarily be variable. – user2864740 Oct 29 '20 at 00:55
https://learn.microsoft.com/en-us/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c “The @: outputs a single line of content containing plain text or unmatched HTML tags..” — so @: starting a line is pretty much the *opposite* of @ starting a line. – user2864740 Oct 29 '20 at 00:58
I never said it did not. I was correcting the incorrect assertion that @: had anything to do with *variables*. It does not. It relates to *text* emitted in the output. – user2864740 Oct 29 '20 at 01:02
I didn't read the edits you made later. Your comments didn't have all that information before. Of course you're right :) – Vibhesh Kaul Oct 29 '20 at 01:05
Here's an answer with more information about the syntax, https://stackoverflow.com/questions/36290189/what-does-mean-in-asp-net-mvc-razor/36290572 – Vibhesh Kaul Oct 29 '20 at 01:19

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

There is a more elegant solution. You need to serialize your list to JSON:

var imageLinks = @Json.Encode(Model.ImgLinks); // <- annoying syntax error

So you did it right. Now to fix this syntax error I would suggest you to use simple javascript set function:

function set(value) {
    return value;
}

var imageLinks = set(@Json.Encode(Model.ImgLinks));

You can find more info about fixing this syntax error here.

Converting C# List To Javascript

2 Answers2