时间戳

首页 > 解决方案 > 如何从另一个 Blazor（“子”）组件调用一个 Blazor（父）组件中的方法？

c# - 如何从另一个 Blazor（“子”）组件调用一个 Blazor（父）组件中的方法？

问题描述

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

在DefaultSearch.razor页面上，有一个文本输入绑定到 aString作为参数传递给“主”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);
        }
    }
}

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

SearchResultsPage.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>

HeaderSmalal.razor：

<h5> My Small Header </h5>

标签： c#blazor-server-side.net-5

解决方案

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

[Parameter]
SearchResultSet fetchedResults {get; set;}

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

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

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

在Index.razor 上：

<DefaultSearch @bind-fetchedResults=FetchedResults />

@code {
     SearchResultSet FetchedResults {get; set;} // not a Parameter
}

注释：

  1. 要绑定变量，事件必须完全命名为变量名称+“已更改”
  2. 我发现 Visual Studio 经常给我一个关于无法转换EventCallback<T>为EventCallback. 我相信这是一个智能感知错误。如果您遇到该特定错误，请尝试运行。

推荐阅读