silverlight - 如何在 Silverlight MVVM 中从 View 获取文本框值到 ViewModel？

Question

目前我正在使用 silverlight5 和 MVVM。在 SL5 中，我需要执行以下操作。我在 xaml（设计页面）中有 3 个文本框和 1 个按钮控件以及我的数据网格。

这是设计视图（Xaml）：

<UserControl.DataContext>
        <VC:EmployeeListViewModel />
    </UserControl.DataContext>
        <Grid x:Name="LayoutRoot">
        <my:DataGrid x:Name="McDataGrid" ItemsSource="{Binding Employees,UpdateSourceTrigger=PropertyChanged}" Margin="130,151,0,0" Height="137" VerticalAlignment="Top" RowBackground="#AA5D9324" AutoGenerateColumns="True" HorizontalAlignment="Left" Width="193">
        </my:DataGrid>
        <Button Content="Show Message" Width="100" Height="25" Margin="256,75,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <si:CallDataMethod Method="AddEmployeeCommand"/>
                    <si:ShowMessageBox Caption="Thank you"
                                       Message="Thanks for trying the Example"
                                       MessageBoxButton="OK"/>
                    <si:SetProperty TargetName="LayoutRoot" 
            PropertyName="Background" Value="PaleGoldenrod"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
     <TextBlock FontWeight="Bold" Height="26" HorizontalAlignment="Left" Margin="47,12,0,0" Name="textBlock1" Text="First Name:" VerticalAlignment="Top" Width="77" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="130,12,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Path=Employee.Fname}" />
        <TextBlock FontWeight="Bold" Height="25" HorizontalAlignment="Left" Margin="35,44,0,0" Name="textBlock2" Text="Second Name:" VerticalAlignment="Top" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="130,44,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" />
        <TextBlock FontWeight="Bold" Height="23" HorizontalAlignment="Left" Margin="45,75,0,0" Name="textBlock3" Text="Department:" VerticalAlignment="Top" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="130,75,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" />
        <!-- Add reference to Microsoft.Expression.Interactions.dll, System.Windows.Interactivity.dll -->
            <!-- Use mvvmxmlns snippet to add i and ei namespace prefixes -->
       </ComboBox> 
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="64,122,0,0" Name="textBlock4" Text="Choose:" VerticalAlignment="Top" FontWeight="Bold" />
</Grid>
</UserControl>

在同一个项目中，我创建了一个名为“ViewModel”的文件夹：在同一个文件夹中，我添加了一个名为：EmployeeListViewModel.cs 的类文件

我的问题是这个。如何将文本框值传递给 viewmodel[EmployeeListViewModel] 并将其插入 Datagrid。

EmployeeListViewModel.cs：

public class EmployeeListViewModel:INotifyPropertyChanged 
    {
        public ObservableCollection<Employee> Employees { get; private set; }

        public EmployeeListViewModel()
        {
            Employees = Silverlight_MVVM.DataHelper.EmployeeDataHelper.EmployeeData ();
        }

        private Employee _SelectedEmployee;
        public Employee SelectedEmployee
        {
            get
            {
                return _SelectedEmployee;
            }
            set
            {
                _SelectedEmployee = value;
                RaisePropertyChanged("SelectedEmployee");
            }
        }

        private Employee _Names;
        public Employee Names
        {
            get
            {
                return _Names;
            }
            set
            {
                _Names = value;
                RaisePropertyChanged("Names");
            }
        }

        public void HandleShowMessage()
        {
           // MessageBox.Show("Hello " + Names + ",Welcome to EventTrigger for MVVM.");

        }
        public RelayCommand _AddEmployeeCommand;
        /// <summary>
        /// Returns a command that show the customer.
        /// </summary>
        public ICommand AddEmployeeCommand
        {
            get
            {
                if (_AddEmployeeCommand == null)
                {
                    _AddEmployeeCommand = new RelayCommand(
                        param => this.AddEmployee(),
                        param => this.CanAddEmployee
                        );
                }
                return _AddEmployeeCommand;
            }
        }

        public bool CanAddEmployee
        {
            get
            {
                 return true;
            }
        }

        public void AddEmployee()
        {
            //Employee newEmployee = new Employee("New1);
            Employee newEmployee = new Employee() **{};**
           --> **Here i have to pass the value.. How is it possible..?**
            Employees.Add(newEmployee);
            SelectedEmployee = newEmployee;
        }



        #region INotifyPropertyChanged
        // [field: NonSerialized]
        public event PropertyChangedEventHandler PropertyChanged;

        protected void RaisePropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
}

