时间戳

首页 > 解决方案 > 如何让搜索功能在 asp.net blazor 中工作

c# - 如何让搜索功能在 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>
    }

}

标签： c#asp.net-coreblazor

解决方案

您不要为此使用 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 Server 应用程序，对吧？无论如何，注意命名对象......我猜IssuesController实际上是一个应该命名的服务，比如IssuesService......

推荐阅读