C# 技术使用笔记：基于 ASP.NET Core MVC 与 Layui 的增删改查教程

本教程旨在帮助开发者掌握如何在 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 的页面中，通过和，即可在页面中使用 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 users = new List
        {
            new User { Id = 1, Name = "张三", Email = "[email protected]", Phone = "12345678901" },
            new User { Id = 2, Name = "李四", Email = "[email protected]", Phone = "23456789012" },
            new User { Id = 3, Name = "王五", Email = "[email protected]", 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来模拟数据库中的用户数据。控制器中定义了四个方法：

• GetUsers：用于查询所有用户数据，并以 JSON 格式返回。

• AddUser：用于添加新用户，接收前端发送的用户数据，并将其添加到内存数据中。

• UpdateUser：用于更新用户信息，根据用户ID找到对应的用户，并更新其信息。

• DeleteUser：用于删除用户，根据用户ID从内存数据中移除对应的用户。

通过这些方法，后端可以实现用户数据的基本增、删、改、查操作，并将操作结果以 JSON 格式返回给前端，供 Layui 表格进行展示和操作。

3. 前端实现

3.1 创建表格页面

在 ASP.NET Core MVC 项目的 Views 文件夹中，创建一个新的视图文件，例如命名为Index.cshtml，用于展示用户数据的表格页面。在该页面中，首先引入 Layui 的 CSS 和 JavaScript 文件，以便使用 Layui 框架的功能。代码如下：

    
    
    
    


    
    

        
用户信息表
        
        添加用户
        
        
    

    
    
    
    
    

在上述代码中，我们创建了一个包含用户信息表格的页面，并引入了 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 表格支持分页功能，能够根据后端返回的总数据量和每页显示条数，自动计算出分页信息，并提供分页控件供用户切换页面，方便用户查看大量数据。

该系统可以作为一个基础模板，在实际项目中，可以根据需求进一步扩展和优化，例如与数据库进行集成、增加用户权限管理、优化前端页面样式等，以满足更复杂的应用场景。