ReactiveUI and Validation - silverlight

What's considered "best practice" when performing data validation while using ReactiveUI? Let's say I have a view model that looks like this:
public class MyViewModel: ReactiveObject
{
public ReactiveAsyncCommand SaveMyDataCommand { get; protected set; }
private string _email;
public string Email
{
get { return _email; }
set
{
_email = value;
raisePropertyChanged("Email");
}
}
private string _name;
public string Name
{
get { return _name; }
set
{
_name= value;
raisePropertyChanged("Name");
}
}
private bool _sendEmail = false;
public bool SendEmail
{
get { return _sendEmail; }
set
{
_sendEmail = value;
raisePropertyChanged("SendEmail");
}
}
public MyViewModel()
{
SaveMyDataCommand = new ReactiveAsyncCommand(null, 1);
}
}
Here's what I want to validate:
If SendEmail == true then make sure there's a valid email address in the Email property. (I'm not worried about the actual email address validation piece itself. This is just a what if scenario.)
If a value was set to the Email property, make sure it's a valid email address.
If either 1. or 2. fail validation, SaveMyDataCommand should not be executable.
I'm just looking for a good example on how to do simple / slightly more complex data validation using ReactiveUI. Can anyone shed some light on this?

For anyone else looking for an example on using ReactiveValidatedObject, here's what worked for me. Note that you'll have to add a reference to System.ComponentModel to your class as well.
public class MyViewModel: ReactiveValidatedObject
{
public ReactiveAsyncCommand SaveMyDataCommand { get; protected set; }
// THIS PROPERTY INDICATES WHETHER ALL FIELDS HAVE BEEN VALIDATED
public bool IsSaveEnabled
{
get { return IsObjectValid(); }
}
private string _email;
[ValidatesViaMethod(AllowBlanks=true,AllowNull=true,Name="IsEmailValid",ErrorMessage="Please enter a valid email address")]
public string Email
{
get { return _email; }
set
{
_email = value;
raisePropertyChanged("Email");
SendEmail = SendEmail;
raisePropertyChanged("IsSaveEnabled");
}
}
private string _name;
public string Name
{
get { return _name; }
set
{
_name= value;
raisePropertyChanged("Name");
}
}
private bool _sendEmail = false;
[ValidatesViaMethod(Name = "IsSendEmailValid", ErrorMessage = "Make sure a valid email address is entered.")]
public bool SendEmail
{
get { return _sendEmail; }
set
{
_sendEmail = value;
raisePropertyChanged("SendEmail");
raisePropertyChanged("IsSaveEnabled");
}
}
public bool IsEmailValid(string email)
{
if (string.IsNullOrEmpty(email))
{
return true;
}
// Return result of Email validation
}
public bool IsSendEmailValid(bool sendEmail)
{
if (sendEmail)
{
if (string.IsNullOrEmpty(Email))
{
return false;
}
// Return result of Email validation
}
}
public MyViewModel()
{
SaveMyDataCommand = new ReactiveAsyncCommand(null, 1);
}
}
I hope this helps someone! :)

Use ReactiveValidatedObject, then use Data Annotations (on phone, sorry for short message)

Related

MVVM Datagrid Binding SelectedItem not updating

