ASP.NET MVC converting a model list of string with spaces into a javascript array

Question

I'm using ASP.NET MVC (with Razor) and JQuery

I have a list of strings in my controller and I render the partial view passing in the model with the below list.

List<string> list = new List<string>();
list.Add("Texas");
list.Add("New York");

On client in my cshtml file side I have:

<div id = "test", test-att = @Html.Raw(Json.Encode(Model.list)) />

In my javascript file I do:

var javascriptArray = JSON.parse($('#test').attr('test-att'));

I get an error "unexpected end of input".

Using Chrome dev tools console I see the following:

$('#test') : <div id ="test" test-att = "["Texas", "New" York"]>

$('#test').attr('test-att') : "["Texas","New"

I'm expecting : "["Texas","New York"]"

Looking like its getting messed up because of the space before being passed in JSON.parse. It seems to stop when it finds a space.

Any ideas on how to fix this?

Why are you not just assigning it directly to the javascript variable? - var javascriptArray = @Html.Raw(Json.Encode(Model.list)) (or var javascriptArray = JSON.parse('@Html.Raw(Json.Encode(Model.list))');? — user3559349
– user3559349, Commented Aug 26, 2015 at 12:54
I can't do that. All my javascript logic is in the javascript file and I want to keep it that way. — user1527762
– user1527762, Commented Aug 26, 2015 at 12:58
Then you should at least be quoting it and preferably using data- attributes. <div id="test data-att="@Html.Raw(Json.Encode(Model.list))"> and get it using var javascriptArray = JSON.parse($('#test').data('att')); — user3559349
– user3559349, Commented Aug 26, 2015 at 13:01

Sam FarajpourGhamari · Accepted Answer · 2015-08-26 13:08:12Z

7

Put your JSON between single quote NOT double quote characters:

<div id = "test" test-att = '@Html.Raw(Json.Encode(Model.list))' />

answered Aug 26, 2015 at 13:08

Sam FarajpourGhamari

14.8k4 gold badges57 silver badges56 bronze badges

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

2 Comments

user1527762 Over a year ago

Yep, that worked! Can you please explain why that works with the single quotes. I also checked that it does NOT work with the double quotes. I will mark your reply as answer.

Sam FarajpourGhamari Over a year ago

Because your JSON string already have double quote. And razor parser confuses with attributes quotes. By using single quote razor could easily distinguish between your JSON and html attribute.

user2315314 · Accepted Answer · 2015-08-26 13:11:14Z

0

Content of cshtml file will be like as bellow

<div id = "test" test-att = "@Html.Raw(Json.Encode(Model.list))" />

answered Aug 26, 2015 at 13:11

user2315314

11 bronze badge

Comments

Poppuff Arthem · Accepted Answer · 2015-08-26 13:12:18Z

0

There seems to be 2 issues with what you have :

The Json encoder uses " (double quotes) to delimitate strings. It's not gonna work since in XML double quote are used to delimitate attributes.

For this issue you have 2 solutions the easiest one would probably be replacing every " in the Json Encoded string by

<div id = "test", test-att ="@Html.Raw(Json.Encode(Model.list).Replace("\"",""")" />

answered Aug 26, 2015 at 13:12

Poppuff Arthem

192 bronze badges

Comments

th1rdey3 · Accepted Answer · 2015-08-26 13:37:57Z

0

It seems to me the culprit is @Html.Raw. If you use the following -

<div id='dd' data-att="@Json.Encode(list)">

Then parsing with javascript doesn't fail.

var a = document.getElementById('dd');
JSON.parse(a.dataset.att);

Single quote or double quote doesn't matter. But if you use @Html.Raw then double quote gives you the said error. You can use @Html.Raw against each item of your list instead -

<div id='dd' data-att="@Json.Encode(list.Select(x=> Html.Raw(x).ToHtmlString()).ToList<string>())">

This will work with double quote.

answered Aug 26, 2015 at 13:37

th1rdey3

4,4588 gold badges37 silver badges69 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC converting a model list of string with spaces into a javascript array

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related