在 .NET Core 中实现级联下拉列表

在开发 Web 应用程序时，尤其是那些处理大量用户输入和交互的应用程序时，增强用户体验变得至关重要。一种常见的情况是用户需要从多个相关类别中选择数据。这时级联下拉列表就派上用场了，它通过根据用户之前的选择缩小选择范围，大大简化了流程。这种方法不仅提高了数据输入的效率，还有助于保持用户选择的相关性。

一.背景和要求

级联下拉列表的需求通常出现在处理地理数据（例如地址）的应用程序中，或任何数据具有层次结构的场景中。例如，当用户选择汽车品牌时，系统会提示他从该品牌的特定车型中进行选择。这个想法可以扩展到许多其他应用程序，例如在线购物、预订系统或任何基于表单的应用程序。

此功能是客户特别要求的，他希望简化库存管理系统的数据输入流程。他们注意到用户经常被大量不相关的选项弄得不知所措，这减慢了他们的工作流程。实现级联下拉列表是最佳解决方案，可确保用户首先选择一个常规类别，然后过滤相关类别中的后续选项。

二.目标

在本项目中实现级联下拉列表的主要目标是：

1. 改善用户体验：通过将用户的选择限制在相关选项内来减少用户的认知负荷，从而加快决策过程。
2. 提高数据准确性：通过引导用户完成受控的数据输入路径，可以最大限度地减少数据输入错误的可能性。
3. 提高应用效率：简化交互并减少填写表单所需的时间，使应用程序使用更高效。

三…NET Core 中的实现

.NET Core 具有 MVC 架构，为构建可扩展且可维护的 Web 应用程序提供了强大的框架。其关注点分离使其成为实现级联下拉列表等功能的理想选择，其中可以分别管理模型、视图和控制器。

四.环境设置

要遵循本教程，请确保您具备以下内容。

• .NET Core 3.1 SDK 或更高版本。
• Visual Studio 2019 或支持 .NET Core 开发的类似 IDE。

五.实现级联下拉列表的步骤

以下步骤概述了如何在 .NET Core 应用程序中实现级联下拉列表，并使用国家和城市的简单示例。

• 步骤 1：创建一个新的 .NET Core MVC 项目
• 步骤 2：定义模型
• 步骤 3：创建控制器
• 步骤 4：创建视图

每个步骤都涉及特定的任务，例如设置项目环境、定义数据模型、编写控制器逻辑来处理客户端请求以及制作视图来显示 UI 元素。

这种结构化方法不仅满足了客户的要求，而且遵循了使用 .NET Core 进行软件开发的最佳实践。通过遵循这些步骤，开发人员可以有效地实现根据其特定需求定制的级联下拉列表，从而增强其应用程序的整体功能。

步骤 1.创建 .NET Core MVC 项目

首先创建一个新的 .NET Core MVC 项目。打开 Visual Studio，选择“创建新项目”，然后选择“ASP.NET Core Web 应用程序”。为项目命名，并确保为框架选择 .NET Core 和 ASP.NET Core 3.1（或更高版本）。

第 2 步：定义模型

在我们的示例中，我们需要两个模型：国家/地区和城市。每个国家/地区都有多个城市。以下是如何定义这些模型。

public class Country
{
    public int CountryId { get; set; }
    public string Name { get; set; }
    public List<City> Cities { get; set; }
}

public class City
{
    public int CityId { get; set; }
    public string Name { get; set; }
    public int CountryId { get; set; } // Foreign key
}

步骤 3.创建控制器

添加一个名为 DropdownController 的新控制器。此控制器将负责获取下拉菜单的数据。

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

public class DropdownController : Controller
{
    private List<Country> countries = new List<Country>
    {
        new Country { CountryId = 1, Name = "United States", Cities = new List<City>
            {
                new City { CityId = 1, Name = "New York", CountryId = 1 },
                new City { CityId = 2, Name = "Los Angeles", CountryId = 1 }
            }
        },
        new Country { CountryId = 2, Name = "Canada", Cities = new List<City>
            {
                new City { CityId = 3, Name = "Toronto", CountryId = 2 },
                new City { CityId = 4, Name = "Vancouver", CountryId = 2 }
            }
        }
    };

    public IActionResult Index()
    {
        ViewBag.Countries = countries;
        return View();
    }

    public IActionResult GetCities(int countryId)
    {
        var cities = countries.FirstOrDefault(c => c.CountryId == countryId)?.Cities;
        return Json(cities);
    }
}

步骤 4.创建视图

现在，在 Views/Dropdown 下创建一个视图 Index.cshtml 并添加以下 HTML 和 JavaScript。

@{
    ViewData["Title"] = "Cascading Dropdown Demo";
}

<h2>@ViewData["Title"]</h2>

<select id="countryDropdown">
    <option value="">Select a Country</option>
    @foreach (var country in ViewBag.Countries)
    {
        <option value="@country.CountryId">@country.Name</option>
    }
</select>

<select id="cityDropdown">
    <option value="">Select a City</option>
</select>

@section Scripts {
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $('#countryDropdown').change(function () {
            var countryId = $(this).val();
            $('#cityDropdown').empty();
            $('#cityDropdown').append('<option value="">Select a City</option>');
            $.getJSON('@Url.Action("GetCities", "Dropdown")', { countryId: countryId }, function (cities) {
                $.each(cities, function (index, city) {
                    $('#cityDropdown').append($('<option>', {
                        value: city.cityId,
                        text: city.name
                    }));
                });
            });
        });
    </script>
}

此代码设置了两个下拉菜单。当选择一个国家/地区时，它会触发一个 JavaScript 函数，该函数使用 GetCities 操作获取该国/地区的城市并填充第二个下拉菜单。

五.结论

级联下拉列表可以简化数据输入和选择过程，从而显著增强用户体验。本指南演示了 .NET Core 应用程序中的基本实现。您可以通过与数据库集成并根据应用程序的要求添加更多动态内容来扩展此功能。