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

更新时间：2024年10月10日 10:24:17 作者：陆沙

在ASP.NET MVC中实现数据库的逐步加载可通过懒加载技术完成,首先,在EntityFramework中配置数据库上下文,使用对应的实体类映射数据库表,本文给大家介绍ASP.NET MVC懒加载如何逐步加载数据库信息,感兴趣的朋友跟随小编一起看看吧

问题描述

假设我数据库中有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-懒加载-逐步加载数据库信息的文章就介绍到这了,更多相关ASP.NET MVC逐步加载数据库信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

ASP.NET Core 9.0 中新增的MapStaticAssets() 中
文章介绍了ASP.NET Core 9.0新增的MapStaticAssets中间件,该中间件解决了UseStaticFiles存在的缺陷,如缺乏静态资源传输压缩、ETag低效缓存和缺乏指纹识别,它通过生成时间压缩、基于内容的ETags和指纹识别来提升性能,感兴趣的朋友一起看看吧
2024-12-12
ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法
ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法，需要的朋友可以参考一下
2013-05-05
ASP.NET MVC中的视图生成实例分析
这篇文章主要介绍了ASP.NET MVC中的视图生成的过程,以实例形式详细分析了控制器、布局与视图的操作方法与技巧,非常具有实用价值,需要的朋友可以参考下
2014-12-12
.Net集成敏感词组件的步骤
现如今大部分服务都会有用户输入，为了服务的正常运行，很多时候不得不针对输入进行敏感词的检测、替换。如果人工做这样的工作，不仅效率低，成本也高。水弟在这里写了一个让小编姐姐都觉得快的敏感词组件接入示例，不需要依赖第三方服务，只需两分钟即可享受清爽文字。
2021-05-05
ASP.NET无刷新分页简单实现
无刷新分页功能，虽然比较简单，但是涉及到的知识面蛮多的，我记录一下制作的步骤与心得，仅供参考。如有哪里不足，希望大家指出，有更好的方法，也可以提出来，大家一起学习。
2015-09-09
浅谈Asp.Net母版页的相关知识
母版页的使用与普通页面类似，可以在其中放置文件或者图形、任何的HTML控件和Web控件，后置代码等，这篇文章主要介绍了浅谈Asp.Net母版页的相关知识，感兴趣的小伙伴们可以参考一下
2018-11-11
ASP.NET控件10个最有用的属性详解
ASP.NET控件10个最有用的属性详解,学习.net的朋友可以参考下。
2011-09-09
Repeater与ListView功能概述及使用介绍
Repeater(foreach)用于对绑定数据源中的数据进行遍历并按格式显示,Repeater一般只用来展示数据ListView会自动生成很多模板，免去手写模板代码的麻烦,感兴趣的你可以了解下本文
2013-02-02
12小时制和24小时制获取当天零点的问题探讨
这篇文章介绍了12小时制和24小时制获取当天零点的问题探讨，有需要的朋友可以参考一下
2013-09-09
asp.net 关于字符串内范围截取的一点方法总结
前两天有一位网友提出了一个字符串内截取字符串的问题，除了用普通的字符串截取的方式外，我推荐的是用LINQ方式来截取。两者实际上差别不是很大，都是采用字符串截取方式，但后者从写法和观察效果会比前者简单实用得多。
2010-02-02