Question

$("#add_activity").click(function () {
            $('#activities').append('@Html.Raw(Html.Partial("MyPartial").ToHtmlString())');
        });

I have this bit of code that seems to be working just fine if the partial is this:

<tr><td>Foo</td><td><input type="text" name="bar" /></td></tr>

But fails to work if the partial is this

<tr>
     <td>
         Foo
     </td>
     <td>
        <input type="text" name="bar" />
     </td>
</tr>

How can I get around this??.. Having it all in one line is terrible.

Please help.

Answer 1

That’s normal. If you view the source code of your generated page you will see this:

$('#activities').append('
<tr>
     <td>
         Foo
     </td>
     <td>
        <input type="text" name="bar" />
     </td>
</tr>
');

which obviously is very far from something that could be considered as valid javascript.

You could use the JavaScriptStringEncode method like this:

$("#add_activity").click(function () {
    $('#activities').append('@HttpUtility.JavaScriptStringEncode(Html.Partial("MyPartial").ToHtmlString())');
});

which will take care of properly encoding the HTML string and you will end up with valid javascript:

$("#add_activity").click(function () {
    $('#activities').append('\u003ctr\u003e\r\n     \u003ctd\u003e\r\n         Foo\r\n     \u003c/td\u003e\r\n     \u003ctd\u003e\r\n        \u003cinput type=\"text\" name=\"bar\" /\u003e\r\n     \u003c/td\u003e\r\n\u003c/tr\u003e');
});

which produces the desired result.