如何从 strongTyped 模型中填充动态添加的下拉列表答案

【问题标题】：How to populate a dynamically added dropdownlist from a stronglyTyped Model如何从 strongTyped 模型中填充动态添加的下拉列表
【发布时间】：2017-08-10 11:47:07
【问题描述】：

关于 SO 的很多问题都是关于使用 Ajax 数据填充下拉列表。

但是，我已经在包含 SelectList 项的强类型模型中拥有数据。我想用它来填充我的下拉列表 - 我该怎么做？

因此，向带有下拉列表的表格添加新行后，如何从中的数据中填充/绑定新克隆的dropDownList cities Model.

// List of cities in my Model, Location
LocationModel {
...
IEnumerable<City> Cities }

克隆的行：在我的观点我克隆了一行

<table id="rowtemplate">
 <tr>
   <td>
      <input type="hidden" name="Records.Index" value="#" />
        <span class="citiesCss">
          //DropDownList to clone
            <select class="form-control citiesCssId" id="Records_[#]__SelectedCityFromList" name="Records[#].SelectedCityFromList">
                <option value="">Default</option>                
            </select>
     </span>
   </td>

   <td> ... another cell       
  </td>
</tr>
</table>

如何从CityList model 值绑定/填充新克隆的下拉列表？

    $("#CloneButton").click(function () {
        var index = (new Random());
        var clone = $('#rowtemplate').clone();
        clone.html($(clone).html());
        clone.find('.cities').text(cities);            
        $('#MainTable').append(clone.find('tr'));
    });

【问题讨论】：

如果数据在你的模型中，为什么不只是在第一次生成时在选择中创建选项，以便克隆它也复制选项？
@StephenMuecke 抱歉，我没有关注，如何访问模型以克隆其值？因为，在视图从服务器渲染后，下拉列表被添加到 inAdd New Row 中，所以它在客户端。所以，这不可能可能@Html.DropDownListFor(m => m.SelectedCity, Model.City, "", new { @class = "form-control" })。
@StephenMuecke 你是说创建一个hidden DropDown 然后clone
在您的模板中，您可以只使用<select .... >@foreach(var item in yourCollection) { <option value="@item.xx">@item.yy</option> }</select>，这样选项也会被克隆（请注意，您实际上不需要将id 属性添加到您的元素中）
@StephenMuecke 是的，这完全是天才，这就是答案，我可以将其标记为答案。你再一次得到了最简单和最好的答案——我的意思是它也很容易维护:)

标签： javascript jquery asp.net-mvc razor model-binding

【解决方案1】：

您可以在生成视图时根据您的集合在模板中创建选项。假设City包含属性Id和Name，那么

<table id="rowtemplate">
    ....
    <select class="form-control citiesCssId" name="Records[#].SelectedCityFromList">
        <option value="">Default</option>
        @foreach(var city in Model.Cities)
        {
            <option value="@city.Id">@city.Name</option>
        }              
    </select>
    ....
</table>

现在当您使用var clone = $('#rowtemplate').clone(); 复制模板时，clone 的值还包括<option> 元素

【讨论】：