如何从一个 Blazor(父)组件从另一个 Blazor ("child") 组件调用方法？

Question

我正在构建我的第一个"真实的"；Blazor应用程序。目前，我正在开发一个搜索功能，让用户查询API并得到答案。我觉得我真的很接近这一点，但我只需要一点方向。

在DefaultSearch.razor页上有一个绑定到String的文本输入；主"；Blazor组分(即Index.razor)。

我迷失的地方是如何从DefaultSearch.razor页面上的按钮触发流程。我有一个@onclick(doSomething)，但我不知道在doSomething方法中要做什么来启动这个过程。

指数。剃刀：

@page "/"
@inject IHttpClientFactory clientFactory
<div class="text-center">
@if (fetchedResults == null)
{
<HeaderLarge />
<DefaultSearch />
} else {
<HeaderSmall />
<SearchResultsPage FetchedResults="fetchedResults" />
}
</div>
@code {
[Parameter]
public String queryString { get; set; }
private async Task GetSearchResults()
{
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);
}
}
}

默认搜索。剃刀：

<div id="SearchContainer">
<div id="SearchFormContainer">
<input id="mainSearchInputField" name="queryString" type="text"  @bind="queryString" /><button @onclick()>Search</button>
</div>
</div>
@code {
public String queryString;
public void doSomething(){
// What do I do here?
}
}

搜索结果页面。剃刀：

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

大型标头。剃刀：

<h1> My Large Header </h1>

标题Smalal.razor:

<h5> My Small Header </h5>

Answer 1

在我看来，索引页面的整个代码体都在进行搜索，应该移到DefaultSearch.rarzor控件中。所以DoSomething()实际上应该是GetSearchResults()。请确保向DefaultSearch.rarzor添加一个变量以实际收集结果，并添加一个事件将结果传回父级：

[Parameter]
SearchResultSet fetchedResults {get; set;}
[Parameter]
public EventCallback<SearchResultSet> fetchedResultsChanged { get; set; }

在搜索功能结束时，您可以调用自定义事件：

. . .
fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
fetchedResultsChanged.InvokeAsync(fetchedResults);

关于指数。剃刀：

<DefaultSearch @bind-fetchedResults=FetchedResults />
@code {
SearchResultSet FetchedResults {get; set;} // not a Parameter
}

评论：

1. 要绑定变量，必须将事件命名为变量名+"；"已更改">
2. 我发现Visual Studio经常给我一个错误，说我无法将EventCallback<T>转换为EventCallback。我相信这是一个Intellisense错误。如果出现特定错误，请尝试运行

Answer 2

希望以下内容能有所帮助。注意添加到DefaultSearch参数的OnClick参数

Index.razor更改

<DefaultSearch OnClick="SubmitSearch" />

public void SubmitSearch(string action)
{
if (action == "PerformSearch")
{
//any required code
}
}

DefaultSearch.razor更改

[Parameter]
public EventCallback<string> OnClick { get; set; }
public void DoSomething()
{
OnClick.InvokeAsync("PerformSearch");
}