How to use the value of textbox in mvvm commands

Question

I'm still figuring out mvvm and I want to make my app the right way by splitting up model viewmodel and view. In the past I always took the value of the textbox in the view directly by using mytextbox.Text.

I created a command in the viewmodel to add a new person to the network. but I can't get the values of the textboxes into the command in the viewmodel.

This is the code I have so far in model

public class Person : INotifyPropertyChanged
{
    public Person()
    { }

    public Person(String FirstName)
    {
        this._firstName = FirstName;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private string _firstName;

    public string FirstName    // the Name property
    {
        get { return this._firstName; }
        set { this._firstName = value; NotifyPropertyChanged("FirstName"); }
    }
}

in the viewmodel I have

public class NetworkViewModel: INotifyPropertyChanged
{

    private ObservableCollection<Person> _networkList1 = new ObservableCollection<Person>();
    public ObservableCollection<Person> NetworkList1 //Binds with the listbox
    {
        get { return _networkList1; }
        set { _networkList1 = value; RaisePropertyChanged("NetworkList1"); }
    }

     public NetworkViewModel() 
    {
        AddPersonCommand = new RelayCommand(AddPerson);
    }

    private ICommand _addPersonCommand;
    public ICommand AddPersonCommand // Binding with view
    {
        get { return _addPersonCommand; }
        set { _addPersonCommand = value; }
    }

   public void AddPerson(object obj)
    {

    if(cb_group.Text.ToUpper() == "PRIMARY")
    {
        _networkList1.Add(new Person(){ FirstName = tb_firstName.Text,});
    }
}

in XAML

 <TextBox x:Name="tb_firstName"  Text="{Binding Path=FirstName}"/>

<Button x:Name="btn_add" Command="{Binding AddPersonCommand }"/>

What I would like is to make the value of tb_firstname and cb_group to be used in the viewmodel so I can make the command work. Thanks for all your help. I'm just learning as I go.

Add some more context. Where is the object (`Person`?) that `tb_firstName` is bound to? What and where is `cb_group`? The answer is likely to bind the values you require from the controls to properties in this ViewModel and then you have these in scope when you execute `AddPerson`. — Charles Mager, May 19 '15 at 09:34

score 1 · Accepted Answer · answered May 19 '15 at 09:46

ok so in your textbox you currently have:

<TextBox x:Name="tb_firstName"  Text="{Binding Path=FirstName}"/>

What this means is that it is looking for a property on your viewmodel called FirstName, so you will need a add a string property to your viewmodel for it. Then when you set the FirstName on the new Person, you simply set it to the property.

new Person() { FirstName = this.FirstName };

For binding a combobox, it will need an itemsSource - this is the collection of items, in your case the NetworkList1 to be shown. As its binding to a list of objects you will also need to set the DisplayMemberPath - this is the name of the property you want to be shown in the combo. You will also need to bind the SelectedItem property and create a property in your viewmodel to store it. This is how you know which item in your list is currently selected.

<Combobox ItemsSource={Binding Path=NetworkList1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}
SelectedItem = {Binding Path= SelectedPerson, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}
DisplayMemberPath=FirstName/>

viewModel:

public Person SelectedPerson
{
  //put in get/set/propertychanged 
}

public string FirstName
{
   //put in get/set/propertychanged
}

Yep, I guess that's, better solution than mine :) – MajkeloDev May 19 '15 at 10:27 — MajkeloDev, May 19 '15 at 10:27

score 0 · Answer 2 · edited May 23 '17 at 12:14

You need to add a CommandParameter and bind it to particualr Element.(in Your case tb_firstname.

Version for TextBox:

<Button Command="{Binding AddPersonCommand } CommandParameter="{Binding ElementName=tb_firstname, Path=Text"/>

EDIT. Version for ComboBox:

<Button Command="{Binding AddPersonCommand } CommandParameter="{Binding ElementName=yourComboBox, Path=SelectedItem.Value"/> // or just SelectedItem

EDIT2 from (Multiple command parameters wpf button object)

<Button Content="MultiBindingExample" Command="{Binding MyCommand}">
 <Button.CommandParameter>
     <MultiBinding Converter="{StaticResource MyMultiConverter}">
         <Binding Path="..." ElementName="MyTextBox"/>
         <Binding Path="..." ElementName="MySomethingElse"/>
     </MultiBinding>
 </Button.CommandParameter>

That won't help with the need to get whatever `cb_group.Text` is, though. — Charles Mager, May 19 '15 at 09:32
Oh sorry then i didn't see that he want to pass both parameters — MajkeloDev, May 19 '15 at 09:36

score 0 · Answer 3 · answered May 19 '15 at 09:33

What you should be doing is in the AddPerson method rather than looking to value in the controls(cb_group.Text) use the values those controls are bound to. The binding should by default here be 2 way. So when the user changes the value it will automatically be updated in your model/viewmodel. If this isn't happening then the problem is with your databindings and you should look to see if you have any databinding errors in your console output.

How to use the value of textbox in mvvm commands

3 Answers3