从C＃内联代码的结果在JavaScript中创建正确的字符串

Question

I have to use some inline code in my asp.net application. Fe 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>";

Answer 2

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>

Answer 3

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>