Help with asp.net mvc and jquery

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.

NachoF - I've never seen this issue before - ever :0). would you be good enogh to post ALL relevant code, including the contoller code. it just doesn't add up.. — jim tollan
– jim tollan, Commented Mar 3, 2011 at 15:22

Darin Dimitrov · Accepted Answer · 2011-03-03 15:34:40Z

3

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=\&quot;text\&quot; name=\&quot;bar\&quot; /\u003e\r\n     \u003c/td\u003e\r\n\u003c/tr\u003e');
});

which produces the desired result.

edited Mar 3, 2011 at 15:34

answered Mar 3, 2011 at 15:26

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

2 Comments

nacho10f Over a year ago

almost there.. but now its adding an extra " to the type and name attrbiutes.. so Im getting <input type=""text"" name=""bar"" />

Darin Dimitrov Over a year ago

@NachoF, yes indeed there's an additional double quote. Can you use AJAX instead? It would be more optimized because you won't be sending the partial to the client unless he clicks on the button.

samfromlv · Accepted Answer · 2013-03-11 19:06:58Z

0

This works in MVC3:

@{
    Layout = null;
    var s = HttpUtility.JavaScriptStringEncode(Html.Partial("Banner").ToHtmlString().ToString());
}
<iframe id="banner" src="about:blank" frameborder="0"></iframe>
<script type="text/javascript">
     var doc = document.getElementById('banner').contentWindow.document;
     doc.open();
     doc.write("@Html.Raw(s)");
     doc.close();
</script>

answered Mar 11, 2013 at 19:06

samfromlv

1,0611 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Help with asp.net mvc and jquery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related