当TextBox值更改时更新ComboBox项目

Question

Hi I am beginner using C# trying to produce a WPF(MVVM).

I have currently a TextBox & a ComboBox on a Window Form.

At the moment, I would like to arrange such that when user input an Access DB file path into the TextBox, the ComboBox will be automatically updated such that its available Items is the Tables Name in the MDB file. When user changed the MDB file path to another, ComboBox Items will be refreshed as well.

I have already prepared below Properties in the GUI's ViewModel.

...
public string MdbDir { get{;} set {; RaisePropertyChanged("MdbDir");} }
public List<string> MdbTblList { get{;} set{...; RaisePropertyChanged("MdbTblList");}} 
...

I have already prepared below method in the Model.

...
public List<string> ReturnMdbTblList(string mdbDir)
{
    List<string> mdbTblList = new List<string>();
    oCat = new ADOX.Catalog();
    oCat.ActiveConnection = oConn;
    foreach (ADOX.Table oTable in oCat.Tables)
    {
        mdbTblList.Add(oTable.Name);
    }
    return mdbTblList;
}
...

I have already prepared below in View.xaml

...
<TextBox Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding MdbDir}" />
<ComboBox Grid.Column="1" Grid.Row="3" SelectedItem="{Binding Path=SelectedMdbTbl,Mode=TwoWay}" ItemsSource="{Binding MdbTblList}"/>
...

All I don't know is how to link the Model Method to ViewModel, and to make the ComboBox aware of MdbDir changed.

Any idea on what else to add the coding and at the same time minimize the amendment on the current piece of coding?

Thanks very much in advance :)

Answer 1

You can do that in two ways.

When ever you type the path in textBox and press tab, the Set part of the property MdbDir will be called. So you can call method like below. And in that method method you can fetch the details from the Model and update it to the UI.

 public string MdbDir 
 { 
     get
     {
        ;
     } set 
     {
          ; 
          RaisePropertyChanged("MdbDir");
          UpDateTheList()
     } 
  }

Or you can have button on the UI and click of that can do the same thing. to Bind commands to buttons you can refer the below links

http://theprofessionalspoint.blogspot.in/2013/04/icommand-interface-and-relaycommand.html

http://www.codeproject.com/Articles/126249/MVVM-Pattern-in-WPF-A-Simple-Tutorial-for-Absolute

One more observation, if your new creating list every time then List is fine, but if your adding or removing something with already existing list then it'll not work for you, you have to use observablecollection instead of list

Answer 2

It is acceptable for your ViewModel to maintain a reference to your Model as the ViewModel can be thought of as a wrapper for your Model .

You could put a call to your Model method ReturnMdbTblList such as:

public string MdbDir
{
    get
    {
        return this.mdbDir;
    }
    set
    {
        this.mdbDir = value;
        RaisePropertyChanged("MdbDir");
        this.MdbTblList = this.model.ReturnMdbTblList(value);
    }
}

This is straight forward to implement and effective. My personal preference is not put anything inside the get and set methods of properties that do not directly affect the field it is accessing or notifying others it has changed. That is just my preference though, others may be happy to do so and I am not saying it is wrong.

I would use a DelegateCommand on the button to make the call to your ReturnMdbTdlList :

Model, ViewMode & DelegateCommand

public class MyViewModel : INotifyPropertyChanged
{
    private readonly MyModel model;

    private string mdbDir;
    public string MdbDir
    {
        get
        {
            return this.mdbDir;
        }
        set
        {
            this.mdbDir = value;
            RaisePropertyChanged("MdbDir");
        }
    }

    private List<string> mdbTblList;
    public List<string> MdbTblList
    {
        get
        {
            return this.mdbTblList;
        }
        set
        {
            this.mdbTblList = value;
            RaisePropertyChanged("MdbTblList");
        }
    }

    private DelegateCommand updateMdbTblListCommand;
    public ICommand UpdateMdbTblListCommand
    {
        get
        {
            return this.updateMdbTblListCommand ??
                    (this.updateMdbTblListCommand = new DelegateCommand(this.UpdateMdbTblList));
        }
    }

    public MyViewModel()
    {
        // This would idealy be injected via the constructor
        this.model = new MyModel();
    }

    private void UpdateMdbTblList(object obj)
    {
        var param = obj as string;
        this.MdbTblList = this.model.ReturnMdbTblList(param);
    }

    #region [ INotifyPropertyChanged ]

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    #endregion
}

public class MyModel
{
    public List<string> ReturnMdbTblList(string mdbDir)
    {
        // Do soemthing
        return new List<string>();
    }
}

public class DelegateCommand : ICommand
{
    private readonly Predicate<object> _canExecute;
    private readonly Action<object> _execute;

    public event EventHandler CanExecuteChanged;

    public DelegateCommand(Action<object> execute)
        : this(execute, null)
    {
    }

    public DelegateCommand(Action<object> execute,
                    Predicate<object> canExecute)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return this._canExecute == null || this._canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        if (CanExecuteChanged != null)
        {
            CanExecuteChanged(this, EventArgs.Empty);
        }
    }
}

XAML

<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
    <TextBox Height="23" Margin="10" Width="200" Text="{Binding MdbDir}" />
    <Button Content="Click Me"  Width="100" Height="25" Margin="10" Command="{Binding Path=UpdateMdbTblListCommand}" CommandParameter="{Binding Path=MdbDir}" />
</StackPanel>

We bind the Command property of the Button to our UpdateMdbTblCommand in the MyViewModel , we also bind the CommandParameter property of the Button to the MdbDir property of MyViewModel . When the Button is pressed the UpdateMdbTblCommand is executed which in turn calls the UpdateMdbTbl passing along the value of MdbDir as an argument and subsequently updating the MdbTblList property of MyViewModel .

As I said the DelegateCommand would be my preferred method, however, it may be overkill when taking into consideration what you have to write to achieve what can be done in the former example.