Populate Html.DropDownList() in JQuery using ASP.NET MVC Razor

Question

I want to get dropdownlist in every row when addrow button hits. I don't know how to do it. Here what I have:

$('#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
  });
});

`@Html.DropDownList()` is server side code. Create a a 'template' using the `HtmlHelper` methods inside a hidden `
` and `.clone()` it. But your code will never bind correctly to a model. Refer the 2nd option of [Submit same Partial View called multiple times data to controller?](https://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) — , Nov 13 '18 at 08:10
`@@Html.DropDownList(\"Bank\", null, htmlAttributes: new { @@class = \"form-control\" })` => this is not a proper way to generate DDL in client-side script, because `DropDownList` helper runs in server-side. You should use standard ` — Tetsuya Yamamoto, Nov 13 '18 at 08:10

score 1 · Accepted Answer · answered Nov 13 '18 at 08:39

first make your dropdown in view (but invisible to user):

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

and then in javascript use it as template:

$('#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
    });
});

but you must set unique name for controls, or data may post to server as array. for example ChqDate[0], Bank[0],ChqDate[1], Bank[1],...

Thanks Sir, You save my day. :-) – Huzaifa Nov 13 '18 at 10:01 — Huzaifa, Nov 13 '18 at 10:01

Populate Html.DropDownList() in JQuery using ASP.NET MVC Razor

1 Answers1