Question

我有一个字符串以字符串的形式到达我的控制器。它是一个List（Model.ToParticipantList），它具有以下元素模板：

string.Format("<li id=\"Id_{0}" style=\"font-weight: bold; margin-top: 1px; list-style-type: none; display: inline; margin-bottom: 3px; cursor: pointer; font-size: 11px; color: Black; padding-top: 1px; padding-bottom: 1px; margin-left: 2px; width: 150px;\" 
onclick=\"RemFromList('{0}__#{2}');\">
<a>{1}</a>
</li>,", el.Id, el.Name, "To"));

我希望这可以传递给我的jQuery函数并得到以下结果：

<li id="Id_1" style="font-weight: bold; margin-top: 1px; list-style-type: none; display: inline; margin-bottom: 3px; cursor: pointer; font-size: 11px; color: Black; padding-top: 1px; padding-bottom: 1px; margin-left: 2px; width: 150px;" onclick="RemFromList('1__#To');">
<a>System System</a>
</li>

这有效：

             document.getElementById('To1').innerHTML=@Html.Raw(Model.ToParticipantList);  //this works 
          // $("#To1").html('@Html.Raw(Model.ToParticipantList)');  //this doesn't 
          // $("#To1").append('@Html.Raw(Model.ToParticipantList)'); //this doesn't

在最后两个例子中我做错了什么？

Answer 1

任何插入HTML的方法都应该有效。如果你采用这个简单的例子：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script type="text/javascript">
   document.getElementById( 'div1' ).innerHTML = '@Html.Raw("<li>Using getElementById</li>")';
   $( "#div2" ).html( '@Html.Raw("<li>Using jQuery html</li>")' );
   $( "#div3" ).append( '@Html.Raw("<li>Using jQuery append</li>")' );
</script>

它将在DOM中呈现此HTML：

<div id="div1"><li>Using getElementById</li></div>
<div id="div2"><li>Using jQuery html</li></div>
<div id="div3"><li>Using jQuery append</li></div>

基本上他们都取得了相同的结果。代码中必定存在您未在示例中显示的内容。我在你的代码清单中注意到，当你使用 getElementById 时， Html.Raw 不会被单引号所包围，就像你正在为jQuery html做的那样和追加方法。如果您在 ToParticipantList 中包含的字符串中包含单引号，则无效。

使用jQuery将代码渲染到MVC视图中

1 个答案: