Load data initially when Blazor component is initialized; don't fire that query again when page is updated

Question

I have a Blazor component that displays data from SQL in an unordered list. The LoadData method is called by the OnInitialized() event and populates a List<T> (in this case, a list of ProjectModels). The data volume is large, therefore I only fetch the top 100 rows from SQL (meant as a preview).

I iterate over that list with a foreach and create a <li> for each element. This works fine.

However, the page also contains a search box. Once the user enters a search string and clicks the search button, a different method is called that gets data from SQL again, this time filtering by the user-provided search term. The filtering is done in the SQL query. The query result is again used to populate the list of ProjectModels (it overwrites the first instance of the list).

I can see the new, filtered list for a millisecond, then the initial data pops back up. I guess this is because OnInitialized is triggered again, which contains the query that populates the list with the initial data.

This is what my component looks like:

@page "/projects"


<form>
    <input type="search" placeholder="enter search term..." @bind-value="searchTerm">
    <button type="submit" @onclick="GetSearchResults">Search</button>
</form>

<ul>
    @foreach (var project in projects)
    {
        <li>@project.ProjectId</li>
        <li>@project.ProjectTitle</li>
    }    
</ul>

@code {

    private string searchTerm;
    private List<ProjectModel> projects = new List<ProjectModel>();

    protected override void OnInitialized()
    {
        projects = GetProjects(); //the method that loads the inital data
    }

    private void GetSearchResults()
    {
        projects = GetProjectsBySearchTerm(searchTerm);
    }

}

How can I do this correctly? i.e.

Get the initial preview data on page load and put it in a <ul>
replace the data in the <ul> with the data that was queried based on the provided search term while avoiding that the initial load is triggered once the data changes.

C# and Blazor noob here, so please go easy and let me know if I need to provide more details. thanks to all of you.

All the answers point you in the right direction. However: 1. Why don't you "page" your data so you only display say x records at a time. 2. Use a scoped service to get and hold your data so you only refresh the dataset when you need to rather that every time you do a view (page) reload. The service holding the data is not linked to your pages/views. I'll point you at some resources if you're interested. — MrC aka Shaun Curtis
– MrC aka Shaun Curtis, Commented Jun 21, 2021 at 22:04
@MrCakaShaunCurtis yes, some info regarding scoped services would be of great help. Thank you. — axel g
– axel g, Commented Jun 22, 2021 at 8:42

Mister Magoo · Accepted Answer · 2021-06-21 16:16:36Z

2

This is happening because of the form - your button is submitting the form, which causes the browser to reload the page.

Easiest fix - don't use a form on a SPA app, unless you really want to reload the page.

answered Jun 21, 2021 at 16:16

Mister Magoo

9,4051 gold badge27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CorrieJanse · Accepted Answer · 2021-06-21 21:56:04Z

2

Both and Blazor and normal HTML. A submit button reloads the page. When the page is reloaded it launches the OnInitialize function. In blazor is better to use a normal button for it. In your code simply remove the type="submit" from your button. That will make it work. Additionally, you don't need to put it into a form since you won't be sending the form as a whole to the backend.

Change your code to this:

<div>
    <input type="search" placeholder="enter search term..." @bind-value="searchTerm">
    <button  @onclick="GetSearchResults">Search</button>
</div>

answered Jun 21, 2021 at 21:56

CorrieJanse

2,5981 gold badge10 silver badges31 bronze badges

Comments

Bennyboy1973 · Accepted Answer · 2021-06-21 21:36:52Z

-1

I'm pretty sure you can just @bind instead of @bind-value. However, the problem is having form/submit. There's no reason to submit anything, as you're not sending data out of this page. Also, OnInitialized fires 2x if PreRender is on (which it is by default). If that really bothers you, then load your data in OnAfterRender and check for firstRender.

answered Jun 21, 2021 at 21:36

Bennyboy1973

4,3372 gold badges16 silver badges20 bronze badges

Collectives™ on Stack Overflow

Load data initially when Blazor component is initialized; don't fire that query again when page is updated

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related