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

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