Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a main page AreaOfLaw Component with two nested components (AlphabeticSearch and ParameterSearch) I want a parameter property value from the nested components on the main page component using a button click on the two nested components. Below are codes from the main page, AreaOfLaw.razor, then the two nested components.

I want the values of the parameter properties declared in the nested components to use a search inputs on the main form. Currently, the static property from another class is working but I don't think it's the best.

Thank you in advance.

What I have tried:

AreaOfLaw.razor:
HTML
<MudGrid Justify="Justify.Center">
    <AlphabeticSearch AlphabetChanged="OnSearchAlphabet" />
    <ParameterSearch ParameterChanged="OnSearchParameter" />
</MudGrid>

@code {
private void OnSearchAlphabet()
{
    GetAreaOfLawByAlpahbet();
}

private void OnSearchParameter()
{
    GetAreaOfLawByParameter();
}

private void GetAreaOfLawByAlpahbet()
{
    if(AppProperties.AlphabeticSelection != null)
        AreaOfLaws = Services.AreasOfLaw.ReadByAlphabets.Read(AppProperties.AlphabeticSelection);
}

private void GetAreaOfLawByParameter()
{
    AreaOfLaws = Services.AreasOfLaw.ReadByAny.Read(AppProperties.SearchParameter);
}

}

Nested Component
AlphabeticSearch.razor

<MudItem xs="6">
    <MudCard>
        <MudCardContent>
            <MudText>Search by starting alphabet</MudText>
            <MudSelect @bind-Value="EnumValue" Label="Select an alphabet" AdornmentColor="Color.Secondary">
                @foreach (Alphabets item in Enum.GetValues(typeof(Alphabets)))
                {
                    <MudSelectItem Value="@item">@item</MudSelectItem>
                }
            </MudSelect>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="MudBlazor.Variant.Outlined" Color="Color.Secondary" OnClick="OnSearchAlphabet">Search Now</MudButton>
        </MudCardActions>
    </MudCard>

@code {
    public enum Alphabets { A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z };
    private Alphabets EnumValue { get; set; } = Alphabets.A;

    [Parameter]
    public EventCallback<string> AlphabetChanged { get; set; }

    [Parameter]
    public string? SelectedAlphabet { get; set; }

    private void OnSearchAlphabet()
    {
        AppProperties.AlphabeticSelection = EnumValue.ToString(); //--This is a static property. Not good. I want the value SelectedAlphabet on the main page.
        AlphabetChanged.InvokeAsync(SelectedAlphabet = EnumValue.ToString());
    }

}
Posted
Updated 26-Nov-22 0:38am

 
Share this answer
 
Thank you very much indeed.
Your response inspired me to the following which really was my case.: https://stackoverflow.com/questions/68175839/good-practice-to-pass-values-from-child-component-to-parent-page-in-blazor[^]

Passing Values from child to parent. Below was what was missing.:

public string? AlphabetFromAlphabeticSearch;
public string? ParameterFromParameterSearch;

private void OnSearchAlphabet(string alphabet)
{
    AlphabetFromAlphabeticSearch = alphabet;
    GetAreaOfLawByAlpahbet();
}

private void OnSearchParameter(string param)
{
    ParameterFromParameterSearch = param;
    GetAreaOfLawByParameter();
}

private void GetAreaOfLawByAlpahbet()
{
    if(AlphabetFromAlphabeticSearch != null)
        AreaOfLaws = Services.AreasOfLaw.ReadByAlphabets.Read(AlphabetFromAlphabeticSearch);
}

private void GetAreaOfLawByParameter()
{
    if(ParameterFromParameterSearch != null)
        AreaOfLaws = Services.AreasOfLaw.ReadByAny.Read(ParameterFromParameterSearch);
}


Thank you very much indeed. I appreciate it.
 
Share this answer
 
Comments
Graeme_Grant 26-Nov-22 7:14am    
No problem. This article of mine might interest to you then: Blazor Component Callback from a RenderFragment Template[^]. Also, check out the comments at the end of the article.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900