Converting C# List<string> 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?

• Domysee: Which warning do you get?
• Willie: The warning is syntax error
• Shekhar Pankaj: try JSON.parse('@Html.Raw(Json.Encode(Model.ImgLinks))')
• James Thorpe: What does this line in the rendered page actually look like?
• Willie: 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

Answer 1

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>

• Willie: what does the : before myArray mean? Is it a way to reference a javascript variable in razor for loop?
• user2864740: 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: learn.microsoft.com/en-us/aspnet/web-pages/overview/… "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: 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.
• Vibhesh Kaul: I didn't read the edits you made later. Your comments didn't have all that information before. Of course you're right :)

Answer 2

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.