javascript - 在 Javascript 中处理多行 HTML

Question

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

我想做的是:

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

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

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

在理想的世界中，我可以让 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>);
});