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

Answer 1

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>";