在 ASP.NET Core Razor 页面中加载带有数据的选项卡（没有实体框架）答案

【问题标题】：Loading tabs with data in ASP.NET Core Razor pages (without Entity Framework)在 ASP.NET Core Razor 页面中加载带有数据的选项卡（没有实体框架）
【发布时间】：2021-04-08 15:45:23
【问题描述】：

我正在使用 ASP.NET Core Razor 页面和 Oracle 数据库。团队决定不使用实体框架，现在我正准备使用 ODP.net（Oracle 的 ADO.NET 版本）从数据库加载数据。

我知道使用 Entity Framework，我可以利用异步编程，但因为我不是，所以加载页面很慢（因为我一次查询所有选项卡）。我正在使用 Bootstraps 导航选项卡。

一切正常，但现在数据集越来越大，因为页面加载时加载了十多个选项卡。有没有办法只在点击时加载每个标签？还有其他方法可以解决这个问题吗？

【问题讨论】：

标签： c# asp.net asp.net-core razor-pages

【解决方案1】：

不确定我是否完全理解您的问题。但是，我如何阅读这个问题是，只要制表符更改，就必须加载页面，并且不想在开始时一次加载整个页面。正如我所见，这与您在后端使用的 ORM 无关。当用户单击选项卡并在该选项卡下加载部分页面时，需要对服务器进行异步 javascript 调用。

https://getbootstrap.com/docs/4.0/components/navs/

show.bs.tab（在要显示的选项卡上）
shown.bs.tab（在新激活的刚刚显示的选项卡上，与 show.bs.tab 事件相同）

我建议您使用第一个事件并在该事件中对部分页面进行 ajax 调用。

https://www.learnrazorpages.com/razor-pages/ajax/partial-update

@page
@model RazorPagesTests.Pages.AjaxPartialModel
<h2>Ajax</h2>
<p><button class="btn btn-primary" id="load">Load</button></p>
<div id="grid"></div>
@section scripts{
    <script>
        document.getElementById('load').addEventListener('click', () => {
            fetch('/ajaxpartial?handler=CarPartial')
                .then((response) => {
                    return response.text();
                })
                .then((result) => {
                    document.getElementById('grid').innerHTML = result;
                });
        });
    </script>
}

希望对您有所帮助。如果没有，那么我在这里为您提供帮助。请给我更多信息你想做什么。

【讨论】：