如何在ASP.NET Core MVC的其他下拉菜单中根据用户选择填充下拉菜单?

胡安·加拉多(Juan Gallardo)

例如:

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

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

胡安·加拉多(Juan Gallardo)

因此,我了解到,在与服务器交互而不重新加载页面的意义上,动态行为需要使用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);
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

根据先前的asp.net mvc / jquery填充其他下拉菜单

来自分类Dev

如何使asp.net core mvc中的层叠下拉菜单?

来自分类Dev

如何使用其他下拉菜单中未选择的选项填充下拉菜单?

来自分类Dev

ASP.NET MVC多项选择下拉菜单

来自分类Dev

Asp.Net中的下拉菜单

来自分类Dev

ASP.net MVC 4如何使用下拉菜单?

来自分类Dev

如何通过选择asp.net中的下拉菜单选项来刷新结果顺序

来自分类Dev

限制ASP.net下拉菜单

来自分类Dev

如何在默认的ASP .NET 3.1剃刀模板中添加下拉菜单

来自分类Dev

ASP.net 中的下拉菜单不起作用(MVC)

来自分类Dev

如何在其他选择下拉菜单中隐藏特定的选定选项

来自分类Dev

如何使用JQuery根据下拉菜单选择预先填充表单中的字段

来自分类Dev

需要帮助在asp.net中为菜单项创建下拉菜单

来自分类Dev

如何使用javaScript从其他下拉菜单中选择一个下拉菜单项?

来自分类Dev

从所有下拉菜单中选择一个时,如何禁用其他下拉菜单

来自分类Dev

Asp.Net下拉菜单无法正常工作

来自分类Dev

Asp Net Web Form 多选下拉菜单

来自分类Dev

为什么 Bootstrap 不允许我在 ASP.NET MVC 页面中的下拉菜单上设置边距?

来自分类Dev

使用按钮将 ASP.NET MVC 设置下拉菜单恢复为默认值

来自分类Dev

活动 .NET Core 时,导航栏上的 Bootstrap 下拉菜单无法下拉

来自分类Dev

如何使用VB.Net设置选择框/下拉菜单和复选框

来自分类Dev

如何在cakephp中填充下拉菜单?

来自分类Dev

如何在视图页面中填充下拉菜单?

来自分类Dev

如何在ASP .NET Core中创建Azure AD用户?

来自分类Dev

如何在ASP .NET Core中创建Azure AD用户?

来自分类Dev

如何在我的下拉菜单中首先选择美国?

来自分类Dev

如何在使用HTML助手创建的下拉菜单中添加其他属性?

来自分类Dev

如何回显用户下拉菜单选择?

来自分类Dev

如何回显用户下拉菜单选择?

Related 相关文章

  1. 1

    根据先前的asp.net mvc / jquery填充其他下拉菜单

  2. 2

    如何使asp.net core mvc中的层叠下拉菜单?

  3. 3

    如何使用其他下拉菜单中未选择的选项填充下拉菜单?

  4. 4

    ASP.NET MVC多项选择下拉菜单

  5. 5

    Asp.Net中的下拉菜单

  6. 6

    ASP.net MVC 4如何使用下拉菜单?

  7. 7

    如何通过选择asp.net中的下拉菜单选项来刷新结果顺序

  8. 8

    限制ASP.net下拉菜单

  9. 9

    如何在默认的ASP .NET 3.1剃刀模板中添加下拉菜单

  10. 10

    ASP.net 中的下拉菜单不起作用(MVC)

  11. 11

    如何在其他选择下拉菜单中隐藏特定的选定选项

  12. 12

    如何使用JQuery根据下拉菜单选择预先填充表单中的字段

  13. 13

    需要帮助在asp.net中为菜单项创建下拉菜单

  14. 14

    如何使用javaScript从其他下拉菜单中选择一个下拉菜单项?

  15. 15

    从所有下拉菜单中选择一个时,如何禁用其他下拉菜单

  16. 16

    Asp.Net下拉菜单无法正常工作

  17. 17

    Asp Net Web Form 多选下拉菜单

  18. 18

    为什么 Bootstrap 不允许我在 ASP.NET MVC 页面中的下拉菜单上设置边距?

  19. 19

    使用按钮将 ASP.NET MVC 设置下拉菜单恢复为默认值

  20. 20

    活动 .NET Core 时,导航栏上的 Bootstrap 下拉菜单无法下拉

  21. 21

    如何使用VB.Net设置选择框/下拉菜单和复选框

  22. 22

    如何在cakephp中填充下拉菜单?

  23. 23

    如何在视图页面中填充下拉菜单?

  24. 24

    如何在ASP .NET Core中创建Azure AD用户?

  25. 25

    如何在ASP .NET Core中创建Azure AD用户?

  26. 26

    如何在我的下拉菜单中首先选择美国?

  27. 27

    如何在使用HTML助手创建的下拉菜单中添加其他属性?

  28. 28

    如何回显用户下拉菜单选择?

  29. 29

    如何回显用户下拉菜单选择?

热门标签

归档