快捷導(dǎo)航

ASP.NET MVC懶加載如何逐步加載數(shù)據(jù)庫信息

更新時間：2024年10月10日 10:24:17 作者：陸沙

在ASP.NET MVC中實現(xiàn)數(shù)據(jù)庫的逐步加載可通過懶加載技術(shù)完成,首先,在EntityFramework中配置數(shù)據(jù)庫上下文,使用對應(yīng)的實體類映射數(shù)據(jù)庫表,本文給大家介紹ASP.NET MVC懶加載如何逐步加載數(shù)據(jù)庫信息,感興趣的朋友跟隨小編一起看看吧

問題描述

假設(shè)我數(shù)據(jù)庫中有N個表，當(dāng)我打開某頁面時，每個表都先加載一部分（比如20條），點擊表下某個按鈕，再加載下一部分，如此循環(huán)直至加載完畢。

解決方案

基礎(chǔ)版

數(shù)據(jù)庫查詢部分（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是我的實體/模型類，數(shù)據(jù)類型與數(shù)據(jù)庫中某個表一一對應(yīng)，內(nèi)容大概如下：

using System.ComponentModel.DataAnnotations.Schema;
namespace WebApplication1.Models
{
    [Table("dbo.表名")]
    public class BasicParts
    {
        // 對應(yīng)列
    }
}

而"name=conn1"是指使用此數(shù)據(jù)庫配置。該配置在項目根目錄下的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">
        <!-- 這里將顯示從服務(wù)器加載的數(shù)據(jù) -->
    </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++;
                    // 將新加載的數(shù)據(jù)追加到頁面上
                    data.forEach(function (item) {
                        $('#data-container').append('<p>' + item.name + '</p>');
                    });
                }
            });
        }
        $(document).ready(function () {
            $('#load-more').on('click', function () {
                loadMoreData();
            });
            // 頁面加載完成時，加載初始數(shù)據(jù)
            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>
            <!-- 這里是數(shù)據(jù)行 -->
        </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++;
                    // 將新加載的數(shù)據(jù)追加到表格中
                    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();
            });
            // 頁面加載完成時，加載初始數(shù)據(jù)
            loadMoreData();
        });
    </script>
</body>
</html>

到此這篇關(guān)于ASP.NET MVC-懶加載-逐步加載數(shù)據(jù)庫信息的文章就介紹到這了,更多相關(guān)ASP.NET MVC逐步加載數(shù)據(jù)庫信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: