如何根据用户选择在 ASP.NET Core MVC 的不同下拉菜单中填充下拉菜单？答案

【问题标题】：How do I populate a dropdown menu based on the user selection in a different dropdown menu in ASP.NET Core MVC?如何根据用户选择在 ASP.NET Core MVC 的不同下拉菜单中填充下拉菜单？
【发布时间】：2020-02-15 07:32:09
【问题描述】：

例如：

下拉列表 A 列出了动物类型：哺乳动物、爬行动物、鱼类。然后下拉列表 B 将列出可用于所选类型的动物。如果您选择哺乳动物，那么下拉菜单 B 将显示：猫、狗、马。

这称为条件下拉菜单或级联下拉菜单。

【问题讨论】：

标签： javascript jquery asp.net-core-mvc dropdown

【解决方案1】：

所以我了解到动态行为，在不重新加载页面的情况下与服务器交互的意义上，需要使用 javascript。这是我的解决方案，由多个示例和教程拼凑而成：

型号：

public class MyModel
{
  public string IndependentProperty { get; set; }
  public string DependentProperty { get; set; }
}

视图模型：

public class MyViewModel
{
  public MyModel Model { get; set; }
  public IEnumerable<SelectListItem> IndependentOptions { get; set; }
}

查看：

@using MyViewModel

<form method="post">
  <select id="independentOption"
    asp-for="Model.IndependentProperty"
    asp-items="Model.IndependentOptions"
    onchange="updateDependentOptions()">
    <option value="" selected="true">Select</option>
  </select>

  <select id="dependentOption"
    asp-for="Model.DependentProperty">
    <option value="" selected="true">Select</option>
  </select>
</form>

<script type="text/javascript">
  function updateDependentOptions() {  
    var independentOption = $('#independentOption').val();

    ajaxCall(
      '/MyController/GetDependentOptions?independentOption=', 
      independentOption
    ).done(
      function (response) {
        $('#dependentOption').empty();

        if (response.length > 0) {
          var options = '';

          for (var i = 0; i < response.length; i++) {
            options += '<option value="' 
              + response[i] + '">' + response[i] + '</option>';
          }

          $('#dependentOption').append(options);
        }
      }
    );
  }

  function ajaxCall(url, data) {
    return $.ajax({
      url: url + data,
      data: '',
      type: 'GET',
      contentType: 'application/json; charset=utf-8'
    });
  }
</script>

控制器：

[HttpGet]
public ActionResult Index()
{
  // populate the viewmodel
  return View(viewmodel);
} 

[HttpPost]
public ActionResult Index(MyViewModel model)
{
  // Use model binding to 
  // get user input.
  // Then save the changes.
  // Return some action
}

[HttpGet]
public JsonResult GetDependentOptions(string independentOption)
{
  var result = new List<string>();

  result.Add("Select"); // optional

  // logic to populate the dependent dropdown
  // based on the choice made in the independent
  // dropdown.

  return Json(result);
}

【讨论】：