如何通过视图和视图模型之间的数据 [英] How to pass data between the View and the ViewModel

问题描述

我在MVVM设计模式我试图创建一个简单的应用程序，其中在主窗口中显示的学生名单新手，我希望用户能够在新的学生添加到列表中我完成了可观察到的集合，其中学生的数据，但我如何通过从文本框获取数据，并用它们作为参数的命令

I'm a newbie in the MVVM design patter I'm trying to create a simple app where a list of students is shown in the main window and I want the user to be able to add a new student to the list I have accomplished the binding of the observable collection where the students' data are but how can I create a new user by fetching the data from the textboxes and using them as a parameter in a command

下面是我的看法。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBlock x:Name="NameTextBlock"
               Text="Name"
               Style="{StaticResource TextBlockTextStyle}"/>
    <TextBlock x:Name="SurnameTextBlock"
               Grid.Row="1"
               Text="Surname"
               Style="{StaticResource TextBlockTextStyle}"/>
    <TextBlock x:Name="AgeTextBlock"
               Grid.Row="2"
               Text="Age"
               Style="{StaticResource TextBlockTextStyle}"/>
    <TextBox x:Name="NameTextBox"
             Grid.Column="1"
             Style="{StaticResource TextBoxTextStyle}"/>
    <TextBox x:Name="SurnameTextBox"
             Grid.Row="1"
             Grid.Column="1"
             Style="{StaticResource TextBoxTextStyle}"/>
    <TextBox x:Name="AgeTextBox"
             Grid.Row="2"
             Grid.Column="1"
             Style="{StaticResource TextBoxTextStyle}"/>
    <ListBox x:Name="StudentListBox"
             Grid.ColumnSpan="2"
             Grid.Row="4"
             Style="{StaticResource ListBoxStyle}"
             ItemsSource="{Binding StudentList}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Name}"
                               Style="{StaticResource TextBlockTextStyle}"/>
                    <TextBlock Text="{Binding Surname}"
                               Grid.Column="1"
                               Style="{StaticResource TextBlockTextStyle}"/>
                    <TextBlock Text="{Binding Age}"
                               Grid.Column="2"
                               Style="{StaticResource TextBlockTextStyle}"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <Button x:Name="AddButton"
            Grid.Row="7"
            Grid.ColumnSpan="2"
            HorizontalAlignment="Center"
            Content="Add"
            Margin="7,7,7,7"
            Command="{Binding AddStudentCommand}"/>        
</Grid>

和这里是我的ViewModel

And here is my ViewModel

public class MainViewModel : ViewModelBase
{
    ObservableCollection<Student> studentList;
    public MainViewModel()
    {
        //populate some sample data
        studentList = new ObservableCollection<Student>()
        {
            new Student(){Name="John", Surname="Smith", Age="28"},
            new Student(){Name="Barbara", Surname="Anderson", Age="23"}
        };
    }

    public ObservableCollection<Student> StudentList
    {
        get { return studentList; }
        set { RaisePropertyChanged("studentList"); }
    }

    Student selectedPerson;
    public Student SelectedPerson
    {
        get { return selectedPerson; }
        set
        {
            selectedPerson = value;
            RaisePropertyChanged("SelectedPerson");
        }
    }

    private RelayCommand _addStudentCommand;
    public ICommand AddStudentCommand
    {
        get
        {
            return _addStudentCommand
                ?? (_addStudentCommand = new RelayCommand(() =>
                {
                    Student student = new Student();
                    // here should be the logic of defining the name, surname, 
                    // age and id of the newly created student
                    studentList.Add(student);
                }));
        }
    }

}

我在当前项目中使用MVVMLight还有很多，我不知道这样的事情，请解释一下我应该如何传递文本框的数据和正在使用它的命令应该发生什么。

I am using MVVMLight in the current project and there are a lot of thing that I do not understand so please explain how I should pass the data of the textboxes and what exactly should happen in the command that it is being used.

告诉我，如果需要添加更多的代码。

Tell me to add more of the code if necessary.

推荐答案

我会做的是创建一个文本框绑定到视图模型的某些属性。
像这样三个（在视图模型）

What I would do is create some properties that the textboxes are bound to in the ViewModel. Like this for all three (in your viewmodel)

private string _Name;
    public string Name
    {
        get { return _Name; }
        set
        {
            _Name = value;
            RaisePropertyChanged("Name");
        }
    }

然后，在XAML，文本框的文本绑定这样的：

Then, in the XAML, bind the textbox's text to this:

<TextBox x:Name="NameTextBox"
             Text="{Binding Name}"
         Grid.Column="1"
         />

最后，在传递addStudent命令你引用的属性在绑定到文本框的视图模型。

Finally in the AddStudent Command you reference the properties in the viewmodel that are bound to the textboxes.

private RelayCommand _addStudentCommand;
    public ICommand AddStudentCommand
    {
        get
        {
            return _addStudentCommand
                ?? (_addStudentCommand = new RelayCommand(() =>
                {
                    Student student = new Student();
                    student.Name = this.Name;
                    student.Surname = this.Surname;
                    student.Age = this.Age;
                    // here should be the logic of defining the name, surname, 
                    // age and id of the newly created student
                    _StudentList.Add(student);
                }));
        }
    }

这篇关于如何通过视图和视图模型之间的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！