如何从强类型模型填充动态添加的下拉列表

Question

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

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

因此，在 使用下拉列表 table 添加新行后 ，如何 populate/bind 新克隆的 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 值 bind/populate 新克隆的下拉列表？

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

Answer 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>个元素

如何从强类型模型填充动态添加的下拉列表

How to populate a dynamically added dropdownlist from a stronglyTyped Model

javascript

asp.net-mvc

jquery

model-binding

razor