Question

我正在开发一个MVC项目。我有一个容器div，我想添加一个局部视图。我收到错误，因为我的部分视图的html有回车符。

JavaScript的：

$("#containerOptions").html('@{Html.RenderPartial("_DropDownOptions", Model);}');

部分视图：

<div id="divOptions">
   <label>I would like to browse by:</label>
   @using (var dd = Html.Bootstrap().Begin(new DropDown("Select Option").Class("dropDownElement").Id("dropDownOption")))
   {
      @dd.Header("Otpions");
      @dd.ActionLink("City", "#").Class("dropDownElement");
      @dd.ActionLink("Zip", "#").Class("dropDownElement");
      @dd.ActionLink("County", "#").Class("dropDownElement");
   }                                                                                                                                                             
</div>

我知道我的HTML代码不是问题，因为它可以在其他地方使用。我还将<p>Hi</p><p>Fred</p>放在我的局部视图中，这也是重复的问题。

但是

<p>Hi</p>
<p>Fred</p>

不起作用。

有没有办法强制调用.html来忽略文档中的回车？我宁愿不删除它们，因为它会大大降低可读性。

编辑：

我尝试进行字符串替换以删除新行，但它不起作用。

var s = '@{Html.RenderPartial("_DropDownOptions", Model);}'

var bob = s.replace(/[\n\r]/g, '');

$("#containerOptions").html(bob);

Answer 1

不是将HTML字符串常量注入Javascript代码，而是将视图HTML注入页面上的隐藏元素（HTML），并引用：

<script id="template" type="text/template">
     @Html.Partial("_DropDownOptions", Model)
</script>

text/template是一种未知的内容类型，因此在渲染时会被忽略。

jQuery的：

// This reparents the elements
$("#containerOptions").append( $('#template').children() );

或

// Slightly slower, but leaves the original intact
$("#containerOptions").html( $('#template').html() );

这为您提供了更好的可读性和灵活性。字符串中的HTML通常是一个“坏”的想法。

使用带有回车的jQuery .html

1 个答案:

jQuery的：

或