使用带有回车的jQuery .html

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通常是一个"坏"的想法.