Handling multi-line HTML inside Javascript

Question

I am using Javascript to define a button behaviour on a web page. The behaviour I am after is to insert some new HTML somewhere on my page, but I would like to use the MVC extension method Html.EditorFor to define the new HTML which will be inserted.

What I would like to do is the following:

$("#myButton").click(function() {
    $("@(Html.EditorFor(x => x.SomeModelProperty))").insertBefore(<somewhere>);
});

The problem I'm encountering is that the MvcHtmlString returned by the call to EditorFor renders as multi-line HTML, resulting in invalid Javascript:

$("<div>
<label for="ModelData_SomeModelProperty">SomeModelProperty</label>
</div>
<div> ....

In an ideal world, I could get EditorFor to somehow render all of the above on a single line, or use some kind of special Javascript syntax to define a multi-line string (like using single quotes in C#), but so far I'm drawing a blank.

I've tried calling ToHtmlString and hand-editing the resulting string to remove line-breaks, and I'm aware that I can escape the new lines in Javascript using a /, but the problem with doing so is that I then have to handle the escaped HTML, which looks a little like the following:

$("&lt;div&gt;
&lt;label        for=&quot;ModelData_SomeModelProperty&quot;&gt;SomeModelProperty&lt;/label&gt;
&lt;/div&gt;
&lt;div&gt; .... (you get the idea)

I was just wondering whether anyone had tried anything similar and might have a more elegant approach?

Razor code is parsed on the server before its sent to the view. You can always generate it in a hidden `
` and then in then handle the button click to display and/or clone it. — , Feb 13 '15 at 10:52

score 1 · Accepted Answer · answered Feb 13 '15 at 10:52

1

One way would be to get it written into a hidden div in html instead of directly into the javascript. Then you can just read it from the dom to use in you script.

So you page would have a

<div style="display:none" id="hiddenArea">

...insert whatever you want in here 
with newline or whatever...

</div>

And then in your javascript:

$("#myButton").click(function() {
    var source = $("#hiddenArea").html();
    $(source).insertBefore(<somewhere>);
});

answered Feb 13 '15 at 10:52

Chris Charles

4,406
17
31

Yeah I was trying to dream up something along these lines after seeing the second answer [here](http://stackoverflow.com/questions/3115360/multi-line-string-insert-using-jquery). Unfortunately i need the result of the call to `Html.EditorFor` at the time when the button is pressed, not when the page is rendered, so I don't think I can do this... – AHowgego Feb 13 '15 at 10:59
Update re: the above - I found a way of parsing out and replacing the runtime variables that I needed from the resulting HTML, making this a much more effective approach. Thanks! – AHowgego Feb 13 '15 at 11:10
Great! If your parsing problem is getting messy you might want to look at something like http://handlebarsjs.com/ for js templating – Chris Charles Feb 13 '15 at 11:40

score 1 · Answer 2 · answered Feb 13 '15 at 13:10

1

You could maybe create a HTML helper so you much more control on what's returned and how it is formatted.

http://www.codeproject.com/Tips/720515/Custom-HTML-Helper-for-MVC-Application

answered Feb 13 '15 at 13:10

nik0lai

2,585
23
37

Thanks yeah, combination of this and the above proved to be my solution. Hadn't really had much of a delve into custom html helpers before now so it's been a good experience! – AHowgego Feb 13 '15 at 19:07

Handling multi-line HTML inside Javascript

2 Answers2