ASP.NET MVC-懒加载-逐步加载数据库信息

环境：
win10, .NET 6.0

问题描述

假设我数据库中有N个表，当我打开某页面时，每个表都先加载一部分（比如20条），点击表下某个按钮，再加载下一部分，如此循环直至加载完毕。

解决方案

基础版

数据库查询部分（Entity Framework）

BasicPartsDbContext.cs

using System.Data.Entity;namespace WebApplication1.Models
{public class BasicPartsDbContext:DbContext{public BasicPartsDbContext() : base("name=conn1") { }public DbSet<BasicParts> BasicParts { get; set; }}
}

其中BasicParts是我的实体/模型类，数据类型与数据库中某个表一一对应，内容大概如下：

using System.ComponentModel.DataAnnotations.Schema;namespace WebApplication1.Models
{[Table("dbo.表名")]public class BasicParts{// 对应列}
}

而"name=conn1"是指使用此数据库配置。该配置在项目根目录下的Web.config中：
在这里插入图片描述
2. BasicPartsRepository.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;namespace WebApplication1.Models
{public class BasicPartsRepository{private BasicPartsDbContext _context;public BasicPartsRepository(BasicPartsDbContext context){_context = context;}public List<BasicParts> GetPagedData(int pageIndex, int pageSize) {return _context.BasicParts.OrderBy(i => i.id).Skip(pageIndex * pageSize).Take(pageSize).ToList();}}
}

控制器

public class HomeController : Controller {private BasicPartsRepository _basicPartsRepository;...public ActionResult BasicPartsView() { return View();}[HttpGet]public JsonResult LoadMoreBasicParts(int pageIndex, int pageSize) {var data = _basicPartsRepository.GetPagedData(pageIndex, pageSize);return Json(data, JsonRequestBehavior.AllowGet);}...
}

前端页面

<!DOCTYPE html>
<html>
<head><title>Load More Data Example</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><div id="data-container"><!-- 这里将显示从服务器加载的数据 --></div><button id="load-more">加载更多</button><script>var pageIndex = 0;var pageSize = 20;function loadMoreData() {$.ajax({url: '/Home/LoadMoreBasicParts',data: {pageIndex: pageIndex,pageSize: pageSize},success: function (data) {pageIndex++;// 将新加载的数据追加到页面上data.forEach(function (item) {$('#data-container').append('<p>' + item.name + '</p>');});}});}$(document).ready(function () {$('#load-more').on('click', function () {loadMoreData();});// 页面加载完成时，加载初始数据loadMoreData();});</script>
</body>
</html>

加载到表格版

其他部分保持不变，只修改前端：

<!DOCTYPE html>
<html>
<head><title>Load More Data into Table</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><table id="data-table" border="1"><thead><tr><th>No.</th><th>名称</th><th>序列</th><th>描述</th><th>类型</th></tr></thead><tbody><!-- 这里是数据行 --></tbody></table><button id="load-more">加载更多</button><script>var pageIndex = 0;var pageSize = 20;function loadMoreData() {$.ajax({url: '/Home/LoadMoreBasicParts',data: {pageIndex: pageIndex,pageSize: pageSize},success: function (data) {pageIndex++;// 将新加载的数据追加到表格中data.forEach(function (item) {$('#data-table tbody').append('<tr>' +'<td>' + item.id + '</td>' +'<td>' + item.name + '</td>' +'<td>' + item.seq + '</td>' +'<td>' + item.info + '</td>' +'<td>' + item.stype + '</td>' +'</tr>');});}});}$(document).ready(function () {$('#load-more').on('click', function () {loadMoreData();});// 页面加载完成时，加载初始数据loadMoreData();});</script>
</body>
</html>