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

环境:

win10, .NET 6.0


目录

问题描述

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

解决方案

基础版

数据库查询部分(Entity Framework)

  1. BasicPartsDbContext.cs
csharp 复制代码
using System.Data.Entity;

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

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

csharp 复制代码
using System.ComponentModel.DataAnnotations.Schema;

namespace WebApplication1.Models
{
    [Table("dbo.表名")]
    public class BasicParts
    {
        // 对应列
    }
}

"name=conn1"是指使用此数据库配置。该配置在项目根目录下的Web.config中:

  1. BasicPartsRepository.cs
csharp 复制代码
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();
        }
    }
}

控制器

csharp 复制代码
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);
	}
	...
}

前端页面

html 复制代码
<!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>

加载到表格版

其他部分保持不变,只修改前端:

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>
相关推荐
betazhou15 分钟前
SQL server之版本的初认知
数据库·oracle·goldengate·sql server·ogg·gdr
superonion062016 分钟前
【DB2】load报错SQL3501W、SQL3109N、SQL2036N
数据库
~ 小团子17 分钟前
每日一SQL 【每月交易 I】
数据库·sql
apihz1 小时前
VM虚拟机全版本网盘+免费本地网络穿透端口映射实时同步动态家庭IP教程
android·服务器·开发语言·网络·数据库·网络协议·tcp/ip
UestcXiye1 小时前
Rust Web 全栈开发(五):使用 sqlx 连接 MySQL 数据库
数据库·mysql·rust
Jane Chiu1 小时前
Oracle大表数据清理优化与注意事项详解
数据库
sniper_fandc2 小时前
Redis数据类型之list
数据库·redis·list
树谷-胡老师2 小时前
1965–2022年中国大陆高分辨率分部门用水数据集,包含:灌溉用水、工业制造用水、生活用水和火电冷却
大数据·数据库·arcgis
未来之窗软件服务2 小时前
MySQL 中图标字符存储问题探究:使用外挂法,毕业论文——仙盟创梦IDE
数据库·mysql·毕业论文·仙盟创梦ide·东方仙盟
行走在云端z3 小时前
mongodb 开源同步工具介绍
数据库·mongodb·开源