[英]How to get a search functionality work in asp.net blazor
我有一个将采用搜索字符串的文本输入。 当用户单击搜索按钮时,将搜索文本并将结果显示在搜索组件中。 我已经完成了我理解的控制器工作正常。 但我可以用BLAZOR完成它
我希望结果显示在列表中
控制器方法
[HttpGet
[Route("search")]
public async Task<List<Issue>> SearchIssuesAsync(string searchItem)
{
return await _context.Issues.Where(s => s.IssueName.ToLower().Contains(searchItem.ToLower())).ToListAsync();
}
这就是我在 blazor 中挣扎的东西
@page "/search"
@inject IssuesController issuesController
@code {
Issue issues = new Issue();
string Issues { get; set; } = "";
async Task SearchIssues()
{
Issues = await issuesController.SearchIssuesAsync(Issues);
}
}
<div class="row mt-5">
<div class="col-md-2">
</div>
<div class="col-md-8">
<EditForm Model="@Issues" OnValidSubmit="@SearchIssues">
<div class="form-group">
<label for="">Search</label>
<input type="text" class="form-control" @bind-value="@Issues" id="text" placeholder="Search Issue">
</div>
<button type="submit" class="btn btn-primary justify-content-center">Submit</button>
</EditForm>
</div>
<div class="col-md-2">
</div>
</div>
@{
@if (Issues == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Resolution</th>
</tr>
</thead>
<tbody>
@foreach (var client in Issues)
{
<tr>
<td>@client.Name</td>
<td>@client.Resolution</td>
</tr>
}
</tbody>
</table>
}
}
您不会为此使用 EditForm。 只需放置一个带有按钮的文本框,单击该按钮时会调用本地方法来检索数据,如下所示:
@if (issues == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Resolution</th>
</tr>
</thead>
<tbody>
@foreach (var client in issues)
{
<tr>
<td>@client.Name</td>
<td>@client.Resolution</td>
</tr>
}
</tbody>
</table>
}
<input type="text" @bind-value="@searchTerm" />
<input type="button" value="Search" @onclick="@SearchIssues"/>
@code {
private string searchTerm;
private List<Issue> issues;
async Task SearchIssues()
{
issues= await issuesController.SearchIssuesAsync(searchTerm);
}
}
我猜您正在使用 Blazor 服务器应用程序,对吗? 无论如何,注意命名对象......我猜IssuesController实际上是一个应该命名的服务,比如IssuesService......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.