![](/img/trans.png)
[英]How to call a function in a parent razor component from a child item in blazor?
[英]How do I call a method in one Blazor (parent) component from another Blazor (“child”) component?
我正在構建我的第一個“真正的”Blazor 應用程序。 目前,我正在搜索 function,讓用戶查詢 API 並獲得答案。 我覺得我真的很接近這一點,但我只需要一點方向。
在DefaultSearch.razor
頁面上,有一個文本輸入綁定到一個String
,該字符串作為參數傳遞給“主”Blazor 組件(即Index.razor
)。
我迷路的地方是如何從DefaultSearch.razor
頁面上的按鈕觸發該過程。 我有一個@onclick(doSomething)
,但我不知道在doSomething
方法中要做什么來啟動該過程。
索引.razor:
@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);
}
}
}
DefaultSearch.razor:
<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?
}
}
搜索結果頁面.razor:
<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; }
}
HeaderLarge.razor:
<h1> My Large Header </h1>
標頭Smalal.razor:
<h5> My Small Header </h5>
在我看來,您的索引頁面的整個代碼主體都在進行搜索,並且應該移動到DefaultSearch.razor控件。 所以DoSomething()
實際上應該是GetSearchResults()
。 確保將變量添加到DefaultSearch.razor以實際收集您的結果,以及將它們傳遞回父級的事件:
[Parameter]
SearchResultSet fetchedResults {get; set;}
[Parameter]
public EventCallback<SearchResultSet> fetchedResultsChanged { get; set; }
在搜索 function 結束時,您調用自定義事件:
. . .
fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
fetchedResultsChanged.InvokeAsync(fetchedResults);
在索引.razor 上:
<DefaultSearch @bind-fetchedResults=FetchedResults />
@code {
SearchResultSet FetchedResults {get; set;} // not a Parameter
}
注釋:
EventCallback<T>
轉換為EventCallback
的錯誤。 我相信這是一個智能感知錯誤。 如果您遇到該特定錯誤,請嘗試運行。希望以下內容有所幫助。 注意添加到 DefaultSearch 參數的 OnClick 參數
索引.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");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.