在JavaScript中处理多行HTML

Question

我正在使用Javascript定义网页上的按钮行为。 我的行为是在页面的某处插入一些新的HTML，但是我想使用MVC扩展方法Html.EditorFor定义将要插入的新HTML。

我想做的是以下几点：

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

我遇到的问题是对MvcHtmlString的调用返回的EditorFor呈现为多行HTML，从而导致无效的Javascript：

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

在理想的世界中，我可以让EditorFor以某种方式在EditorFor中呈现以上所有内容，或者使用某种特殊的Javascript语法定义多行字符串（例如在C＃中使用单引号），但是到目前为止，米画一个空白。

我尝试调用ToHtmlString并手动编辑结果字符串以删除换行符，并且我知道可以使用/来转义Javascript中的新行，但是这样做的问题是我必须处理转义的HTML，看起来有点像以下内容：

$("<div>
<label        for="ModelData_SomeModelProperty">SomeModelProperty</label>
</div>
<div> .... (you get the idea)

我只是想知道是否有人尝试过类似的方法并且可能会有更优雅的方法？

Answer 1

一种方法是将其写入html中的隐藏div中，而不是直接写入javascript中。 然后，您可以从dom中读取它以在脚本中使用。

所以您的页面会有一个

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

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

</div>

然后在您的JavaScript中：

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

Answer 2

您也许可以创建一个HTML帮助器，以便对返回的内容和格式进行更多控制。

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