asp.net mvc 3 - How to create a javascript string in razor - Stack Overflow

admin管理员组

文章数量:1180512

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?

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?

• javascript
• asp.net-mvc-3
• razor

Share Improve this question Follow asked Jul 12, 2012 at 10:20 Daniël TulpDaniël Tulp 1,82522 gold badges2525 silver badges5454 bronze badges 1

• perhaps relevant for others, this seems to be a interesting method and razor syntax combination: stackoverflow.com/questions/4599169/… – Daniël Tulp Commented Jul 12, 2012 at 12:13

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 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>

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>

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>

本文标签： aspnet mvc 3How to create a javascript string in razorStack Overflow