将 Html.DropDownListFor() 与 jQuery 结合使用（添加包含下拉列表的另一行）

Question

我在使用 Html.DropDownListFor() 和 jQuery 时遇到问题。我正在使用 ASP.NET MVC 2、C#、.NET 4 和 jQuery 1.4.2。

我收到的错误是“Uncaught SyntaxError: Unexpected token ILLEGAL”（使用 Chrome 的开发人员工具在控制台中看到此错误）。

我将解决这个问题：

这是控制器中我的 SelectList 的设置：

            var Additives = new SelectList(
            new[]
            {
                new { Value = 1, Name = "FCS" },
                new { Value = 2, Name = "Fungizone" },
                new { Value = 3, Name = "HEPES" },
                new { Value = 4, Name = "Investigator supplied" },
                new { Value = 5, Name = "L-Glutamine" },
                new { Value = 6, Name = "None" },
                new { Value = 7, Name = "Pen Only" },
                new { Value = 8, Name = "Pen/Strep" },
                new { Value = 9, Name = "Pen/Strep/Antibiotic" },
                new { Value = 10, Name = "Strep Only" }
            }
            , "Value", "Name");

        ViewData["additives"] = Additives;

这是我在带有按钮的视图中使用此 SelectList 来添加另一个附加行的地方：

            <div id="freshAdditive">
                <%: Html.Label("--Additives--")%><br />
                <%: Html.DropDownListFor(model => model.freshAdditive[0], (SelectList) ViewData["additives"], string.Empty)%>
                <%: Html.TextBoxFor(model => model.freshAdditiveAmount[0])%>
                <input id="moreAdditive" class="buttoncenter" value="More Additive" type="button" />
            </div>

这是我尝试将 Html.DropDownListFor 与 jQuery 一起使用的地方，这就是我尝试使用 jQuery 添加另一个附加行的地方：（

    <script type="text/javascript">
    // Add additional additive
    $("#moreAdditive").click(function () {
        //alert("More Additive");
        var insertCode = '<br />'
            + '<%: Html.DropDownListFor(model => model.freshAdditive[1],  (SelectList) ViewData["additives"], string.Empty) %>'
            + '<%: Html.TextBoxFor(model => model.freshAdditiveAmount[1])%>'
        $('#freshAdditive').append(insertCode);
    });
</script>

故意使用硬编码元素 1...一旦我掌握了基础知识，我就会重构！）如果我评论在包含 Html.DropDownListFor() 的行中，Html.TextBoxFor() 帮助器似乎与 jQuery 配合得很好。我认为这与多行字符串有关，但还没有找到在 jQuery 中处理它的方法。我确实在这里找到了一些东西，但我无法让它发挥作用。

看起来这应该是直接的，但我没有找到很多建议。有什么想法吗？

谢谢！

Answer 1

另一种方法是将代码渲染到隐藏的 div 中。然后使用 jquery 克隆元素。尝试这样的事情：

<div id="hiddenHtml" style="display:none;">
     <%: Html.DropDownListFor(model => model.freshAdditive[1],  (SelectList) ViewData["additives"], string.Empty) %>
     <%: Html.TextBoxFor(model => model.freshAddit    
</div>
<script type="text/javascript">
// Add additional additive
$("#moreAdditive").click(function () {
    //alert("More Additive");
    var insertCode = $("#hiddenHtml").html();
});