Viewmodel Property update with Parent and Child Components

Radzen.Blazor Components
1

Hi. I am employing a MVVM pattern with a parent component (containing RadzenSteps) and child component (Containing RadzenAutoComplete). I am binding the parent component to the viewmodel but I need changes in the child component to refresh the parent and update the Property in the viewmodel.

ViewModel.cs

    public class ViewModel
    {
        public List<string> AvailableStrings { get; set; }
     
        private string selectedString;
        public string SelectedString
        { 
            get => selectedString;
            set
            {
                selectedString = value;
                Console.WriteLine("selectedString " + selectedString);
            }
        }

        public ViewModel()
        {
            AvailableStrings = new List<string>() {"12345", "765756"};
        }
    }

ParentComponent.razor

@inject ViewModel viewModel;

<RadzenSteps ShowStepsButtons="true" Visible="true">
    <Steps>
        <RadzenStepsItem Text="First step item">
            <BlazorAppRazden.Components.ChildComponent @bind-SelectedString="viewModel.SelectedString" @bind-AvailableStrings="viewModel.AvailableStrings" />
        </RadzenStepsItem>
    </Steps>
</RadzenSteps>

ChildComponent.razor

<RadzenAutoComplete TValue="string" Value=@SelectedString Data="@AvailableStrings" Change="@(args => SelectedString = $"{args}")" Style="width: 100%; max-width: 400px;" />

@code {
    [Parameter]
    public string SelectedString { get; set; }

    [Parameter]
    public List<string> AvailableStrings { get; set; }

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

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

}

I know I need an event callback to get the ParentComponent to redraw (to update the Disable condition in the RadzenSteps) and to update the SelectedString property in my ViewModel but I am not sure what I need to do to achieve this. I have looked through the Change event but not sure if this is the correct method or how to use it with nested components. Any examples or suggestions would be greatly appreciated.

2

Hi @Phantom,

You can use a cascading property which will provide some means to update the parent - for example a method which calls StateHasChanged(). We are using a similar approach in RadzenFormField.