首页 > 网络编程 > ASP.NET > 实用技巧 > ASP.NET Core Layui联动

ASP.NET Core + Layui实现联动选择功能

2025-12-16 10:14:51 作者：caifox菜狐狸

本文主要介绍了ASP.NET Core项目中使用Layui实现联动选择功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在现代 Web 应用开发中，联动选择功能是一种常见的交互设计，广泛应用于表单填写、数据筛选等场景。它不仅可以提升用户体验，还能有效减少用户输入错误，提高数据的准确性和完整性。ASP.NET Core 作为微软推出的高性能、跨平台的 Web 开发框架，提供了强大的后端支持，而 Layui 则是一款基于 jQuery 的轻量级前端 UI 框架，以其简洁的样式和丰富的组件而广受欢迎。

本教程将结合 ASP.NET Core 和 Layui 的优势，详细讲解如何实现联动选择功能。我们将从环境搭建、后端数据接口开发、前端页面实现，到最终的调试与优化，逐步展开，帮助读者快速掌握这一实用功能的实现方法。无论你是初学者还是有一定开发经验的开发者，都可以通过本教程轻松上手，将联动选择功能应用到自己的项目中。让我们开始吧！

1. 环境准备

1.1 安装 ASP.NET Core

确保在开发环境中安装了最新版本的 ASP.NET Core。可以通过以下步骤完成安装：

访问.NET 官方下载页面。
根据操作系统选择相应的安装程序。
安装完成后，打开命令行工具，运行以下命令验证安装是否成功：
```
dotnet --version
```
如果安装成功，将显示已安装的 .NET 版本号。

1.2 引入 Layui 库

Layui 是一个前端 UI 框架，提供了丰富的组件和工具，方便实现联动选择等功能。可以通过以下方式引入 Layui：

在项目中使用 CDN 引入 Layui，将以下代码添加到项目的 HTML 文件中：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" rel="external nofollow"  rel="external nofollow"  media="all">
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>

或者，通过 npm 安装 Layui：
```
npm install layui-src
```
安装完成后，根据项目需求引入 Layui 的 CSS 和 JavaScript 文件。

2. 后端代码实现

2.1 创建数据模型

在 ASP.NET Core 中，数据模型用于定义数据的结构和关系。对于联动选择功能，我们需要创建两个相关联的数据模型，例如省份和城市。

public class Province
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<City> Cities { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ProvinceId { get; set; }
    public Province Province { get; set; }
}

Province 类表示省份，包含省份的 Id 和 Name 属性，以及一个 Cities 属性，用于关联该省份下的所有城市。
City 类表示城市，包含城市的 Id、Name 和 ProvinceId 属性，ProvinceId 是外键，用于关联所属省份。

2.2 编写控制器代码

控制器用于处理前端请求，并返回相应的数据。我们需要创建一个控制器来提供省份和城市的数据。

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

namespace YourProject.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class LocationController : ControllerBase
    {
        private static List<Province> _provinces = new List<Province>
        {
            new Province
            {
                Id = 1,
                Name = "省份1",
                Cities = new List<City>
                {
                    new City { Id = 1, Name = "城市1-1", ProvinceId = 1 },
                    new City { Id = 2, Name = "城市1-2", ProvinceId = 1 }
                }
            },
            new Province
            {
                Id = 2,
                Name = "省份2",
                Cities = new List<City>
                {
                    new City { Id = 3, Name = "城市2-1", ProvinceId = 2 },
                    new City { Id = 4, Name = "城市2-2", ProvinceId = 2 }
                }
            }
        };

        [HttpGet("provinces")]
        public IActionResult GetProvinces()
        {
            return Ok(_provinces.Select(p => new { p.Id, p.Name }));
        }

        [HttpGet("cities/{provinceId}")]
        public IActionResult GetCitiesByProvinceId(int provinceId)
        {
            var cities = _provinces.FirstOrDefault(p => p.Id == provinceId)?.Cities;
            if (cities == null)
            {
                return NotFound();
            }
            return Ok(cities.Select(c => new { c.Id, c.Name }));
        }
    }
}