score 1 · Accepted Answer

您必须使用TwoWay绑定模式。例如，Text="{Binding Path=Employee.Fname,Mode=TwoWay}"。您可以在 MSDN 上阅读有关Binding.Mode 的更多信息。

score 1 · Accepted Answer

不是 100% 确定你是怎么做的？通常我会将网格绑定到所选员工，然后将文本框的值绑定到所选员工的属性。当您更改行时，这些将更新以反映网格中当前选定行的值。因此，您添加了一个新的空白员工，并且在将它们输入到文本框中之前，它将具有空白值。当然，您需要进行一些验证，以确保不会添加大量空白行。

如果我对您想要如何做的理解是正确的，那么文本框中的值与所选行无关，而只是用于添加具有这些值的新员工？为了实现这一点，我建议将文本框绑定到 Viewmodel 上的字符串值。目前，您将它们绑定到似乎实际上并不存在的东西。相反，我会将它们绑定到视图模型上的它们自己的属性，因此：

private string _employeeFirstName; 
    public string EmployeeFirstName 
    { 
        get 
        { 
            return _employeeFirstName; 
        } 
        set 
        { 
            _employeeFirstName= value; 
            RaisePropertyChanged("EmployeeFirstName"); 
        } 
    }

然后在 xaml 中绑定到该属性 - 使用 Mode=TwoWay 以便视图模型也接收任何更新

<TextBox Height="23" HorizontalAlignment="Left" Margin="130,12,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Path=EmployeeFirstName, Mode=TwoWay}" />

然后在创建新员工时：

    public void AddEmployee()    
    {     
        Employee newEmployee = new Employee() {FName = this.EmployeeFirstName};    

        Employees.Add(newEmployee);    
        SelectedEmployee = newEmployee;    
    }

score 0 · Accepted Answer

我在视图模型中分别创建了三个名为 Fname、Sname、Dept 的属性。

private string _fname;
        public string Fname
        {
            get
            {
                return _fname;
            }
            set
            {
                _fname = value;
                RaisePropertyChanged("Fname");
            }
        }

功能如下..

public void AddEmployee()    
    {     
        Employee newEmployee = new Employee() {Fname=this.Fname;Sname=this.Sname;Dept=this.Dept};    

        Employees.Add(newEmployee);    
        SelectedEmployee = newEmployee;    
    }

它运作良好..

设计代码是：

<TextBlock FontWeight="Bold" Height="26" HorizontalAlignment="Left" Margin="47,12,0,0" Name="textBlock1" Text="First Name:" VerticalAlignment="Top" Width="77" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="130,12,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Path=Fname,Mode=TwoWay}" />
        <TextBlock FontWeight="Bold" Height="25" HorizontalAlignment="Left" Margin="35,44,0,0" Name="textBlock2" Text="Second Name:" VerticalAlignment="Top" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="130,44,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Text="{Binding Path=Sname,Mode=TwoWay}"/>
        <TextBlock FontWeight="Bold" Height="23" HorizontalAlignment="Left" Margin="45,75,0,0" Name="textBlock3" Text="Department:" VerticalAlignment="Top" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="130,75,0,0" Name="textBox3" VerticalAlignment="Top" Width="120"  Text="{Binding Path=Dept,Mode=TwoWay}"/>

<Button Content="Show Message" Width="100" Height="25" Margin="256,75,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <si:CallDataMethod Method="AddEmployee"/>
                    <si:ShowMessageBox Caption="Thank you"
                                       Message="Thanks for trying the Example"
                                       MessageBoxButton="OK"/>
                    <si:SetProperty TargetName="LayoutRoot" 
            PropertyName="Background" Value="PaleGoldenrod"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>

希望对我们有用。。

silverlight - 如何在 Silverlight MVVM 中从 View 获取文本框值到 ViewModel？

3 回答 3

Related

Reference