使用ASP.NET MVC Razor在JQuery中填充Html.DropDownList()

Question

当addrow button命中时，我想在每行中获得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
  });
});

Answer 1

首先使您的下拉列表在视图中(但对用户不可见(：

  @Html.DropDownList("Bank-Template", null, htmlAttributes: new { style="display: none;", id="Bank-Template" })

然后在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
    });
});

但必须为控件设置唯一的名称，否则数据可能会作为数组发布到服务器。例如ChqDate[0]、Bank[0]、ChqDate[1]、Bank[1]，。。。