javascript - jQuery在Chrome上附加带有剃刀语法错误的html

Question

我有这个 javascript 代码：

var markup = '<tr id="newdo" class="odd"><td>' + @Html.DropDownList("does", new SelectList(Model.Does, "Id", "Name"),new { @class = "newDoSelect" }) + '</td><td class="small">'+ @Html.DropDownList("restriction", Model.Restrictions) + '</td><td>' + @Html.ListBox("doobjectives", new MultiSelectList(Model.AllObjectives, "Id", "Name"), new { Multiple = "multiple", @class="doobjectives" }) + '</td><td></td></tr>';
$('#doList tr:last').after(markup);

这是渲染的代码：

var markup = '<tr id="newdo" class="odd"><td>' + <select class="newDoSelect" id="does_3_" name="does[3]"><option value="319">A breath of fresh air..</option>
<option value="176">Fix something that&#39;s broken today!</option>
<option value="179">Get a physical &#39;high&#39; today!</option>
<option value="150">It&#39;s OK to be unassertive sometimes!</option>
<option value="169">Just &#39;let it wash&#39; today.</option>
<option value="200">WOW!</option>
<option value="233">Write something for 15 minutes.</option>
<option value="104">You CAN be individually-centred: try it today.</option>
<option value="111">You can be livelier: try this.</option>
<option value="77">You can be more definite in how you are.</option>
<option value="58">You don&#39;t always have to be unassertive!</option>
</select> + '</td><td class="small">'+ <select id="restriction_3_" name="restriction[3]"><option value="negative">negative</option>
<option value="neutral">neutral</option>
<option value="positive">positive</option>
</select> + '</td><td>' + <select Multiple="multiple" class="doobjectives" id="doobjectives_3_" multiple="multiple" name="doobjectives[3]"><option value="4">another test</option>
<option value="24">testing objective 10</option>
<option value="25">testing objective 11</option>
<option value="13">testing objective 2</option>
<option value="14">testing objective 3</option>
<option value="15">testing objective 4</option>
<option value="16">testing objective 5</option>
<option value="17">testing objective 7</option>
<option value="19">testing objective 8</option>
<option value="18">testing objective 9</option>
</select> + '</td><td></td></tr>';
$('#doList tr:last').after(markup);

它在 Firefox 上运行良好，但在 chrome 上我在第一行收到此错误：

未捕获的 SyntaxError：意外的标识符

有什么线索吗？

Answer 1

不要连接：

var markup = '<tr id="newdo" class="odd"><td>@Html.DropDownList("does", new SelectList(Model.Does, "Id", "Name"),new { @class = "newDoSelect" })</td><td class="small">@Html.DropDownList("restriction", Model.Restrictions)</td><td>@Html.ListBox("doobjectives", new MultiSelectList(Model.AllObjectives, "Id", "Name"), new { Multiple = "multiple", @class="doobjectives" })</td><td></td></tr>';
$('#doList tr:last').after(markup);

此外，这似乎是一种将客户端与服务器端脚本混合在一起的糟糕方式。为什么不直接在服务器上构建整个标记？

Answer 2

'<tr id="newdo" class="odd"><td>' + <select 

是问题所在。您不是在生成字符串，而是尝试将字符串与 html 连接起来。所以 Darin 是对的 - 不要连接或连接下拉列表的内部 html&co 呈现在其他地方（“显示：无”div）。

Answer 3

旧的，但找到了类似问题的不同解决方案。

要从通过以下方式生成的对象中获取 HTML：

 @Html.DropDownList("does", new SelectList(Model.Does, "Id", "Name"),new { @class = "newDoSelect" })

你可以使用ToHtmlString()这样的方法：

 @Html.DropDownList("does", new SelectList(Model.Does, "Id", "Name"),new { @class = "newDoSelect" }).ToHtmlString()