I'm new to WPF and MVVM and i've an applicaton that uses Entity Framework to connect to database and a datagrid to show the users of the application.
The users CRUD operations are made in a separate window and not in the datagrid.
My problems are related with the update of datagrid.
The insert operation is ok but the update is not.
View 1 (Users List):
<DataGrid Grid.Row="1"
ItemsSource="{Binding Users, Mode=TwoWay}"
SelectedItem="{Binding SelectedUser, Mode=TwoWay}"
AutoGenerateColumns="False"
CanUserAddRows="False">
</DataGrid>
ViewModel :
class UserListViewModel: NotificationClass
{
UserDBContext _db = null;
public UserListViewModel()
{
_db = new UserDBContext();
Users = new ObservableCollection<User>(_db.User.ToList());
SelectedUser = Users.FirstOrDefault();
}
private ObservableCollection<User> _users;
public ObservableCollection<User> Users
{
get { return _users; }
set
{
_users = value;
OnProprtyChanged();
}
}
private User _selectedUser;
public User SelectedUser
{
get
{
return _selectedUser;
}
set
{
_selectedUser = value;
OnProprtyChanged();
}
}
public RelayCommand Edit
{
get
{
return new RelayCommand(EditUser, true);
}
}
private void EditUser()
{
try
{
UserView view = new UserView();
view.DataContext = SelectedUser;
view.ShowDialog();
if (view.DialogResult.HasValue && view.DialogResult.Value)
{
if (SelectedUser.Id > 0){
User updatedUser = _db.User.First(p => p.Id == SelectedUser.Id);
updatedUser.Username = SelectedUser.Username; //this doesn't do nothing, object is already with the new username ?!
}
_db.SaveChanges();
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
}
after _db.SaveChanges(), datagrid should not be updated ?
Model:
class UserDBContext: DbContext
{
public UserDBContext() : base("name=DefaultConnection")
{
}
public DbSet<User> User { get; set; }
}
View 2 (User detail)
public partial class UserView : Window
{
public UserView()
{
InitializeComponent();
}
private void SaveButton_Click(object sender, RoutedEventArgs e)
{
DialogResult = true;
}
}
User object
class User: NotificationClass
{
public int Id { get; set; }
public string Username { get; set; }
public string CreatedBy { get; set; }
public DateTime? CreatedOn { get; set; }
}
NotificationClass
public class NotificationClass : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged = delegate { };
public void OnProprtyChanged([CallerMemberName]string propertyName = null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
if i close and open view 1, the new username is updated..
could someone help ? thanks
Just implementing INotifyPropertyChanged isn't enough, you have to explicitly invoke PropertyChanged (or in your case OnPropertyChanged) when a property changed.
See also https://learn.microsoft.com/en-us/dotnet/framework/wpf/data/how-to-implement-property-change-notification
You can do it like so
class User : NotificationClass
{
private int _id;
private string _username;
private string _createdBy;
private DateTime? _createdOn;
public int Id
{
get => _id;
set
{
if (value == _id) return;
_id = value;
OnPropertyChanged();
}
}
public string Username
{
get => _username;
set
{
if (value == _username) return;
_username = value;
OnPropertyChanged();
}
}
public string CreatedBy
{
get => _createdBy;
set
{
if (value == _createdBy) return;
_createdBy = value;
OnPropertyChanged();
}
}
public DateTime? CreatedOn
{
get => _createdOn;
set
{
if (value.Equals(_createdOn)) return;
_createdOn = value;
OnPropertyChanged();
}
}
}
it worked ! many thanks #nosale !
what about the change made to SelectedUser being reflected in my context ?
if i do this :
SelectedUser.Username = "test";
User updatedUser = _db.User.First(p => p.Id == SelectedUser.Id);
i was thinking that SelectedUser object has the "test" username and updatedUser has the old username, but not .. updatedUser already have "test"

DisplayMemberPath databinding

I have a puzzled problem of databinding in WPF.
There is a listbox in XAML which it has linked with ItemSource,
but when it runs, it shows the lists of class names.
so I have applied to DisplayMemberPath, but it doesn't helpful.
and also I'm wondering how I can access inside class from generic class.
Thanks.
result
puzzled.Member
puzzled.Member
puzzled.Member
puzzled.Member
<DockPanel>
<ListBox Name="lbxMbrList" DockPanel.Dock="Left" Width="200" Padding="10"></ListBox>
<ContentControl />
</DockPanel>
private void Window_Loaded(object sender, RoutedEventArgs e)
{
members.Add(new Member("superman", "123-1234567", "address1"));
members.Add(new Member("batman", "111-111111", "address2"));
members.Add(new Member("goodman", "222-222222", "address3"));
members.Add(new Member("badman", "333-333333", "address4"));
lbxMbrList.ItemsSource = members;
lbxMbrList.DisplayMemberPath = members.MemberDetails; //<<it won't helpful
//var i = members.member.Name; //<<how can I access inside class?
//if (i == "superman")
//{
// MessageBox.Show("superman");
//}
}
public class Member
{
private string _name;
private string _phone;
private string _address;
public string Name { get { return _name; } set { _name = value; } }
public string Phone { get { return _phone; } set { _phone = value; } }
public string Address { get { return _address; } set { _address = value; } }
public Member() { }
public Member(string name, string phone, string address)
{
_name = name; _phone = phone; _address = address;
}
public string lbxMember
{
get { return string.Format("{0} - {1}", Name, Phone, Address); }
}
}
class MemberList : IEnumerable<Member>
{
private ObservableCollection<Member> memberList = new ObservableCollection<Member>();
public Member this[int i]
{
get {return memberList[i];}
set {memberList[i] = value;}
}
public void Add(Member member)
{
memberList.Add(member);
}
public void Remove(Member member)
{
memberList.Remove(member);
}
public IEnumerator<Member> GetEnumerator()
{
return memberList.GetEnumerator();
}
IEnumerator IEnumerable.GetEnumerator() { return GetEnumerator(); }
public Member member { get; set; } //<< it think I has misunderstood it
public string MemberDetails
{
get
{ return string.Format("{0} - {1}", member.Name, member.Phone, member.Address); }
}
}
You are assigning the output of your MemberDetails property to the DisplayMemberPath. Instead, you need to assign the name of the property as a string.
lbxMbrList.DisplayMemberPath = "MemberDetails";
For what its worth, this will be easier to work with if you use an ItemTemplate in the ListBox.
[Edit]
Also, as #Blam mentions in his answer, your MemberDetails property is defined in the wrong class, it needs be in the Member class.
lbxMbrList.DisplayMemberPath = "lbxMember";
or
lbxMbrList.DisplayMemberPath = "MemberDetails";
And MemberDetails need to be a property of Member (not MemberList)

MVVM refresh model

I have a project in WPF with the MVVM-Pattern.
The view has a listview of Persons(FirstName, LastName, Town) and next to the list are the details of the person(FirstName,LastName,ZIP) with a button(Save).
If you click to a person on the left side, the person details on the right side will load automatically.
In the ViewModel I have an ObservableCollection of Person-Models. (Person list)
The Person Model includes some propertys like FirstName, LastName, Town, Zip. (Details).
When I change the ZIP, the Town will updated automatically(in the setter switch-case) e.g. ZIP '11111' Town 'Town1' / ZIP '22222' Town 'Town2'.
The Person Model includes also an ICommand "SavePerson" to Save Changes.
Now when i click to an item in the listview the details will load automatically.
When I change the FirstName or LastName and click "Save" the listview will change the First and the LastName of the selected item, that's ok.
Now when I change the ZIP from '12345' into '11111' the town in the listview is still the old one and not 'Town1'.
Have you an idea to fix this problem, without to implement the INotifyPropertyChanged-Interface in the Model?
Some code:
Model:
public class Person
{
private string _firstName = string.Empty;
private string _lastName = string.Empty;
private string _zip = string.Empty;
private string _town = string.Empty;
public string FirstName
{
get { return _firstName; }
set { _firstName = value; }
}
public string LastName
{
get { return _lastName; }
set { _lastName= value; }
}
public string ZIP
{
get { return _zip; }
set
{
switch (value)
{
case "11111":
this.Town = "Town1";
break;
case "22222":
this.Ort = "Town2";
break;
default:
break;
}
_zip = value;
}
}
public string Town
{
get { return _town; }
set { _town= value; }
}
public ICommand SaveNameCommand
{
get
{
return new DelegateCommand((param) => this.SaveName(param));
}
}
private void SaveName(object parameter)
{
string[] param = ((string)parameter).Split(new char[] { ':' });
FirstName = param[0];
LastName = param[1];
PLZ = param[2];
}
}
ViewModel:
public class PersonList
{
private readonly ObservableCollection<Person> _persons = new ObservableCollection<Person>();
private Person _currentSelectedPerson = new Person();
public PersonList()
{
this._persons.Add(new Person() { FirstName = "First1", LastName = "Last1", Ort = "Ort1", PLZ = "112" });
this._persons.Add(new Person() { FirstName = "First2", LastName = "Last2", Ort = "Ort2", PLZ = "122" });
this._persons.Add(new Person() { FirstName = "First3", LastName = "Last3", Ort = "Ort3", PLZ = "1132" });
}
public IEnumerable<Person> Persons
{
get { return this._persons; }
}
}
Since your Model should be loosely-coupled from your ViewModel, it makes sense that you might not want to implement INotifyPropertyChanged in your Model since it's most commonly associated with WPF; however, it's a C# interface and can be used in any type of application, so there's no harm implementing it. In fact, I'd suggest it's probably the best way. However, if you really don't want to implement it in your model classes, consider an event-subscriber model, where the Model raises an event when changed, and the ViewModel subscribes to it.
model.ValuesChanged += model_ValuesChanged;
private void model_ValuesChanged(object sender, EventArgs e)
{
RaisePropertyChanged("MyProperty");
}
I have absolutely no idea why you would want to not implement the INotifyPropertyChanged interface on your model class(es). Really, your only other option would be to implement it in your view model and expose all of your model properties there:
public string FirstName
{
get { return _currentSelectedPerson .FirstName; }
set { _currentSelectedPerson .FirstName = value; NotifyPropertyChanged("FirstName"); }
}
public string LastName
{
get { return _currentSelectedPerson .LastName; }
set { _currentSelectedPerson .LastName= value; NotifyPropertyChanged("LastName"); }
}
...
WPF and the INotifyPropertyChanged interface go hand in hand... at some stage, you're going to have to implement it.
The model Should implement INotifyPropertyChanged
chack INotifyPropertyChanged WPF
any other search of INotifyPropertyChanged will do as well
You need notification your View about changed in ViewModel.
For this use INotifyPropertyChanged. Any class that implements this interface,
notifies any listeners when a property has changed.
So you need to modify our Person class a little bit more:
public class Person : INotifyPropertyChanged
{
private string _firstName = string.Empty;
private string _lastName = string.Empty;
private string _zip = string.Empty;
private string _town = string.Empty;
public string FirstName
{
get { return _firstName; }
set
{
_firstName = value;
RaisePropertyChanged("FirstName");
}
}
public string LastName
{
get { return _lastName; }
set
{
_lastName= value;
RaisePropertyChanged("LastName");
}
}
public string ZIP
{
get { return _zip; }
set
{
switch (value)
{
case "11111":
this.Town = "Town1";
break;
case "22222":
this.Town = "Town2";
break;
default:
break;
}
_zip = value;
RaisePropertyChanged("LastName");
RaisePropertyChanged("Town");
}
}
public string Town
{
get { return _town; }
set
{
_town= value;
RaisePropertyChanged("Town");
}
}
public ICommand SaveNameCommand
{
get
{
return new DelegateCommand((param) => this.SaveName(param));
}
}
private void SaveName(object parameter)
{
string[] param = ((string)parameter).Split(new char[] { ':' });
FirstName = param[0];
LastName = param[1];
PLZ = param[2];
}
}

MVVM and DBContext - how to put it together?

I'm trying to follow the MVVM pattern, however I spent some good time on this issue, googled a lot and checked stackoverflow as well... No working example found so far.
Basically, I've a simple application and want to retrieve and write data to SQL server. Here's my code:
//Model
public class Visitor
{
public string ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
//ViewModel
public class VisitorViewModel : ViewModelBase
{
public ObservableCollection<Visitor> _visitorDataCollection = new ObservableCollection<Visitor>();
public ObservableCollection<Visitor> VisitorDataCollection
{
get { return _visitorDataCollection; }
set { _visitorDataCollection = value; }
}
private string _firstName = "";
private string _lastName = "";
public string FirstName
{
get { return _firstName; }
set
{
if (value != _firstName)
{
_firstName = value;
OnPropertyChanged("FirstName");
}
}
}
public string LastName
{
get { return _lastName; }
set
{
if (value != _lastName)
{
_lastName = value;
OnPropertyChanged("LastName");
}
}
}
public VisitorViewModel()
{
}
}
}
//VisitorContext class that represents a database context
public partial class VisitorContext : DbContext
{
public VisitorContext()
: base()
{
}
public DbSet<VISITOR> Visitors { get; set; }
}
}
Nothing really fancy. However, I cannot put it "together". How to complete that to retrieve all visitors and add a new one?
Could someone point me to the right direction?
Just a simple example how make it all to life.
Add some commands to VM:
public ICommand Add {get; private set;}
In constructor:
public VisitorViewModel()
{
using(var context = new VisitorContext())
{
//fill collection with initial data from DbContext
context.Visitors.ToList().ForEach(_visitorDataCollection.Add);
}
//setup add command, here I'm using MVVM Light like you
Add = new RelayCommand(()=> {
using(var context = new VisitorContext())
{
_visitorDataCollection.Add(context.Visitors.Add(new Visitor {
FirstName = this.FirstName,
LastName = this.LastName //read values from model properties
});
}
});
}
That's it, all you need to do is bind this ViewModel to appropriate View.

property names are different from original Object in the silverlight

Following is part of service layer which is provided by WCF service :
[Serializable]
public class WaitInfo
{
private string roomName;
private string pName;
private string tagNo;
public string RoomName
{ get { return roomName; } set { this.roomName = value; } }
public string PName
{ get { return pName; } set { this.pName = value; } }
public string TagNo
{ get { return tagNo; } set { this.tagNo = value; } }
}
public class Service1 : IService1
{
public List<WaitInfo> GetWaitingList()
{
MyDBDataContext db = new MyDBDataContext();
var query = from w in db.WAIT_INFOs
select new WaitInfo
{
TagNo = w.PATIENT_INFO.TAG_NO,
RoomName= w.ROOM_INFO.ROOM_NAME,
PName= w.PATIENT_INFO.P_NAME
};
List<WaitInfo> result = query.ToList();
return result;
}
And following is codebehind part of UI layer which is provided by Silverlight
public MainPage()
{
InitializeComponent();
Service1Client s = new Service1Client();
s.GetWaitingListCompleted +=
new EventHandler<GetWaitingListByCompletedEventArgs>( s_GetWaitingListCompleted);
s.GetWaitingListAsync();
}
void s_GetWaitingListCompleted(object sender,
RadControlsSilverlightApplication1.ServiceReference2.GetWaitingListByCompletedEventArgs e)
{
GridDataGrid.ItemsSource = e.Result;
}
And following is xaml code in Silverlight page
<Grid x:Name="LayoutRoot">
<data:DataGrid x:Name="GridDataGrid"></data:DataGrid>
</Grid>
It is very simple code, however what I am thinking weird is property name of object at "e.Result" in the code behind page.
In the service layer, although properties' names are surely "RoomName, PName, TagNo", in the silverlight properties' names are "roomName, pName, tagNo" which are private variable name of the WaitingList Object.
Did I something wrong?
Thanks in advance.
Unless you specifically decorate your class with the DataContract attribute (which you should, instead of Serializable) then a default DataContract will be inferred. For normal Serializable types, this means the fields will be serialized as opposed to the properties.
You can markup your class in either of the following two ways. The latter will use the property accessors when serializing/deserializing your object which may be very useful or be a hassle depending on your circumstances.
[DataContract]
public class WaitInfo
{
[DataMember(Name="RoomName")]
private string roomName;
[DataMember(Name="PName")]
private string pName;
[DataMember(Name="TagNo")]
private string tagNo;
public string RoomName
{ get { return roomName; } set { this.roomName = value; } }
public string PName
{ get { return pName; } set { this.pName = value; } }
public string TagNo
{ get { return tagNo; } set { this.tagNo = value; } }
}
The method I prefer:
[DataContract]
public class WaitInfo
{
private string roomName;
private string pName;
private string tagNo;
[DataMember]
public string RoomName
{ get { return roomName; } set { this.roomName = value; } }
[DataMember]
public string PName
{ get { return pName; } set { this.pName = value; } }
[DataMember]
public string TagNo
{ get { return tagNo; } set { this.tagNo = value; } }
}

Resources