通过json搜索并返回匹配的记录-Brazor

Question

我的剃刀页面：从json中获取数据并按预期显示结果

@if (todos != null)
{
<table>
<thead>
<tr>
<th>User</th>
<th>ID</th>
<th>Title</th>
<th>Completed</th>          
</tr>
</thead>
<tbody>
@foreach (var todo in todos)
{
<tr>
<td>@todo.userId</td>
<td>@todo.id</td>
<td>@todo.title</td>
<td>@todo.completed</td>
</tr>
}
</tbody>
</table>
}
@code {
private Todo[] todos;
string baseUrl = "https://jsonplaceholder.typicode.com/todos";
protected override async Task OnInitializedAsync()
{
todos = await httpClient.GetFromJsonAsync<Todo[]>($"{baseUrl}");
}
public class Todo
{
public int userId { get; set; }
public int id { get; set; }
public string title { get; set; }
public bool completed { get; set; }
}
}

现在，我没有访问后端的权限。不能有单独的搜索API。我需要遍历从json得到的todos数组，并在搜索时找到匹配项。

假设"todos"保存来自api的数据。以下是我在JavaScript中的操作方法。

var results = [];
var len = todos.length
var searchField = "title";
var searchVal = "delectus aut autem";
for (var i = 0; i < len; i++) {
if (todos[i][searchField] == searchVal) {
results.push(todos[i]);
}
}

上面返回与标题"匹配的所有记录；delectus aut autem"；。我如何将相同的搜索功能整合到剃须刀页面中。

编辑代码：

我添加了输入文本框和搜索按钮。无法成功地将类型化的"searchVal"传递给SearchClicked方法。我可以知道我哪里错了吗。

<input type="text" @bind="searchVal" @bind:event="oninput" placeholder="Enter Search Value" />
<button @OnClick="SearchClicked">Search</button>
<p>Typed Value: @searchVal</p> // works here, but not getting passed to the query
@code {
private Todo[] result;
string searchVal;
private async Task SearchClicked()
{
todos = await httpClient.GetFromJsonAsync<Todo[]>($"{baseUrl}");
result = todos.Where(todo => todo.title == @searchVal).ToArray();
}
}

谢谢。

Answer 1

在新代码中，您的主要问题是

<button @OnClick="SearchClicked">Search</button>

应该是

<button @onclick="SearchClicked">Search</button>

Answer 2

在剃刀页面顶部添加System.Linq命名空间。

@using System.Linq;

在你的@code区块中，你可以这样使用它：

var result = todos.Where(todo => todo.title == searchVal).ToArray();

为了能够在剃刀页面上显示它，您需要在搜索方法之外声明一个结果数组。类似于todos变量。然后在创建表的显示循环中使用结果数组。