Two-way binding Radzen Button

Question

I have a component view (lets call it AddName.razor) that has an Add button and a textfield. The text field allows user to type in a name. The Add button when clicked should display another textfield so that user can type in another name and this should happen every time the Add button is clicked.

The thing is, for the button, I am using a separate component (called Button.razor) and this componet uses Radzen Buttons. I am very new to C# and .NET and I have been stuck on implementing this for the past two days. Please help. I have tried multiple things but I think I haven't fully grasped the concept of two-way binding in Blazor. The tutorials I have seen on two-way binding don't involve multiple components and secondly, they are not using an external library like Radzen Blazor. I hope my question makes sense. Thanks!

Answer 1

Hi

Go through the below REPL snippet i created based on your requirement:

https://blazorrepl.telerik.com/QwOFFRPx41rSwT7B43

When the snippet loads - click Run button on top right.

Hope this helps.

Answer 2

Bings you are using a third party library which has support best recommendation is to use their forum to ask your question.

Addressing the logic for the current task, why not have one button, one input control, when they hit the button add the text into a ListBox or even better a ListBox setup with check boxes which provides the option to remove a name.

XMAL for a conventional ListBox rigged up with check boxes

<ListBox
    Name="list"
    Margin="4,4,4,4"
    ItemsSource="{Binding Items}"
    SelectionMode="Extended">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <CheckBox
                    Name="check"
                    Margin="3"
                    VerticalAlignment="Center"
                    IsChecked="{Binding IsChecked, Mode=TwoWay}" />
                <ContentPresenter Margin="1" Content="{Binding Value.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Then if I wanted to add a new item

((ViewModel)DataContext).Items.Add(new Country()
{
    Id = -1, 
    Name = countryTextBox.Text
});