Create a correct string in JavaScript from result of C# inline code

Question

I have to use some inline code in my asp.net application. F.e. i have following inline code:

<% FlashRenderer.Render(); %>

That will return me following markup:

<div id="flashGame" style="color:red"></div>
  <script type="text/javascript" language="javascript">
     var flash = document.getElementById('flashGame');
     ...
  </script>
</div>

I need to assign a result of FlashRenderer.Render() to javascript variable, then using jquery append that markup to some parent div. I try follwing:

   <script type="text/javascript">
       var swfString = '<%= FlashRenderer.Render() %>';
       $("swf").append(swfString);
   </script>

And it fails, because result string from inline inclusion has both single and double quotes, so when i use single quotes to wrap '<%= FlashRenderer.Render() %>' i always have a syntax error in browser console. I try to replace "'" with "\'" but error happens before i got string created.

Here is screenshot what i have after try to use JavaScriptSerializer().Serialize

Syntax error

Joe Enos · Accepted Answer · 2013-07-30 15:10:55Z

4

You can use a JSON serializer, which will give you a Javascript-safe string, including the quotes, and it will handle the line breaks as well:

--JSON.NET--:
var x = <%= JsonConvert.SerializeObject(FlashRenderer.Render()) %>;

or

--System.Web.Script.Serialization--:
var x = <%= new JavaScriptSerializer().Serialize(FlashRenderer.Render()) %>;

This will render something like:

var x = "<div id=\"flashGame\" style=\"color:red\"></div>\r\n   <script type=\"text/javascript\" ...etc... </div>";

answered Jul 30, 2013 at 15:10

Joe Enos

40.6k11 gold badges86 silver badges144 bronze badges

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

8 Comments

igorGIS Over a year ago

I've try both solutions, it results in string like this: "\u003cdiv id=\"flashGame\" style=\"color:red\"\u003e\u003c/div\u003e\u003cscript ... etc and it appended to parent as is, that is also incorrect and i also have syntax error. Possible i need to desserialize before use jquery.append() ?

Joe Enos Over a year ago

The \u003c is just unicode-encoded <, so that character is just fine. Assuming the .NET string is written properly, the string value itself is correct (<div id="flashGame" style="color:red;"> etc), so when you write that into the page, it will write correctly. You don't need to do any kind of deserialization. Make sure you are writing exactly as I have it - don't put any quotation marks in yourself.

igorGIS Over a year ago

Thanks for responses. I did it exactly as you said, i use FireFox and FireBug, and here is the screenshot what i have in firebug (attached to main post)

Joe Enos Over a year ago

What does FlashRenderer.Render() return? I was assuming it was a string - a string serialized into JSON always includes the quotes. From your image, I'm wondering if it does not actually return the string, but rather writes directly to the response.

igorGIS Over a year ago

The C# string is formatted properly if think because when i use just inline <% %> code statically it renders without any errors

|

MaxPRafferty · Accepted Answer · 2013-07-30 15:07:35Z

1

Instead of trying to place it in a string, just have it render hidden on the page and move it:

<div style="display:none">
  <%= FlashRenderer.Render() %>
</div>

<script type="text/javascript">
  $("swf").append($("#flashGame"));
</script>

answered Jul 30, 2013 at 15:07

MaxPRafferty

5,0375 gold badges35 silver badges40 bronze badges

4 Comments

igorGIS Over a year ago

I can't because flash object will rendered immediately then, but i need to render it conditionally from JS. I think i can try to escape characters i need on C# side, before creating js string

Louis Ricci Over a year ago

the javascript will execute inside of the hidden div

MaxPRafferty Over a year ago

Yeah, you could just try a straight up server.urlEncode, then decodeURIComponent() into your jquery string. That might have the same issue though actually...

MaxPRafferty Over a year ago

If you set visibility:hidden instead of display none, does it still load?

Louis Ricci · Accepted Answer · 2013-07-30 15:20:20Z

1

Hacky solution if you can't modify the C# code. Output the function into a textarea then get the value of the textarea with jQuery.

<textarea id="swfref" style="display:none;">
<% FlashRenderer.Render(); %>
</textarea>

<script type="text/javascript">
    var swfString = $("#swfref").val();
    $("swf").append(swfString);
</script>

answered Jul 30, 2013 at 15:20

Louis Ricci

21.1k5 gold badges50 silver badges64 bronze badges

2 Comments

Joe Enos Over a year ago

One problem here is if you have a </textarea> anywhere in that string, it will terminate the real textarea and bust up the HTML.

Louis Ricci Over a year ago

@JoeEnos - Yes that's quite a corner case. It's doubtful (considering the OPs specific needs) that he'd be bitten by it, but in the general sense it's an issue. I guess it could be wrapped with a CDATA, but of course if the closing CDATA were to appear in the output we'd be in the same boat.

Collectives™ on Stack Overflow

Create a correct string in JavaScript from result of C# inline code

3 Answers 3

8 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related