How to pass and bind a selected value from Blazor component to parent

Question

I want to build some reusable input components using Blazor.

Here is my code in the child component:


    
        @ChildLabel      
        
        
    


@code {

    [Parameter] public string ChildLabel { get; set; }
    [Parameter] public string ChildValue { get; set; }
    [Parameter] public string selectedSearchValue { get; set; }
    [Parameter] public EventCallback ChildLabelChanged { get; set; }
    [Parameter] public EventCallback ChildValueChanged { get; set; }
    [Parameter] public EventCallback selectedSearchValueChanged { get; set; }

    [Inject] public IGraphService GraphService { get; set; }
    public IEnumerable users = new List();
    protected override async Task OnInitializedAsync()
    {
        users = await GraphService.GetUsers();
        await base.OnInitializedAsync();
    }

    private Task OnChildValueChanged(ChangeEventArgs e)
    {
        return ChildValueChanged.InvokeAsync(selectedAutoCompleteText);
    }

    string selectedAutoCompleteText { get; set; }   
}

And here is my parent component:

@page "/Test"
@using WireDesk.Web.SubComponents;
@using Blazored.FluentValidation;
@using WireDesk.Models




@ChildLabel;
@ChildValue;

@code 
{
    private string ChildLabel { get; set; }
    private string ChildValue { get; set; }
    public ApprovalFlowForm approvalFlowForm = new ApprovalFlowForm();
}

The child will display the label and create a single select autocomplete text box. The parent will contain a form with a variety of fields, many of which will be a single select autocomplete text box.

I don't want to have to duplicate the code in the child over and over in the parent, but I cannot determine how to pass the string that the user has selected in the child component.

========================================================= This is almost working but not completely, I think I didn't explain two things clearly. The component will be used for input on a create/update page, and I need to use it more than once. The parent component should call the child just to do the work of displaying/updating the value and returning that to the parent, and then the parent will bind that to the Form.Field. Seems to me that the power of components would be that they could be reused, not just in different parents, but multiple times in the same parent (I am sure this is possible, but sure I don't know how to do it).

My code for the child is as so:


    
        @ChildLabel
        
        
    


@code {

    [Parameter] public string ChildLabel { get; set; }
    [Parameter] public string ChildValue { get; set; }
    [Parameter] public string FieldValue { get; set; }
    [Parameter] public EventCallback ChildValueChanged { get; set; }

    [Inject] public IGraphService GraphService { get; set; }
    public IEnumerable users = new List();

    protected override async Task OnInitializedAsync()
    {
        users = await GraphService.GetUsers();
        await base.OnInitializedAsync();
    }

    private async Task OnChildValueChanged(string selectedValue)
    {
        ChildValue = selectedValue;
        await ChildValueChanged.InvokeAsync(ChildValue);
    }
}

And the parent is

@page "/Test"
@using WireDesk.Web.SubComponents;
@using Blazored.FluentValidation;
@using WireDesk.Models


    @*@bind-SelectedValue="@ApprovalFlowForm.FirstManager"*@



    @*bind-SelectedValue="@ApprovalFlowForm.SecondManager"*@


@code {
    private string childValue;
}

The commented out line...

@bind-SelectedValue="@ApprovalFlowForm.SecondManager"@

..I know will probably not work, but indicates the general idea I think of what I want to accomplish.

Thank you both Joe and Dimitris very very much. I have been working on this for the last 8 hours, and I feel I am pretty close now. I appreciate your assistance.

Bryan

Still struggling with this.

My parent component is below. The "old" way of displaying an input select field is listed, as is my call to the "new" way, which is a child component.

@using Microsoft.IdentityModel.Tokens
@using System.Collections.Immutable
@using System.Linq


    //Old  

    
         Controller 
            
    
    
    //New

The child component below works perfectly except for one thing: when the parent edits a form with a value already in the data, it fails to display! So if "Ben Kew" is stored as the Controller in the Approval Form, opening the form in edit mode will not show that. Just a blank field. The user can pick from the list and changes will be saved, but the next time they open up the form they will see blank again.

If you can help me solve this, I would be so very happy and would be a big step in my project.

Thank you in advance for assistance!

Bryan

@using Blazorise.Components
@using System.Linq


    
        @ChildLabel
        
            Placeholder="Search...">
        
    


@code {
    [Parameter] public string ChildLabel { get; set; }
    [Parameter] public IEnumerable DataToSearch { get; set; }
    [Parameter] public string SelectedValue { get; set; }
    [Parameter] public EventCallback SelectedValueChanged { get; set; }
    [Parameter] public string? Param { get; set; }

    public string selectedValue { get; set; }
    public string selectedAutoCompleteText { get; set; }

    public override async Task SetParametersAsync(ParameterView parameters)
    {      
    }
   
    private async Task OnSelectedValueChanged(string selectedValue)
    {
        //SelectedValue = selectedValue;
        //await SelectedValueChanged.InvokeAsync(SelectedValue);
    }
}

Dimitris Maragkos · Accepted Answer

You can do it using EventCallback (like @Joe suggested).


    
        @ChildLabel
        
        
    


@code {
    [Parameter] public string ChildLabel { get; set; }
    [Parameter] public IEnumerable DataToSearch { get; set; }
    [Parameter] public string SelectedValue { get; set; }    
    [Parameter] public EventCallback SelectedValueChanged { get; set; }

    private async Task OnSelectedValueChanged(string selectedValue)
    {
        SelectedValue = selectedValue;
        await SelectedValueChanged.InvokeAsync(SelectedValue);
    }
}

Usage:

How to pass and bind a selected value from Blazor component to parent

Bryan

Answers (2)

Related Questions