LocationController 是一个 API 控制器，用于处理与省份和城市相关的请求。
GetProvinces 方法返回所有省份的列表，只包含省份的 Id 和 Name。
GetCitiesByProvinceId 方法根据省份的 Id 返回该省份下的所有城市列表，同样只包含城市的 Id 和 Name。

通过以上后端代码实现，我们为前端提供了联动选择所需的数据接口。

3. 前端代码实现

3.1 创建 HTML 页面结构

在 ASP.NET Core 项目中，创建一个 HTML 页面，用于展示联动选择的省份和城市。以下是页面的基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联动选择示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" rel="external nofollow"  rel="external nofollow"  media="all">
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md6">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">省份</label>
                        <div class="layui-input-block">
                            <select name="province" id="province" lay-filter="provinceSelect">
                                <option value="">请选择省份</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">城市</label>
                        <div class="layui-input-block">
                            <select name="city" id="city" lay-filter="citySelect">
                                <option value="">请选择城市</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
    <script src="js/linkage.js"></script>
</body>
</html>

页面中包含两个 select 元素，分别用于选择省份和城市。
使用 Layui 的样式类 layui-form 和 layui-form-item 来美化表单布局。
为省份和城市的 select 元素分别设置了 id 和 lay-filter 属性，以便在 JavaScript 中进行操作。

3.2 编写联动选择的 JavaScript 代码

在项目中创建一个 js 文件夹，并在其中创建 linkage.js 文件，用于编写联动选择的 JavaScript 代码。以下是代码实现：

layui.use(['form', 'jquery'], function () {
    var form = layui.form;
    var $ = layui.$;

    // 加载省份数据
    $.ajax({
        url: '/api/location/provinces',
        type: 'GET',
        success: function (data) {
            var provinceSelect = $('#province');
            data.forEach(function (province) {
                provinceSelect.append($('<option></option>').attr('value', province.id).text(province.name));
            });
            form.render('select'); // 重新渲染省份选择框
        },
        error: function (xhr, status, error) {
            console.error('加载省份数据失败:', error);
        }
    });

    // 省份选择框的选中事件
    form.on('select(provinceSelect)', function (data) {
        var provinceId = data.value;
        var citySelect = $('#city');
        citySelect.empty().append($('<option></option>').attr('value', '').text('请选择城市'));
        if (provinceId) {
            // 根据省份 ID 加载城市数据
            $.ajax({
                url: '/api/location/cities/' + provinceId,
                type: 'GET',
                success: function (data) {
                    data.forEach(function (city) {
                        citySelect.append($('<option></option>').attr('value', city.id).text(city.name));
                    });
                    form.render('select'); // 重新渲染城市选择框
                },
                error: function (xhr, status, error) {
                    console.error('加载城市数据失败:', error);
                }
            });
        }
    });
});

使用 Layui 的模块加载机制，引入 form 和 jquery 模块。
通过 AJAX 请求从后端获取省份数据，并动态填充到省份的 select 元素中。
监听省份选择框的选中事件，当用户选择一个省份时，通过 AJAX 请求根据省份 ID 获取对应的城市数据，并动态填充到城市的 select 元素中。
使用 form.render('select') 方法重新渲染选择框，确保 Layui 的样式和功能正常生效。

4. 调试与优化

4.1 测试联动选择功能

在完成前端和后端代码实现后，需要对联动选择功能进行全面测试，确保其在各种情况下都能正常工作。

测试环境准备：确保开发环境已正确安装 ASP.NET Core 和 Layui，并且项目能够正常运行。同时，准备一些测试数据，例如多个省份及其对应的城市，用于验证功能的正确性。

功能测试：

打开页面，检查省份下拉框是否正确加载并显示所有省份选项。如果没有显示省份，检查后端 GetProvinces 方法是否正确返回数据，以及前端 AJAX 请求是否成功获取到数据。
选择一个省份，检查城市下拉框是否根据所选省份动态加载对应的城市选项。如果没有正确加载城市，检查后端 GetCitiesByProvinceId 方法是否正确返回数据，以及前端 AJAX 请求的省份 ID 是否正确传递。
测试选择不同省份时，城市下拉框是否能够正确更新，确保联动功能的实时性和准确性。
测试在没有网络连接或后端服务不可用的情况下，页面是否能够友好地提示用户，例如显示“加载失败，请稍后再试”等提示信息。

