如何在 MVC 中动态填充下拉列表值？答案

【问题标题】：How to populate dropdownlist value dynamically in MVC?如何在 MVC 中动态填充下拉列表值？
【发布时间】：2018-08-01 09:41:03
【问题描述】：

我想在单击Open 时动态更新下拉列表值。当用户单击第一行时，其各自的数据应显示在下拉列表中，第二行的显示方式相同。实际上，我想使用 Json 更新下拉列表中的值尽管加载了整个部分。

public PartialViewResult _ModalPopup( string Id)
    {
       EmpViewModel model=new EmpViewModel();
       Id=Id??"1";            
       var Listdata = context.Employees.Where(x => x.id == Id).Select(y => y.Category).Distinct().ToList();
       model.CategoriesList = new SelectList(Listdata);                    
        return PartialView("_MEmpModal", model);
    }

查看

<table>
       <tr>
           <td>
              @Html.DisplayName("IT")
             </td>
             <td>
      <a class="LinkId" data-toggle="modal"  data-url="/Home/_ModalPopup?Id=1">Open</a>
        </td>
           </tr>
              <tr>
               <td>
                 @Html.DisplayName("Sales")
                   </td>
                    <td>
        <a class="LinkId" data-toggle="modal"  data-url="/Home/_ModalPopup?Id=2">Open</a>

                  </td>
                </tr>                            
        </table>
    @{Html.RenderAction("__MEmpModal"); }

局部视图

<div class="modal fade" id="DisplayModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    @Html.DropDownListFor(m => m.Category, Model.CategoriesList, new { @class = "form-control" })
                </div>               
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary pull-right">Save</button>
            </div>
        </div>
    </div>
</div>

脚本

$(document).on("click", '.LinkId', function (e) {            
        $.ajax({
            url: $(this).data("url"),
            type: "GET",
        }).done(function (partialViewResult) {
            $("#DisplayModal").replacewith(partialViewResult);
            $('#DisplayModal').focus();
        });
    });

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

非常感谢@StephenMuecke，我按照他展示的示例介绍了如何在下拉列表中动态附加数据。这是解决我的问题的Script。我在 Controller 中做了一些小改动以返回 Json，然后使用了这个 Script。

控制器

public JsonResult _ModalPopup( string Id)
    {
       EmpViewModel model=new EmpViewModel();
       Id=Id??"1";            
       var Listdata = context.Employees.Where(x => x.id == Id).Select(y => y.Category).Distinct().ToList();
       model.CategoriesList = new SelectList(Listdata);                    
        return Json(model.CategoriesList,JsonRequestBehavior.AllowGet);
    }

脚本

 $(document).on("click", '.LinkId', function () {
            var url = $(this).data("url");
            var Category = $("#Category");
            $.getJSON(url, { id: $(this).val() }, function (response) {
                Category.empty().append($('<option></option>').val('').text('Please select'));
                $.each(response, function (index, item) {
                    Category.append($('<option></option>').val(item.Value).text(item.Text));
                });
                $('#DisplayModal').modal('show');
            });
        })

【讨论】：