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

Question

例如:

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

这称为条件下拉列表或级联下拉列表。

Answer 1

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

型号:

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

View 模型:

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>

Controller :

[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);
}