C# 使用ASP.NET MVC在JQuery中填充Html.DropDownList（）

当点击

addrow按钮时，我想在每一行中获得
dropdownlist
。
我不知道怎么做。
以下是我所拥有的：

$('#addrow').click(function () {
  var tr = "<tr><td>@@Html.DropDownList(\"Bank\", null, htmlAttributes: new { @@class = \"form-control\" })"
  + "</td><td><div>"
  + "<div class=\"input-group date\">"
  + "<div class=\"input-group-addon\"><i class=\"fa fa-calendar\"></i>"
  + "</div>"
  + "<input type=\"text\" class=\"form-control ChqDate\" name=\"ChqDate\" placeholder=\"Chq Date\">"
  + "</div><!-- /.input group -->"
  + "</div></td>"
  + "<td><input type=\"number\" name=\"Amount\" class=\"form-control\" id=\"ChqAmount\" placeholder=\"Cheque Amount\" /></td>"
  + "<td><button data-itemId=\"0\" type=\"button\" class=\"btn btn-danger removeRow\"><span class=\"glyphicon glyphicon-trash\"></span></button></td></tr>";

  $('#example1 tbody').append(tr);
  $('#example1 tbody .ChqDate').datepicker({
    autoclose: true
  });
});

$（'#addrow'）。单击（函数（）{
var tr=“@@Html.DropDownList（\'Bank\'，null，htmlAttributes:new{@@class=\'form control\'}）”
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ "";
$（'example1 tbody'）。追加（tr）；
$（“#示例1 tbody.ChqDate”）.datepicker({
自动关闭：正确
});
});
首先在视图中创建下拉列表（但用户不可见）：

然后在javascript中将其用作模板：

$('#addrow').click(function () {
    var tr = "<tr><td><select name=\"Bank\" class=\"form-control\">" + $("#Bank-Template").html()
    + "</select></td><td><div>"
    + "<div class=\"input-group date\">"
    + "<div class=\"input-group-addon\"><i class=\"fa fa-calendar\"></i>"
    + "</div>"
    + "<input type=\"text\" class=\"form-control ChqDate\" name=\"ChqDate\" placeholder=\"Chq Date\">"
    + "</div><!-- /.input group -->"
    + "</div></td>"
    + "<td><input type=\"number\" name=\"Amount\" class=\"form-control\" id=\"ChqAmount\" placeholder=\"Cheque Amount\" /></td>"
    + "<td><button data-itemId=\"0\" type=\"button\" class=\"btn btn-danger removeRow\"><span class=\"glyphicon glyphicon-trash\"></span></button></td></tr>";

    $('#example1 tbody').append(tr);
    $('#example1 tbody .ChqDate').datepicker({
        autoclose: true
    });
});

$（'#addrow'）。单击（函数（）{
var tr=”“+$（“#银行模板”）.html（）
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+ "";
$（'example1 tbody'）。追加（tr）；
$（“#示例1 tbody.ChqDate”）.datepicker({
自动关闭：正确
});
});

但必须为控件设置唯一的名称，否则数据可能会以数组的形式发布到服务器。例如ChqDate[0]、Bank[0]、ChqDate[1]、Bank[1]、…
@Html.DropDownList（）是服务器端代码。在隐藏的
和
.clone（）中使用
HtmlHelper
方法创建一个“模板”。但您的代码永远不会正确绑定到模型。请参阅
@@Html.DropDownList（\'Bank\'，null，htmlAttributes:new{@class=\'formcontrol\'}）的第二个选项
=>这不是在客户端脚本中生成DDL的正确方法，因为
DropDownList
帮助程序在服务器端运行。您应该使用标准的
元素，或者从服务器生成
DropDownList
？谢谢你，先生，你救了我一天。：-）
$('#addrow').click(function () {
    var tr = "<tr><td><select name=\"Bank\" class=\"form-control\">" + $("#Bank-Template").html()
    + "</select></td><td><div>"
    + "<div class=\"input-group date\">"
    + "<div class=\"input-group-addon\"><i class=\"fa fa-calendar\"></i>"
    + "</div>"
    + "<input type=\"text\" class=\"form-control ChqDate\" name=\"ChqDate\" placeholder=\"Chq Date\">"
    + "</div><!-- /.input group -->"
    + "</div></td>"
    + "<td><input type=\"number\" name=\"Amount\" class=\"form-control\" id=\"ChqAmount\" placeholder=\"Cheque Amount\" /></td>"
    + "<td><button data-itemId=\"0\" type=\"button\" class=\"btn btn-danger removeRow\"><span class=\"glyphicon glyphicon-trash\"></span></button></td></tr>";

    $('#example1 tbody').append(tr);
    $('#example1 tbody .ChqDate').datepicker({
        autoclose: true
    });
});