Как заполнить раскрывающееся меню на основе выбора пользователя в другом раскрывающемся меню в ASP. NET Core MVC? - PullRequest
Новая
       4

Как заполнить раскрывающееся меню на основе выбора пользователя в другом раскрывающемся меню в ASP. NET Core MVC?

1 голос
/ 15 февраля 2020

Например:

В раскрывающемся списке А перечислены типы животных: млекопитающие, рептилии, фи sh. Затем в раскрывающемся списке B будут перечислены животные, доступные для выбранного типа. Если вы выберете млекопитающих, то в раскрывающемся списке B отобразятся: кошка, собака, лошадь.

Это называется условным выпадающим или каскадным выпадающим списком.

1 Ответ

0 голосов
/ 15 февраля 2020

Итак, я узнал, что динамическое поведение c в смысле взаимодействия с сервером без перезагрузки страницы требует использования javascript. Вот мое решение, которое было собрано из нескольких примеров и учебных пособий:

Модель: 

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

ViewModel: 

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