How to create a javascript string in razor

Question

I have seen some posts regarding this topic and a few blogs, but none seem to mention the output I'm getting.

What I want is to generate a google maps map with information on it. Manually entering the information results in the correct information. So that part works.

Where I'm getting stuck is when I'm going to dynamiccaly create the javascript array with the string with the information I want on my map.

The html code I want to get is:

<script type="text/javascript">     
    var projects = [
         ['Kantoor 4.1 bestaande bouw', 52.25446, 6.16024700000003, 'Deventer', '', 'adviseurs', 'rating30'],
         ['School nieuw 4.0', 52.243161, 4.43677860000003, 'Noordwijk', '', 'adviseurs', 'rating30'],   
    ];

Very simple javascript array, which I thought to create with:

<script type="text/javascript">
var projects = [
    @foreach (var item in Model)
    {
        @HttpUtility.JavaScriptStringEncode("['" + item.Gebouwnaam + "', " + item.LocatieLatitude.ToString().Replace(",", ".") + ", " + item.LocatieLongitude.ToString().Replace(",", ".") + ", '" + item.Plaats + "', '" + item.Gebruiksfunctie + "', '" + item.Licentiehouder + "', '" + item.rating + "'],");
     }
];
</script>

However this gives me:

<script type="text/javascript">
var projects = [
    [\u0027Kantoor 4.1 bestaande bouw\u0027, 52.25446, 6.16024700000003, \u0027Deventer\u0027, \u0027\u0027, \u0027adviseurs\u0027, \u0027rating30\u0027],
    [\u0027School nieuw 4.0\u0027, 52.243161, 4.43677860000003, \u0027Noordwijk\u0027, \u0027\u0027, \u0027adviseurs\u0027, \u0027rating30\u0027],
];  
</script>

Escaping the single quotes doesn't work. What am I doing wrong?

perhaps relevant for others, this seems to be a interesting method and razor syntax combination: http://stackoverflow.com/questions/4599169/using-razor-within-javascript — Daniël Tulp, Jul 12 '12 at 12:13

Yasser Shaikh · Accepted Answer · 2018-10-08T13:20:58.680

18

Just tried with

 <script type="text/javascript">
 var projects = [

   @Html.Raw("['" + "aaa" + "', '" + "bbb" + "'],")


 ];
 </script>

it worked and showed ...

<script type="text/javascript">
var projects = [

       ['aaa', 'bbb'],


];
</script>

edited Oct 08 '18 at 13:20

answered Jul 12 '12 at 10:35

Yasser Shaikh

46,934
46
204
281

this works brilliantly, thank you. This was giving me headaches since yesterday – Daniël Tulp Jul 12 '12 at 10:49
1

Don't you miss a ' before "bbb"? – radbyx Sep 19 '14 at 07:07
@radbyx, I have edited the answer to better reflect my question (combination of strings and floats) – Daniël Tulp Feb 17 '15 at 08:54
Is that a yes or no? :) I can't see your edit either. :) – radbyx Feb 17 '15 at 12:53

score 11 · Answer 2 · answered Jul 12 '12 at 10:46

You don't want to call JavaScriptStringEncode on the entire string, that will also encode your literal indicators (which are being converted to \u0027 in your example). Instead, call it on each item in your array like this:

<script type="text/javascript">
var projects = [
    @foreach (var item in Model)
    {
        String.Format("['{0}',{1},{2},'{3}','{4}','{5}','{6}']",
                      HttpUtility.JavaScriptStringEncode(item.Gebouwnaam),
                      HttpUtility.JavaScriptStringEncode(item.LocatieLatitude.ToString().Replace(",", ".")),
                      HttpUtility.JavaScriptStringEncode(item.LocatieLongitude.ToString().Replace(",", ".")),
                      HttpUtility.JavaScriptStringEncode(item.Plaats),
                      HttpUtility.JavaScriptStringEncode(item.Gebruiksfunctie),
                      HttpUtility.JavaScriptStringEncode(item.Licentiehouder),
                      HttpUtility.JavaScriptStringEncode(item.rating)
         )
     }
];
</script>

is there any reason why I should use this solution and not @Html.Raw? — Daniël Tulp, Jul 12 '12 at 12:12
Html.raw will not escape characters which have special meaning in Javascript (like single quote). Depending on your data that could lead to runtime errors. — just.another.programmer, Jul 12 '12 at 12:51

Sean · Answer 3 · 2018-10-10T22:53:21.577

I believe you could do most of the heavy lifting in .net and leverage Html.Raw to transform the object for you:

@{
    var myObj = Model.Select(i => new {
        item.Gebouwnaam,
        item.LocatieLatitude.ToString().Replace(",", "."),
        item.LocatieLongitude.ToString().Replace(",", "."),
        item.Plaats,
        item.Gebruiksfunctie,
        item.Licentiehouder,
        item.rating }).ToArray();
}

<script type="text/javascript">
    var jsObj = @Html.Raw(Json.Encode(myObj));
</script>

Since it's touched on in this question, HttpUtility.JavaScriptStringEncode() comes in really handy for strings containing newline characters:

@{ var myNetString = "Hi,\r\nMy name is Joe\r\nAnd I work in a button factory"; }

<script type='text/javascript'>
    var myJsString = '@HttpUtility.JavaScriptStringEncode(myNetString)';
</script>

How to create a javascript string in razor

3 Answers3

Linked