在一个组件中发送API POST请求的结果给另一个组件使用?

Question

我遵循了教程HERE用于向API发出POST请求，并且工作良好;我已成功请求->收到→并处理数据

我现在正试图扩展我所学到的知识，并将其应用到我的更大的应用程序中，但我不知道该怎么做。

我使用Index.razor页面作为我的"根"。页面。在这个根页面中，我有一些逻辑来决定在页面上显示什么。如果没有要处理的结果，则显示搜索输入表单(DefaultSearch.razor)。如果有需要处理的结果，我将显示这些结果(SearchResultsPage.razor)。

我的问题是我不知道如何(1)将DefaultSearch.razor组件输入的查询字符串返回根页面进行处理，(2)如何将这些返回的处理结果发送到SearchResultsPage.razor组件进行显示。

Index.razor:

@page "/"
<div class="text-center">
<HeaderLarge />
@if (fetchedResults == null)
{
<DefaultSearch />
} else {
<SearchResultsPage />
}
</div>
@code {
try
{
HttpClient client = new HttpClient();
client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
Search search = new Search(queryString);
string searchstr = JsonConvert.SerializeObject(search);
StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
httpResponse.EnsureSuccessStatusCode();
if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
{
string response = await httpResponse.Content.ReadAsStringAsync();
fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
}
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}

DefaultSearch.razor:

<div id="SearchContainer">
<div id="SearchFormContainer">
<input id="mainSearchInputField" name="queryString" type="text" /><button @onclick()>Search</button>
</div>
</div>
@code {
}

SearchResultsPage.razor:

@page "/search"
<h3>SearchResultsPage</h3>
<div>
@if (fetchedResults != null)
{
@foreach (var result in fetchedResults.documents)
{
<div>
<table class="message">
<tr>
<td>Subject</td>
<td>@(result.subject)</td>
</tr>
<tr>
<td>ID</td>
<td>@result.docId</td>
</tr>
<tr>
<td class="message_body" colspan="2">
<span>@(result.messageBody)</span>
</td>
</tr>
</table>
</div>
}
}
</div>
@code {
[Parameter]
public SearchResultSet fetchedResults { get; set; }
}

Answer 1

您可以使用EventCallbacks向上传递值给父组件，使用[Parameter]s向下传递值给子组件。下面是一个包含组件名称的通用解决方案:

DefaultSearch.razor(孩子)

<input @bind-value="SearchValue" />
<button @onclick="Handle">Search</button>
@code{
string SearchValue { get; set; }
// Allows parent to listen for the 'click' event on the search button
[Parameter]
public EventCallback<string> OnClick { get; set; }
async Task Handle()
{
if(OnClick.HasDelegate)
{
// Calls the EventCallback, passing the search term
await OnClick.InvokeAsync(SearchValue);
}
}
}

Index.razor(父):

<DefaultSearch OnClick="HandleSearch" />
<SearchResultsPage FetchedResults="Results" />
@code {
SearchResultSet Results { get; set; }
async Task HandleSearch(string searchTerm) {
// However you need to get your results here:
Results = await GetResultsForSearchTerm(searchTerm);
// Signal a re-render from an async opperation.
StateHasChanged();
}
}

SearchResultsPage.cs(孩子B):

<!-- markup here -->
@code {
// Receive the result set here:
[Parameter]
public SearchResultSet FetchedResults { get; set; }
}