时间戳

首页 > 解决方案 > 初始化 Blazor 组件时初始加载数据；页面更新时不要再次触发该查询

c# - 初始化 Blazor 组件时初始加载数据；页面更新时不要再次触发该查询

问题描述

我有一个 Blazor 组件，它在无序列表中显示来自 SQL 的数据。LoadData 方法由 OnInitialized() 事件调用并填充一个List<T>（在本例中为 ProjectModel 列表）。数据量很大，所以我只从 SQL 中获取前 100 行（作为预览）。

我使用 foreach 遍历该列表并<li>为每个元素创建一个。这工作正常。

但是，该页面还包含一个搜索框。一旦用户输入搜索字符串并单击搜索按钮，就会调用另一种方法再次从 SQL 获取数据，这次是根据用户提供的搜索词进行过滤。过滤是在 SQL 查询中完成的。查询结果再次用于填充 ProjectModels 列表（它会覆盖列表的第一个实例）。

我可以在一毫秒内看到新的过滤列表，然后会弹出初始数据。我猜这是因为 OnInitialized 再次被触发，其中包含使用初始数据填充列表的查询。

这是我的组件的样子：

@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);
    }

}

我怎样才能正确地做到这一点？IE

  1. 获取页面加载时的初始预览数据并将其放入<ul>
  2. 将 中的数据替换为<ul>根据提供的搜索词查询到的数据，同时避免一旦数据发生变化就触发初始加载。

C# 和 Blazor 新手在这里，所以请放轻松，如果我需要提供更多详细信息，请告诉我。感谢大家。

标签： c#serverblazor

解决方案

这是因为form- 您button正在提交表单，这会导致浏览器重新加载页面。

最简单的解决方法 - 不要在 SPA 应用程序上使用表单，除非您真的想重新加载页面。

推荐阅读