C# 技术使用笔记：基于 ASP.NET Core MVC 与 Layui 的增删改查教程
本教程旨在帮助开发者掌握如何在 ASP.NET Core MVC 项目中集成 Layui 框架，并实现基于表格的数据增、删、改、查操作。通过使用临时内存数据模拟数据库操作，我们将重点放在前后端的交互逻辑和数据展示上，帮助读者快速理解和实践这一开发模式。无论你是初学者还是有一定经验的开发者，本教程都将为你提供清晰的指导，助你轻松实现功能强大的 Web 应用。
本教程旨在帮助开发者掌握如何在 ASP.NET Core MVC 项目中集成 Layui 框架，并实现基于表格的数据增、删、改、查操作。通过使用临时内存数据模拟数据库操作，我们将重点放在前后端的交互逻辑和数据展示上，帮助读者快速理解和实践这一开发模式。无论你是初学者还是有一定经验的开发者，本教程都将为你提供清晰的指导，助你轻松实现功能强大的 Web 应用。
1. 项目搭建
1.1 创建 ASP.NET Core MVC 项目
打开 Visual Studio，选择“创建新项目”，在项目类型中选择“ASP.NET Core Web 应用程序”，点击“下一步”。输入项目名称，选择项目保存位置，点击“创建”。在项目模板中选择“MVC”，确保“身份验证”选项根据需要进行选择，点击“创建”，完成项目创建。此时，项目的基本结构已经生成，包括 Models、Views、Controllers 文件夹等，为后续开发奠定了基础。
1.2 添加 Layui 前端框架
在项目中使用 Layui，可以通过以下方式添加：
-
通过 NuGet 包管理器安装：在 Visual Studio 中，打开“工具”->“NuGet 包管理器”->“管理解决方案的 NuGet 包”，搜索“layui”相关包，找到合适的版本进行安装。安装完成后，Layui 的相关文件会自动添加到项目中，包括 CSS、JavaScript 等文件，方便在项目中使用。
-
手动下载并引入：访问 Layui 官方网站，下载 Layui 的完整包。将下载的文件解压后，将其中的 CSS 和 JavaScript 文件复制到项目的“wwwroot”目录下的相应文件夹中，例如创建“css”和“js”文件夹分别存放。在需要使用 Layui 的页面中，通过
<link>和<script>标签引入对应的 CSS 和 JavaScript 文件，如<link rel="stylesheet" href="~/css/layui.css" media="all">和<script src="~/js/layui.js"></script>，即可在页面中使用 Layui 的功能。
2. 后端实现
2.1 创建数据模型
在 ASP.NET Core MVC 项目中，数据模型是应用程序与数据库交互的基础。为了实现表格数据的增、删、改、查操作，我们首先需要定义一个数据模型类。假设我们要管理一个简单的用户信息表，可以创建一个名为User的模型类，代码如下：
namespace YourProjectNamespace.Models
{
public class User
{
public int Id { get; set; } // 主键
public string Name { get; set; } // 用户姓名
public string Email { get; set; } // 用户邮箱
public string Phone { get; set; } // 用户电话
}
}这个模型类定义了用户的基本信息，包括用户ID、姓名、邮箱和电话。在实际项目中，可以根据需求扩展更多的字段。
2.2 实现控制器方法
在 ASP.NET Core MVC 中，控制器是处理用户请求的核心组件。我们需要在控制器中实现与用户数据相关的增、删、改、查操作，并将数据以 JSON 格式返回给前端，以便前端使用 Layui 框架的表格进行展示和操作。
首先，创建一个名为UserController的控制器类：
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;
using YourProjectNamespace.Models;
namespace YourProjectNamespace.Controllers
{
public class UserController : Controller
{
// 临时内存数据，用于模拟数据库操作
private static List<User> users = new List<User>
{
new User { Id = 1, Name = "张三", Email = "zhangsan@example.com", Phone = "12345678901" },
new User { Id = 2, Name = "李四", Email = "lisi@example.com", Phone = "23456789012" },
new User { Id = 3, Name = "王五", Email = "wangwu@example.com", Phone = "34567890123" }
};
// 查询用户数据
[HttpGet]
public IActionResult GetUsers()
{
return Json(users);
}
// 添加用户
[HttpPost]
public IActionResult AddUser([FromBody] User user)
{
user.Id = users.Max(u => u.Id) + 1; // 自动生成新的用户ID
users.Add(user);
return Json(new { success = true, message = "用户添加成功" });
}
// 更新用户
[HttpPut]
public IActionResult UpdateUser([FromBody] User user)
{
var existingUser = users.FirstOrDefault(u => u.Id == user.Id);
if (existingUser != null)
{
existingUser.Name = user.Name;
existingUser.Email = user.Email;
existingUser.Phone = user.Phone;
return Json(new { success = true, message = "用户更新成功" });
}
return Json(new { success = false, message = "用户不存在" });
}
// 删除用户
[HttpDelete]
public IActionResult DeleteUser(int id)
{
var user = users.FirstOrDefault(u => u.Id == id);
if (user != null)
{
users.Remove(user);
return Json(new { success = true, message = "用户删除成功" });
}
return Json(new { success = false, message = "用户不存在" });
}
}
}在上述代码中，我们使用了一个静态的List<User>来模拟数据库中的用户数据。控制器中定义了四个方法：
-
GetUsers：用于查询所有用户数据，并以 JSON 格式返回。 -
AddUser：用于添加新用户，接收前端发送的用户数据，并将其添加到内存数据中。 -
UpdateUser：用于更新用户信息，根据用户ID找到对应的用户，并更新其信息。 -
DeleteUser：用于删除用户，根据用户ID从内存数据中移除对应的用户。
通过这些方法，后端可以实现用户数据的基本增、删、改、查操作，并将操作结果以 JSON 格式返回给前端，供 Layui 表格进行展示和操作。
3. 前端实现
3.1 创建表格页面
在 ASP.NET Core MVC 项目的 Views 文件夹中，创建一个新的视图文件，例如命名为Index.cshtml，用于展示用户数据的表格页面。在该页面中，首先引入 Layui 的 CSS 和 JavaScript 文件，以便使用 Layui 框架的功能。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户管理</title>
<!-- 引入 Layui CSS 文件 -->
<link rel="stylesheet" href="~/css/layui.css" media="all" />
</head>
<body>
<!-- 页面内容 -->
<div>
<h2>用户信息表</h2>
<!-- 按钮区域 -->
<button id="addUserBtn" class="layui-btn">添加用户</button>
<!-- 表格区域 -->
<table id="userTable" lay-filter="userTableFilter"></table>
</div>
<!-- 引入 Layui JavaScript 文件 -->
<script src="~/js/layui.js"></script>
<script>
layui.use(['table', 'layer'], function () {
var table = layui.table;
var layer = layui.layer;
// 初始化表格数据
table.render({
elem: '#userTable',
url: '/User/GetUsers', // 请求数据的 URL
cols: [[ // 表格列配置
{ field: 'id', title: 'ID', sort: true },
{ field: 'name', title: '姓名' },
{ field: 'email', title: '邮箱' },
{ field: 'phone', title: '电话' },
{ title: '操作', toolbar: '#operationBar' } // 自定义操作列
]],
page: true, // 开启分页
done: function (res, curr, count) {
// 表格数据加载完成后的回调函数
}
});
// 添加用户按钮点击事件
document.getElementById('addUserBtn').onclick = function () {
layer.open({
type: 1,
area: ['300px', '400px'],
title: '添加用户',
content: '<form class="layui-form" action="" style="margin:20px;">' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">姓名</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">邮箱</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">电话</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="phone" required lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">' +
'</div>' +
'</div>' +
'</form>',
btn: ['确定', '取消'],
yes: function (index, layero) {
var formData = layui.form.val(layero.find('form')[0]); // 获取表单数据
// 发起添加用户的请求
fetch('/User/AddUser', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
if (data.success) {
layer.msg('用户添加成功', { icon: 1 });
table.reload('userTable'); // 刷新表格数据
} else {
layer.msg(data.message, { icon: 2 });
}
});
}
});
};
// 表格操作列的工具条事件监听
table.on('tool(userTableFilter)', function (obj) {
var data = obj.data; // 获取当前行的数据
var layEvent = obj.event; // 获取 lay-event 对应的值（如果有）
var tr = obj.tr; // 获取当前行 tr 的 DOM 对象
if (layEvent === 'edit') {
// 编辑操作
layer.open({
type: 1,
area: ['300px', '400px'],
title: '编辑用户',
content: '<form class="layui-form" action="" style="margin:20px;">' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">姓名</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="name" required lay-verify="required" value="' + data.name + '" placeholder="请输入姓名" autocomplete="off" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">邮箱</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="email" required lay-verify="required" value="' + data.email + '" placeholder="请输入邮箱" autocomplete="off" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">电话</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="phone" required lay-verify="required" value="' + data.phone + '" placeholder="请输入电话" autocomplete="off" class="layui-input">' +
'</div>' +
'</div>' +
'<input type="hidden" name="id" value="' + data.id + '">' +
'</form>',
btn: ['确定', '取消'],
yes: function (index, layero) {
var formData = layui.form.val(layero.find('form')[0]); // 获取表单数据
// 发起更新用户的请求
fetch('/User/UpdateUser', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
if (data.success) {
layer.msg('用户更新成功', { icon: 1 });
table.reload('userTable'); // 刷新表格数据
} else {
layer.msg(data.message, { icon: 2 });
}
});
}
});
} else if (layEvent === 'delete') {
// 删除操作
layer.confirm('确定要删除该用户吗？', function (index) {
// 发起删除用户的请求
fetch('/User/DeleteUser?id=' + data.id, {
method: 'DELETE'
})
.then(response => response.json())
.then(data => {
if (data.success) {
layer.msg('用户删除成功', { icon: 1 });
table.reload('userTable'); // 刷新表格数据
} else {
layer.msg(data.message, { icon: 2 });
}
});
});
}
});
});
</script>
<!-- 表格操作列的工具条模板 -->
<script type="text/html" id="operationBar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
</body>
</html>在上述代码中，我们创建了一个包含用户信息表格的页面，并引入了 Layui 的 CSS 和 JavaScript 文件。表格使用 Layui 的表格组件进行渲染，通过elem属性指定表格的 DOM 元素，url属性指定请求数据的 URL（指向后端的GetUsers方法），cols属性配置表格的列，page属性开启分页功能。
页面中还包含一个“添加用户”按钮，点击该按钮会弹出一个添加用户的表单，用户输入信息后，通过fetch函数向后端的AddUser方法发送 POST 请求，添加用户成功后，会刷新表格数据。
表格的每一行都包含“编辑”和“删除”操作按钮，通过 Layui 的工具条事件监听功能，实现了对用户的编辑和删除操作。编辑操作会弹出一个预填充了当前用户信息的表单，用户修改信息后，通过fetch函数向后端的UpdateUser方法发送 PUT 请求，更新用户信息；删除操作会弹出一个确认框，用户确认后，通过fetch函数向后端的DeleteUser方法发送 DELETE 请求，删除用户。
4. 增删改查操作
4.1 添加数据
在前端页面中，通过点击“添加用户”按钮，会弹出一个添加用户的表单。用户在表单中输入姓名、邮箱和电话等信息后，点击“确定”按钮，前端会通过fetch函数向后端的AddUser方法发送 POST 请求。后端接收到请求后，会将新用户的数据添加到内存中的users列表中，并自动生成一个新的用户ID。添加成功后，后端返回一个包含成功信息的 JSON 响应，前端接收到响应后，会通过layer.msg弹出提示框告知用户添加成功，并调用table.reload方法刷新表格数据，使新添加的用户信息显示在表格中。
4.2 删除数据
在表格的每一行中，都有一个“删除”操作按钮。当用户点击该按钮时，前端会通过layer.confirm弹出一个确认框，询问用户是否确定要删除该用户。如果用户点击“确定”，前端会通过fetch函数向后端的DeleteUser方法发送 DELETE 请求，并将要删除的用户的ID作为请求参数传递给后端。后端接收到请求后，会根据用户ID在内存中的users列表中查找对应的用户，如果找到，则将其从列表中移除，并返回一个包含成功信息的 JSON 响应。前端接收到响应后，会通过layer.msg弹出提示框告知用户删除成功，并调用table.reload方法刷新表格数据，使被删除的用户信息从表格中移除。
4.3 修改数据
在表格的每一行中，还有一个“编辑”操作按钮。当用户点击该按钮时，前端会通过layer.open弹出一个编辑用户的表单，并将当前行的用户信息预填充到表单中。用户可以修改表单中的姓名、邮箱和电话等信息，然后点击“确定”按钮。前端会通过fetch函数向后端的UpdateUser方法发送 PUT 请求，并将修改后的用户数据作为请求体发送给后端。后端接收到请求后，会根据用户ID在内存中的users列表中查找对应的用户，如果找到，则更新其姓名、邮箱和电话等信息，并返回一个包含成功信息的 JSON 响应。前端接收到响应后，会通过layer.msg弹出提示框告知用户更新成功，并调用table.reload方法刷新表格数据，使修改后的用户信息更新在表格中。
4.4 查询数据
查询数据的操作是通过 Layui 表格组件的url属性自动完成的。在表格初始化时，url属性被设置为后端的GetUsers方法的 URL。当表格需要加载数据时，Layui 会自动向该 URL 发送 GET 请求，请求后端返回用户数据。后端的GetUsers方法会将内存中的users列表以 JSON 格式返回给前端。前端接收到数据后，会将其渲染到表格中，从而实现用户数据的查询和展示。此外，Layui 表格还支持分页功能，用户可以通过分页控件查看不同的数据页，前端会根据当前页码和每页显示的条数等参数，向后端发送带有分页信息的 GET 请求，后端会根据分页参数返回相应的数据子集，前端再将其渲染到表格中，实现分页查询的效果。# 5. 总结
通过上述内容，我们完整实现了一个基于 ASP.NET Core MVC 和 Layui 框架的用户信息管理系统。该系统能够实现用户数据的增、删、改、查操作，具有以下特点：
-
前后端分离：后端使用 ASP.NET Core MVC 提供数据接口，前端使用 Layui 框架进行页面展示和交互，两者通过 JSON 数据格式进行通信，符合现代 Web 开发的架构模式。
-
数据交互流畅：后端通过内存中的临时数据模拟数据库操作，能够快速响应前端的增、删、改、查请求，并以 JSON 格式返回操作结果，前端根据返回结果进行相应的提示和表格数据刷新，保证了数据交互的流畅性和实时性。
-
操作便捷：前端页面使用 Layui 的表格组件和弹窗功能，为用户提供了友好的操作界面。添加、编辑用户时，通过弹出表单的方式让用户输入数据，操作完成后自动刷新表格；删除用户时，通过确认框提示用户，避免误操作。
-
分页功能：Layui 表格支持分页功能，能够根据后端返回的总数据量和每页显示条数，自动计算出分页信息，并提供分页控件供用户切换页面，方便用户查看大量数据。
该系统可以作为一个基础模板，在实际项目中，可以根据需求进一步扩展和优化，例如与数据库进行集成、增加用户权限管理、优化前端页面样式等，以满足更复杂的应用场景。
助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台
更多推荐
22
0- 0
已为社区贡献1条内容
所有评论(0)