如何在 asp.net blazor 中获得搜索功能

Question

I have a text input that will take the search string. when the user clicks on the search button the text is searched and displays the result in the search component. I have done the controller which I understand works fine. But I can get it done with BLAZOR

I want the result to display in list

Controller method

 [HttpGet
        [Route("search")]
        public async Task<List<Issue>> SearchIssuesAsync(string searchItem) 
        {
            return await _context.Issues.Where(s => s.IssueName.ToLower().Contains(searchItem.ToLower())).ToListAsync();
        }

This is what I am struggling within the 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>
    }

}

Answer 1

You don't use the EditForm for this. Just place a text box with a button, that when clicked calls a local method to retrieve the data, something like this:

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

I guess you're using Blazor Server App, right ? Anyhow, pay attention to naming objects... I guess IssuesController is actually a service which should ne named, say IssuesService...