在当今的 Web 开发中，高效的数据交互与灵活的前端展示是构建优质用户体验的关键。ASP.NET Core MVC 作为强大的后端框架，搭配 Dapper 这一轻量级 ORM 工具，能够实现高效的数据操作与查询；而 Layui 作为前端 UI 框架，其 Table 组件提供了简洁美观且功能强大的表格展示与交互能力。本教程将带你深入探索如何在 ASP.NET Core MVC 项目中，通过 Dapper 实现基于多个查询条件的动态数据查询，并将查询结果以 JSON 格式返回给前端 Layui Table 组件进行展示。无论你是初学者还是有一定开发经验的开发者，都能通过本教程掌握前后端高效协作的实用技巧，打造出更加灵活、高效的 Web 应用。
1. 环境搭建与依赖配置
1.1 安装 ASP.NET Core MVC 模板
首先，确保你的开发环境已经安装了 .NET SDK。打开终端或命令提示符，运行以下命令来创建一个新的 ASP.NET Core MVC 项目：
dotnet new mvc -n MyLayuiApp
cd MyLayuiApp这将创建一个名为 MyLayuiApp 的新项目，并切换到项目目录中。
接下来，启动项目以确认环境搭建成功：
dotnet run访问 http://localhost:5000，如果看到默认的 ASP.NET Core MVC 欢迎页面，说明环境搭建完成。
1.2 添加 Dapper NuGet 包
在项目中使用 Dapper，需要先安装 Dapper NuGet 包。在项目目录下打开终端，运行以下命令：
dotnet add package Dapper安装完成后，你可以在项目中使用 Dapper 来操作数据库。
1.3 配置数据库连接字符串
在 appsettings.json 文件中配置数据库连接字符串。假设你使用的是 SQL Server 数据库，配置如下：
{
"ConnectionStrings": {
"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=MyLayuiDb;Trusted_Connection=True;"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}在 Startup.cs 文件中，确保已经注册了数据库上下文。在 ConfigureServices 方法中添加以下代码：
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddDbContext<MyDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
}其中，MyDbContext 是你自定义的数据库上下文类，用于连接数据库。
2. 创建数据模型与数据库操作类
2.1 定义数据模型类
在 Models 文件夹中创建一个名为 User.cs 的文件，定义用户数据模型类。该类将用于映射数据库中的用户表，代码如下：
namespace MyLayuiApp.Models
{
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string Email { get; set; }
}
}这个类包含用户的基本信息字段，如 Id、Name、Age 和 Email，分别对应数据库表中的列。
2.2 创建数据库操作类
在 Data 文件夹中创建一个名为 UserRepository.cs 的文件，用于实现对用户数据的数据库操作。代码如下：
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Threading.Tasks;
using Dapper;
using Microsoft.Extensions.Configuration;
namespace MyLayuiApp.Data
{
public class UserRepository
{
private readonly IConfiguration _configuration;
public UserRepository(IConfiguration configuration)
{
_configuration = configuration;
}
public async Task<List<User>> GetUsersAsync(string name = null, int? age = null)
{
using (IDbConnection db = new SqlConnection(_configuration.GetConnectionString("DefaultConnection")))
{
string query = "SELECT * FROM Users WHERE 1=1";
var parameters = new DynamicParameters();
if (!string.IsNullOrEmpty(name))
{
query += " AND Name LIKE @Name";
parameters.Add("@Name", $"%{name}%");
}
if (age.HasValue)
{
query += " AND Age = @Age";
parameters.Add("@Age", age);
}
return (await db.QueryAsync<User>(query, parameters)).ToList();
}
}
}
}代码说明
-
依赖注入：
-
UserRepository类通过构造函数注入IConfiguration，用于获取数据库连接字符串。
-
-
动态查询：
-
使用
Dapper的DynamicParameters动态构建查询条件，支持按Name模糊查询和按Age精确查询。 -
查询条件通过参数化的方式添加到 SQL 查询中，避免 SQL 注入风险。
-
-
异步执行：
-
使用
QueryAsync方法异步执行查询，提高性能。
-
-
返回数据：
-
查询结果直接映射为
User类型的列表，方便后续操作。
-
通过以上代码，我们定义了用户数据模型类，并实现了基于 Dapper 的数据库操作类，能够根据多个查询条件动态查询用户数据。
3. 控制器实现与数据查询
3.1 创建控制器
在 Controllers 文件夹中创建一个名为 UserController.cs 的文件，用于处理与用户数据相关的请求。以下是控制器的基本代码结构：
using Microsoft.AspNetCore.Mvc;
using MyLayuiApp.Data;
using System.Threading.Tasks;
namespace MyLayuiApp.Controllers
{
public class UserController : Controller
{
private readonly UserRepository _userRepository;
public UserController(UserRepository userRepository)
{
_userRepository = userRepository;
}
}
}代码说明
-
依赖注入：
-
通过构造函数注入
UserRepository，以便在控制器中使用UserRepository提供的数据库操作功能。
-
-
控制器基础：
-
控制器继承自
Controller基类，这是 ASP.NET Core MVC 控制器的标准实现方式。
-
3.2 实现带查询条件的分页查询方法
在 UserController 中实现一个方法，用于根据查询条件和分页参数返回用户数据。以下是完整的代码实现：
[HttpGet]
public async Task<IActionResult> GetUsers(int page = 1, int limit = 10, string name = null, int? age = null)
{
// 查询用户数据
var users = await _userRepository.GetUsersAsync(name, age);
// 计算分页数据
var total = users.Count;
var paginatedUsers = users.Skip((page - 1) * limit).Take(limit).ToList();
// 构建返回的 JSON 数据
var result = new
{
code = 0, // Layui table 的返回码，0 表示成功
msg = "",
count = total, // 总记录数
data = paginatedUsers // 当前页的数据
};
return Json(result);
}代码说明
-
方法定义：
-
使用
[HttpGet]特性标记方法，表示该方法响应 GET 请求。 -
方法参数包括分页参数
page和limit，以及查询条件name和age。
-
-
数据查询：
-
调用
UserRepository的GetUsersAsync方法，根据传入的查询条件获取用户数据。
-
-
分页处理：
-
使用 LINQ 的
Skip和Take方法实现分页逻辑。 -
total表示总记录数，paginatedUsers表示当前页的数据。
-
-
返回 JSON 数据：
-
构建一个符合 Layui table 要求的 JSON 数据格式。
-
code设置为 0，表示成功。 -
msg用于返回提示信息，此处为空。 -
count表示总记录数。 -
data表示当前页的数据。
-
通过以上实现，控制器能够根据查询条件和分页参数动态查询用户数据，并以 JSON 格式返回给前端 Layui table 组件。
4. 前端页面与 Layui Table 配置
4.1 创建前端页面
在 Views/User 文件夹中创建一个名为 Index.cshtml 的文件，用于展示用户数据的前端页面。以下是页面的基本代码结构：
<!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@2.8.5/dist/css/layui.css" media="all">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-inline">
<label class="layui-form-label">姓名：</label>
<div class="layui-input-inline">
<input type="text" id="name" name="name" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年龄：</label>
<div class="layui-input-inline">
<input type="number" id="age" name="age" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn" id="search">查询</button>
</div>
</div>
</div>
<table id="userTable" lay-filter="userTable"></table>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui@2.8.5/dist/layui.js"></script>
<script>
layui.use(['table'], function () {
var table = layui.table;
// 初始化表格
table.render({
elem: '#userTable',
url: '/User/GetUsers', // 数据接口
cols: [[ // 表头
{ field: 'id', title: 'ID', sort: true },
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
{ field: 'email', title: '邮箱' }
]],
page: true, // 开启分页
limits: [10, 20, 30, 50],
limit: 10,
done: function (res, curr, count) {
console.log(res); // 当前页的数据
console.log(curr); // 当前页码
console.log(count); // 数据总量
}
});
// 查询按钮点击事件
document.getElementById('search').onclick = function () {
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
// 重新加载表格数据
table.reload('userTable', {
where: {
name: name,
age: age
},
page: {
curr: 1 // 重新从第一页开始
}
});
};
});
</script>
</body>
</html>代码说明
-
页面布局：
-
使用 Layui 的样式和组件来构建页面，包括查询表单和表格展示区域。
-
查询表单包含姓名和年龄两个输入框，以及一个查询按钮。
-
-
Layui Table 初始化：
-
使用
layui.table.render方法初始化表格，指定表格的 DOM 元素、数据接口、表头字段、分页配置等。 -
数据接口指向后端的
/User/GetUsers方法，该方法会根据查询条件和分页参数返回 JSON 数据。
-
-
查询功能实现：
-
通过查询按钮的点击事件，获取用户输入的查询条件（姓名和年龄）。
-
使用
layui.table.reload方法重新加载表格数据，并将查询条件作为参数传递给后端接口。 -
每次查询后，表格会自动跳转到第一页。
-
4.2 配置 Layui Table 组件
在 Index.cshtml 页面中，我们已经完成了 Layui Table 的基本配置。以下是关键配置项的详细说明：
数据接口配置
url: '/User/GetUsers'-
指定表格数据的接口地址，后端的
GetUsers方法会根据查询条件和分页参数返回符合 Layui Table 要求的 JSON 数据格式。
表头字段配置
cols: [[
{ field: 'id', title: 'ID', sort: true },
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
{ field: 'email', title: '邮箱' }
]]-
定义表格的表头字段，
field对应后端返回的 JSON 数据中的字段名，title是表头的显示名称。 -
sort: true表示该列支持排序功能。
分页配置
page: true,
limits: [10, 20, 30, 50],
limit: 10-
page: true开启分页功能。 -
limits定义每页显示的记录数选项，默认值为[10, 20, 30, 50]。 -
limit定义默认每页显示的记录数，默认值为10。
数据加载回调
done: function (res, curr, count) {
console.log(res); // 当前页的数据
console.log(curr); // 当前页码
console.log(count); // 数据总量
}-
在表格数据加载完成后触发的回调函数，可以用于调试或其他自定义操作。
通过以上配置，Layui Table 组件能够与后端的 ASP.NET Core MVC 控制器无缝对接，实现动态查询和分页显示用户数据的功能。
5. 测试与调试
5.1 测试查询功能
为了确保整个系统能够正常工作，需要对查询功能进行全面测试。以下是测试步骤和注意事项：
测试环境准备
-
确保数据库中已经插入了足够的测试数据，包括不同姓名、年龄和邮箱的用户记录。
-
启动 ASP.NET Core MVC 项目，访问前端页面
http://localhost:5000/User/Index，确保页面能够正常加载。
测试用例
-
测试无查询条件时的分页显示
-
不输入任何查询条件，直接点击查询按钮。
-
预期结果：表格显示所有用户数据，并按照默认的分页参数（每页10条）进行分页显示。
-
实际结果：检查表格是否正确显示了所有用户数据，分页功能是否正常工作。
-
-
测试按姓名模糊查询
-
在姓名输入框中输入部分姓名字符（如“张”），点击查询按钮。
-
预期结果：表格显示所有姓名中包含该字符的用户记录，并按照分页参数进行分页显示。
-
实际结果：检查返回的用户数据是否符合预期，分页信息是否正确。
-
-
测试按年龄精确查询
-
在年龄输入框中输入一个具体的年龄值（如“25”），点击查询按钮。
-
预期结果：表格只显示年龄为25的用户记录，并按照分页参数进行分页显示。
-
实际结果：检查返回的用户数据是否符合预期，分页信息是否正确。
-
-
测试组合查询
-
同时在姓名输入框中输入部分姓名字符（如“张”），在年龄输入框中输入一个具体的年龄值（如“25”），点击查询按钮。
-
预期结果：表格显示姓名中包含“张”且年龄为25的用户记录，并按照分页参数进行分页显示。
-
实际结果：检查返回的用户数据是否符合预期，分页信息是否正确。
-
测试结果记录
-
记录每个测试用例的预期结果和实际结果，对比是否一致。
-
如果发现实际结果与预期结果不符，记录问题现象和可能的原因，便于后续调试。
5.2 调试常见问题
在测试过程中，可能会遇到一些常见问题，以下是问题的排查和解决方法：
1. 数据无法显示
-
问题现象：前端页面的表格中没有显示任何数据。
-
排查方法：
-
检查数据库中是否有数据，确保数据表中有记录。
-
检查后端
GetUsers方法是否能够正常执行，通过日志或调试工具查看是否有异常。 -
检查前端页面的网络请求，确保请求已经发送到后端接口，并且后端接口返回了正确的 JSON 数据。
-
-
解决方法：
-
如果数据库中没有数据，插入测试数据。
-
如果后端方法有异常，修复代码中的错误。
-
如果前端请求有问题，检查 URL 是否正确，参数是否传递正确。
-
2. 分页功能异常
-
问题现象：分页显示不正确，如总记录数不准确，或者分页跳转不正常。
-
排查方法：
-
检查后端
GetUsers方法中分页逻辑的实现是否正确，确保total和paginatedUsers的计算是正确的。 -
检查前端页面的 Layui Table 配置，确保分页参数（如
limit和limits）设置正确。 -
检查前端页面的网络请求，确保分页参数能够正确传递到后端接口。
-
-
解决方法：
-
如果后端分页逻辑有问题，修复代码中的错误。
-
如果前端配置有问题，调整 Layui Table 的分页配置。
-
如果参数传递有问题，检查前端页面的 JavaScript 代码，确保参数能够正确传递。
-
3. 查询条件不生效
-
问题现象：输入查询条件后，表格显示的数据没有按照查询条件过滤。
-
排查方法：
-
检查后端
GetUsers方法中查询条件的构建是否正确，确保 SQL 查询语句和参数设置是正确的。 -
检查前端页面的查询按钮点击事件，确保查询条件能够正确获取并传递到后端接口。
-
检查后端接口的参数接收是否正确，通过日志或调试工具查看参数值。
-
-
解决方法：
-
如果后端查询条件构建有问题，修复 SQL 查询语句和参数设置。
-
如果前端查询条件获取有问题，检查 JavaScript 代码，确保查询条件能够正确获取。
-
如果后端接口参数接收有问题，检查方法参数的定义和绑定。
-
4. SQL 注入风险
-
问题现象：虽然使用了参数化查询，但在某些情况下仍然可能存在 SQL 注入风险。
-
排查方法：
-
检查后端
GetUsers方法中是否严格使用了参数化查询，确保所有用户输入的查询条件都通过参数传递给 SQL 查询。 -
检查是否有其他地方直接拼接用户输入的字符串到 SQL 查询中。
-
-
解决方法：
-
确保所有查询条件都通过参数化的方式传递给 SQL 查询，避免直接拼接用户输入。
-
使用 Dapper 的
DynamicParameters或其他参数化工具来构建查询条件。
-
通过以上测试和调试步骤，可以确保 ASP.NET Core MVC 项目中控制器返回数据给前端 Layui Table 组件的功能能够正常工作，并且能够处理多个查询条件和分页显示的需求。
6. 总结
在本教程中，我们详细介绍了如何在 ASP.NET Core MVC 项目中实现控制器返回 JSON 数据给前端 Layui 组件 Table，并且支持多个查询条件，同时使用 Dapper 操作数据。以下是整个实现过程的总结：
6.1 环境搭建与依赖配置
-
成功搭建了 ASP.NET Core MVC 项目，并安装了 Dapper NuGet 包。
-
配置了数据库连接字符串，并在
Startup.cs中注册了数据库上下文。
6.2 数据模型与数据库操作类
-
定义了用户数据模型类
User，用于映射数据库中的用户表。 -
创建了
UserRepository类，使用 Dapper 实现了基于多个查询条件的动态查询功能，支持异步操作。
6.3 控制器实现与数据查询
-
创建了
UserController，并通过依赖注入引入了UserRepository。 -
实现了
GetUsers方法，支持根据查询条件和分页参数动态查询用户数据，并以 JSON 格式返回给前端 Layui Table 组件。
6.4 前端页面与 Layui Table 配置
-
创建了前端页面
Index.cshtml，使用 Layui 构建了用户管理页面，包括查询表单和表格展示区域。 -
配置了 Layui Table 组件，实现了与后端接口的对接，支持动态查询和分页显示用户数据。
6.5 测试与调试
-
对整个系统进行了全面测试，包括无查询条件的分页显示、按姓名模糊查询、按年龄精确查询以及组合查询。
-
针对测试过程中可能出现的问题，提供了详细的排查和解决方法，确保系统能够正常运行。
通过以上步骤，我们成功实现了一个完整的功能：后端使用 ASP.NET Core MVC 和 Dapper 操作数据库，根据多个查询条件动态查询用户数据，并以 JSON 格式返回给前端；前端使用 Layui Table 组件展示数据，并支持分页和查询功能。这一实现不仅展示了 ASP.NET Core MVC 与 Layui 的高效结合，还体现了 Dapper 在数据操作方面的灵活性和高效性。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
