Loading tabs with data in ASP.NET Core Razor pages (without Entity Framework)

Question

I'm working with ASP.NET Core Razor pages and an Oracle database. The team has decided to go without Entity Framework and now I am at the point of loading data from the database using ODP.net (Oracle's version of ADO.NET).

I know with Entity Framework, I could take advantage of asynchronous programming but since I am not, loading the page is slow (since I query all the tabs at once). I am using Bootstraps nav tabs.

Everything works fine but now the data set is getting bigger because there are over ten tabs that load on page load. Is there a way to only load each tab on click? Are there other ways to go about this?

Ingale88s Ingale88s · Accepted Answer · 2021-01-02T04:19:10

Not sure if I understand your question entirely. But how I read this question is you have to load your page whenever a tab changes and don't want to load the entire page at once at the beginning. This has nothing to do with which ORM you use at the backend as I see it. What need to make a asynchronous javascript call to the server when user clicks on the tab and load a partial page under that tab.

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

show.bs.tab (on the to-be-shown tab)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

I suggest you use the first event and in that event make an ajax call to a partial page.

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>
}

Hope it helps. If not then I'm here to help you. Please give me more information what you want to do.

Loading tabs with data in ASP.NET Core Razor pages (without Entity Framework)

1 Answers