边界测试：

测试省份或城市数据为空的情况，确保页面能够正确处理并提示用户“暂无数据”。
测试省份 ID 不存在或非法的情况，检查后端是否能够返回正确的错误信息，前端是否能够正确处理并提示用户。

性能测试：

测试在省份和城市数据量较大时，页面的加载速度和响应时间。如果性能较差，可以考虑对后端数据查询进行优化，例如使用缓存机制减少数据库查询次数，或者对前端代码进行优化，减少不必要的 DOM 操作。
使用浏览器开发者工具的网络面板，观察 AJAX 请求的响应时间和数据传输量，分析是否存在性能瓶颈。

4.2 优化用户体验

在确保功能正常工作的基础上，进一步优化用户体验，提升用户操作的便捷性和舒适度。

界面优化：

调整页面布局，确保省份和城市选择框的排列合理、美观，与其他页面元素协调一致。可以使用 Layui 提供的栅格系统或其他布局工具来优化页面布局。
为选择框添加合适的占位符文本，例如“请选择省份”和“请选择城市”，在用户未选择任何选项时提供明确的提示。
优化选择框的样式，使其更符合现代设计风格，例如调整字体大小、颜色、边框样式等，提升页面的整体视觉效果。

交互优化：

在省份选择框加载数据时，添加一个加载动画或提示文字，告知用户数据正在加载中，避免用户误以为页面卡住。
当用户选择省份后，城市选择框可以立即显示加载动画或提示文字，直到城市数据加载完成，提升交互的流畅性。
为选择框添加键盘快捷键支持，例如用户可以通过键盘上下箭头键快速选择选项，按下回车键确认选择，提高操作效率。
在用户选择省份或城市后，可以自动聚焦到下一个输入框或按钮，引导用户进行下一步操作。

数据优化：

对省份和城市数据进行排序，例如按照省份名称或城市名称的字母顺序排序，方便用户快速查找和选择。
如果省份和城市数据量较大，可以考虑在选择框中添加搜索功能，允许用户通过输入关键字快速定位到目标选项。
对于一些常见的省份和城市，可以将其设置为默认选项，方便用户快速选择常用地区。

错误处理优化：

在后端返回错误信息时，前端页面应能够以友好的方式展示给用户，例如使用弹窗或提示框显示错误原因，而不是直接显示技术性的错误代码。
对于网络请求失败的情况，可以提供重试按钮，允许用户手动重新加载数据，而不是让用户刷新页面重新开始操作。
记录用户的操作日志和错误信息，便于开发人员分析问题原因，及时修复潜在的缺陷，进一步提升系统的稳定性和可靠性。

5. 总结

在本教程中，我们详细介绍了如何在 ASP.NET Core 项目中使用 Layui 实现联动选择功能。通过环境准备、后端代码实现、前端代码实现以及调试与优化四个部分的逐步讲解，展示了从搭建开发环境到实现功能的完整过程。

在环境准备阶段，我们确保了开发环境正确安装了 ASP.NET Core，并引入了 Layui 库，为后续开发奠定了基础。

后端代码实现部分，我们创建了数据模型并编写了控制器代码，通过 API 接口为前端提供了省份和城市的数据支持。这确保了后端能够根据前端请求返回正确的数据，为联动选择功能提供了数据基础。

前端代码实现部分，我们创建了 HTML 页面结构，并编写了联动选择的 JavaScript 代码。通过 Layui 的样式和功能，实现了省份和城市选择框的联动效果，提升了用户体验。

最后，在调试与优化阶段，我们对联动选择功能进行了全面测试，包括功能测试、边界测试和性能测试，确保了功能的正确性和稳定性。同时，我们对用户体验进行了优化，从界面、交互、数据和错误处理等多个方面提升了用户操作的便捷性和舒适度。

通过本教程的实践，读者可以掌握在 ASP.NET Core 中使用 Layui 实现联动选择功能的方法和技巧，为开发类似的前端交互功能提供参考和借鉴。

到此这篇关于ASP.NET Core + Layui实现联动选择功能的文章就介绍到这了,更多相关ASP.NET Core Layui联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！