CODEWITHSUNDEEP
c#serverblazor
axel g
axel g

Reputation: 81

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

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.

  1. Get the initial preview data on page load and put it in a <ul>
  2. 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.

Upvotes: 2

Views: 2716

Answers (3)

CorrieJanse
CorrieJanse

Reputation: 2598

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>

Upvotes: 2

Bennyboy1973
Bennyboy1973

Reputation: 4208

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.

Upvotes: -1

Mister Magoo
Mister Magoo

Reputation: 8964

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.

Upvotes: 2

Related Questions