We Keep Coding

How to Provide Fluent Validation on Multi-Select Component using MudBlazor

I have a Blazor app that manages a lot of form input. Every form is tied to an instance of type IncidentLog, and every UI element of the form is tied to a property of that IncidentLog instance.
In the form, we have a MudSelect component where T="Department". The MudSelect has MultiSelection="true", and the results are stored in a IEnumerable(Department) Departments property of the IncidentLog instance.
This component works totally fine, but I've tried implementing FluentValidation in the form and I'm not sure how to define the expression of the For parameter of this MudSelect component. It looks like it's expecting me to pass an object that matches T="Department", but the validation I need to run against the validator is based off of IEnumerable(Department)... I just want to check that the user has selected at least one department from the multiselect component.
Error message when trying to pass IEnumerable object to the For validator:
IncidentLogPropertiesComponent razor page - relevant blurb
<MudForm Model="#Log" #ref="#form" Validation="#(incidentLogValidator.ValidateValue)" ValidationDelay="100">
<MudCardContent Class="pt-0">
...
<MudSelect T="Department" ToStringFunc="#ConverterDepartment" Dense="true" Margin="Margin.Dense" Label="Affected Departments:" MultiSelection="true" #bind-SelectedValues="Log.Departments" Clearable>
#foreach (var department in Departments.OrderBy(o=>o.DepartmentName).ToList())
{
<MudSelectItem Value="#department"/>
}
</MudSelect>
...
</MudCardContent>
</MudForm>
IncidentLog.cs:
public class IncidentLog : Log
{
[Key]
public int IncidentID { get; set; }
....
[Write(false)]
public IEnumerable<Department> Departments { get; set; } = new HashSet<Department>();//3
....
}
IncidentLogPropertiesComponentBase
public class IncidentLogPropertiesComponentBase : OwningComponentBase<iIncidentLogRepository>, IDisposable
{
protected IncidentLogValidator incidentLogValidator = new IncidentLogValidator();
...
[Parameter]
public IncidentLog? Log
{
get
{
return (AppState.SelectedLog != null && AppState.SelectedLog.LogType.LogTypeID == 2) ? (IncidentLog)AppState.SelectedLog : null;
}
set
{
AppState.SetLog(value);
}
}
}
IncidentLogValidator:
public class IncidentLogValidator: AbstractValidator<IncidentLog>
{
public IncidentLogValidator()
{
...
RuleFor(t => t.Departments).NotEmpty().WithMessage("Must enter at least one department affected.");
}
public Func<object, string, Task<IEnumerable<string>>> ValidateValue => async (model, propertyName) =>
{
var result = await ValidateAsync(ValidationContext<IncidentLog>.CreateWithOptions((IncidentLog)model, x => x.IncludeProperties(propertyName)));
if (result.IsValid)
return Array.Empty<string>();
return result.Errors.Select(e => e.ErrorMessage);
};
}
*I didn't link my AppState state management file even though it's referenced in code above - I don't think it's relevant to the issue I'm having.
How do I provide Fluent Validation to Multi-Select Dropdowns using MudBlazor?

Issue while using ReactiveUi routing while more than one view points to one view model

I'm having an issue on my windows application (.NET / WPF) with trying to direct 2 of my Views to use the same ViewModel while using ReactiveUI with routing and MVVM. Application did work just fine while using separate ViewModels for each View (exept small bug - when I click the open-new-window-button after closing the first instance of that window, it crashes the app.).
As for main issue - I have a MainWindow, with UserControl that is RoutedViewHost (one per Window) and after redirecting more than one View to ViewModel it "bricks" (application starts up, and I can see a slight flash when a navigation-button is hit but nothing more happening) at last-registered view via Splat. I can see it is working, but stuck on that one view. Also it "bricks" the rerouting-buttons when directing to that ViewModel.
I was trying to follow example provided at https://github.com/reactiveui/ReactiveUI.Samples/tree/main/wpf/ReactiveUI.Samples.Routing, with small changes (I don't implement IViewModel interface, even when I did, it did not solve the issue I'm experiencing right now, also I use DataContext separately on each Window in their respective ViewModels).
My assumption is that it lacks some way to know what View I want to see first, but that does not explain bricked buttons (only the ones that redirect to that combined ViewModel, RoutedViewHost works fine.)
Anyway, sorry for long introduction, here is my code:
Instancing the first Window
Main_WView = new Main_WView();
Main_WView ??= (Main_WView)Locator.Current.GetService<IViewFor<Main_WViewModel>>();
Main_WView.Show();
MainWindow ViewModel
public class Main_WViewModel : ReactiveObject, IScreen
{
public RoutingState Router { get; }
public Main_WViewModel(IMutableDependencyResolver dependencyResolver = null)
{
Router = new RoutingState();
dependencyResolver ??= Locator.CurrentMutable;
RegisterVVM.RegisterMineVVM(this, dependencyResolver);
Router.Navigate.Execute(new Main_CVM(this));
}
}
MainWindow View
public Main_WViewModel Main_WViewModel { get; protected set; }
public Main_WView()
{
InitializeComponent();
Main_WViewModel = new Main_WViewModel();
DataContext = Main_WViewModel;
}
Splat registration (same for each Window)
public static void RegisterMineVVM(object windowViewModel, IMutableDependencyResolver dependencyResolver)
{
dependencyResolver.RegisterConstant(windowViewModel, typeof(IScreen));
dependencyResolver.Register(() => new Main_C0View(), typeof(IViewFor<Main_CVM>));
dependencyResolver.Register(() => new Main_C1View(), typeof(IViewFor<Main_CVM>));
}
Here is combined ViewModel that more than one-views want to use
public class Main_CVM : ReactiveObject, IRoutableViewModel
{
public string UrlPathSegment { get; protected set; }
public IScreen HostScreen { get; protected set; }
public ReactiveCommand<Unit, Unit> BtClick_NavigateTo_Main_C0View { get; }
public ReactiveCommand<Unit, Unit> BtClick_NavigateTo_Main_C1View { get; }
public Options_WView Options_WView = new Options_WView();
public ReactiveCommand<Unit, Unit> BtClick_NavigateTo_Options_WView { get; }
public Main_CVM(IScreen screen)
{
this.UrlPathSegment = this.GetType().Name;
HostScreen = screen;
BtClick_NavigateTo_Main_C0View = ReactiveCommand.CreateFromTask(async () => await HostScreen.Router.Navigate.Execute(new Main_CVM(HostScreen)).Select(_ => Unit.Default));
BtClick_NavigateTo_Main_C1View = ReactiveCommand.CreateFromTask(async () => await HostScreen.Router.Navigate.Execute(new Main_CVM(HostScreen)).Select(_ => Unit.Default));
BtClick_NavigateTo_Options_WView = ReactiveCommand.CreateFromTask(async () => Options_WView.Show());
}
}
Here is one of Main_C0View/Main_C1View Views
public partial class Main_C1View
{
public Main_C1View()
{
InitializeComponent();
this.WhenActivated(d =>
{
d(this.WhenAnyValue(x => x.ViewModel).BindTo(this, x => x.DataContext));
d(this.BindCommand(ViewModel,
vm => vm.BtClick_NavigateTo_Main_C0View,
view => view.BtClick_NavigateTo_Main_C0View));
d(this.BindCommand(ViewModel,
vm => vm.BtClick_NavigateTo_Main_C1View,
view => view.BtClick_NavigateTo_Main_C1View));
});
}
}
Xaml code for those Views (with simple command for buttons later on, they are not the issue)
<rx:ReactiveUserControl
x:Class="MyNamespace.Views.Main_C0View"
x:TypeArguments="vm:Main_CVM"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:rx="http://reactiveui.net"
xmlns:vm="clr-namespace:MyNamespace.ViewModels"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">

How do I dynamically assign a value to an MVC grid based on the value from another column in the row

I have a dataset currently that has 4 columns for values lets call them odd_low, odd_high, and even_low, even_high and I want to have two columns in the grid (LOW and HIGH) and have the values set based on the value of another column which will simply be 'O' or 'E' - This column is named side
Here's a quick sample (right now the column is bound to the odd fields only)
columns.Add(model => model.ODD_LOW).Titled("Low House #").Sortable(sortable);
columns.Add(model => model.ODD_HIGH).Titled("High House #").Sortable(sortable);
columns.Add(model => model.SIDE).Titled("Side").Sortable(sortable);
My guess is that I'll need to accomplish this using a script, but I'm not sure how to dynamically access the rows and fields.

I don't see the need for a dynamic datagrid in the scenario you discribed.
When using MVC, it's a good practice to use a ViewModel object to represent data. This way, your controller is resposible for getting the data from your business / service layer and map the result to your ViewModel object.
Using this aproach you can create an object with your view's properties and just bind it to your gridview and other controlls.
Your ViewModel object would look like this:
public class MyViewModelItem {
public int LowHouse { get; set; }
public int HighHouse { get; set; }
public char Side { get; set; }
}
public class MyViewModel {
// Your other view's properties
public List<MyViewModelItem> List { get; set; }
}
And your controller like this:
public class MyController : Controller {
private readonly IMyService myService;
public MyController()
{
myService = new MyService(); // Consider Dependency Injection
}
public ActionResult Index() {
var data = myService.List();
var myModel = MapMyModel(data);
return View(myModel);
}
private MyViewModel MapMyModel(IEnumerable<YOUR_ENTITY> data) {
var myModel = new MyViewModel();
myModel.List = new List<MyViewModelItem>();
foreach (var item in data)
{
myModel.List.Add(new MyViewModelItem {
LowHouse = item.ODD_LOW,
HighHouse = item.ODD_HIGH,
Side = [your logic]
})
}
}
}
References:
Use ViewModels to manage data & organize code in ASP.NET MVC applications
ASP.NET MVC View Model Patterns

Update Observable Collection When Item Added to Model C# wpf

Ok so I'm fairly new to this. I followed along with this MVVM tutorial from YouTube. It was pretty good and straightforward. Basically it sets up a very basic program with a Model class, DataAcess class, 3 viewmodels (Main window, Employee and ViewModelBase) and finally a view which has a stackpanel and a couple of text boxes that are bound to the FirstName and LastName in the Model.
It all works how it's meant to and I have been through it a number of times and I'm pretty sure I understand how it all works but the trouble that I am having is adding new Employees.
In the DataAccess class (Employee Repository) Employees are added as shown below.
class EmployeeRepository
{
readonly List<Employee> _employee;
public EmployeeRepository()
{
if (_employee == null)
{
_employee = new List<Employee>();
}
_employee.Add(Employee.CreateEmployee("Bob", "Jones"));
_employee.Add(Employee.CreateEmployee("Sarah", "Marshall"));
_employee.Add(Employee.CreateEmployee("Peter", "Piper"));
}
public List<Employee> GetEmployees()
{
return new List<Employee>(_employee);
}
}
And in the Model there is a method call CreateEmployee as such
public class Employee
{
public static Employee CreateEmployee(string firstName, string lastName)
{
return new Employee { FirstName = firstName, LastName = lastName };
}
public string FirstName { get; set; }
public string LastName { get; set; }
}
So I thought I would add a button to the MainWindow and then add another name to the list. Hopping the view would update as an item is updated. Just to see if it would work I just used the code behind.
I thought I could just add a new employee the same way I did in the EmployeeRepository so I tried this
readonly List<Employee> _employee = new List<Employee>();
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
_employee.Add(Employee.CreateEmployee("John", "Smith"));
}
I have tried many many ways of doing this, to no avail. I have watched and read many tutorials and questions, but nothing that I have tried as worked.
What am I missing? I initially thought that it was not working because I am adding the item to the List in the repository, but not to the ObservableCollection that is in the viewmodel. And the AllEmployees ObservableCollection is the ItemSource for view.
readonly EmployeeRepository _employeeRepository;
public ObservableCollection<Model.Employee> AllEmployees
{
get;
private set;
}
public EmployeeListViewModel(EmployeeRepository currentWindowRepository)
{
if (currentWindowRepository == null)
{
throw new ArgumentException("currentWindowRepository");
}
_employeeRepository = currentWindowRepository;
this.AllEmployees = new ObservableCollection<Model.Employee>(_employeeRepository.GetEmployees());
}
But in the button code I tried to implement something similar, but no.
I can also add the view xaml code and MainViewModel codes so that you can see how it's all bound if you like.
Thanks in advance for any help!

You can't do it in "one operation".
When you add a new Employee in the UI, you first need to instantiate your Employee class and add it to the observable collection.
If in valid state, then persist it to in the repository.
private ICommand addEmployeeCommand;
public ICommand AddEmployeeCommand { get { return addEmployeeCommand; } }
public ObservableCollection<Employee> Employees { get; protected set; }
private void AddEmployee()
{
// Get the user input that's bound to the viewmodels properties
var employee = Employee.Create(FirstName, LastName);
// add it to the observable collection
// Note: directly using model in your ViewModel for binding is a pretty bad idea, you should use ViewModels for your Employees too, like:
// Employee.Add(new EmployeeViewModel(employee));
Employees.Add(employee);
// add it to the repository
this.employeeRepository.AddOrUpdate(employee);
}
// in constructor
this.addEmployeeCommand = new DelegateCommand(AddEmployee, CanExecuteAddEmployee);
As noted, avoid directly using your model inside the ViewModel bindings, it has several disadvantages, like you view now depend on your viewmodel. each and every change in the model needs to be reflected in the view, this beats the purpose of a viewmodel which is meant to decouple view, viewmodel and model.
Another disadvantage is, that typically your models are do not implement INotifyPropertyChanged and this will cause memory leaks in the view.

In your EmployeelistViewModel you are creating ObservableCollection , and you think that it will get repopulated automatically upon addition/deletion of employees. secondly in your GetEmployees method you are creating a new list. you should use obser.coll directly in place of List (_employee). And return this ocoll from your method.

One solution to this is to add INPC to your models and to then have your view models watch their models and update themselves accordingly i.e. something like this:
public class MyListType
{
// some data
}
public class MyModel
{
public IList<MyListType> MyListItems { get; set; }
public MyModel()
{
this.MyListItems = new ObservableCollection<MyListType>();
}
}
public class MyListTypeViewModel : ViewModelBase
{
public MyListType Model {get; set;}
// INPC properties go here
}
public class MyViewModel
{
public IList<MyListTypeViewModel> MyListItemViewModels { get; set; }
public MyViewModel(MyModel model)
{
(model.MyListItems as INotifyCollectionChanged).CollectionChanged += OnListChanged;
// todo: create initial view models for any items already in MyListItems
}
private void OnListChanged(object sender, NotifyCollectionChangedEventArgs e)
{
// create any new elements
if (e.NewItems != null)
foreach (MyListType item in e.NewItems)
this.MyListItemViewModels.Add(new MyListTypeViewModel{Model = item});
// remove any new elements
if (e.OldItems != null)
foreach (MyListType item in e.OldItems)
this.MyListItemViewModels.Remove(
this.MyListItemViewModels.First(x => x.Model == item)
);
}
Now your list of view models will automatically stay synched with your list of models. The main problem with this approach is that your models will typically originate from your ORM (database) code, so you will need to work with whatever framework you're using to inject INPC at creation time e.g. if you're using NHibernate then you'll need to use a binding interceptor for INPC and a collection convention to make the lists ObservableCollections.

Passing DataContext between windows in MVVM

On the main window onClick I have
AddNoticeAboutWrongCity addNoticeAboutWrongCity = new AddNoticeAboutWrongCity();
addNoticeAboutWrongCity.DataContext = ((VerificationViewModule)this.DataContext).WrongCityNotice;
addNoticeAboutWrongCity.ShowDialog();
At popup window there a lot of textboxes and two buttons
Delete object:
this.DataContext = null;
And second option "Save edited notice" which is not usable , because every change of user affection datacontext on main window,and this is demand from design department :)
I don't know why first option(it's "implementation" doesn't work.
Second explanation:
On the ParentWindow I have list of Notices and I can click EditSelectedNotice.
On the EditNoticeWindow I can edit Notice or delete Notice.
Editinig works(After closing EditNoticeWindow I see changed notice on the ParentWindow), but deleting doesn't (Notice is still in collection - on control and in this.DataContext)
My ViewModel:
class VerificationViewModule
{
public ObservableCollection<ReporterNotice> ReporterNotices { get; set; }
public ReporterNotice OtherNotice
{
get
{
return ReporterNotices.Where(n => n.Type == ReporterNoticeType.Other).FirstOrDefault();
}
}
public ReporterNotice DuplicateNotice
{
get
{
return ReporterNotices.Where(n => n.Type == ReporterNoticeType.Duplicate).FirstOrDefault();
}
}
public ReporterNotice WrongCityNotice
{
get
{
return ReporterNotices.Where(n => n.Type == ReporterNoticeType.WrongCity).FirstOrDefault();
}
set { if(value==null)
{
ReporterNotices.Remove(ReporterNotices.Where(n => n.Type == ReporterNoticeType.WrongCity).First());
}
else
{
if (ReporterNotices.Where(n => n.Type == ReporterNoticeType.WrongCity).FirstOrDefault()==null)//there is always only max one instance of this type of notice
{
ReporterNotices.Add(value);
}
else
{
var c = ReporterNotices.Where(n => n.Type == ReporterNoticeType.WrongCity).First();
c = value;
}
}}
}
public VerificationViewModule()
{
ObservableCollection<ReporterNotice> loadedReporterNotices = new ObservableCollection<ReporterNotice>();
loadedReporterNotices.Add(new ReporterNotice() { Content = "Dublic", Type = ReporterNoticeType.WrongCity });
loadedReporterNotices.Add(new ReporterNotice() { Content = "Hilton", Type = ReporterNoticeType.Duplicate });
loadedReporterNotices.Add(new ReporterNotice() { Content = "Another notice", Type = ReporterNoticeType.Other });
ReporterNotices = loadedReporterNotices;
}
}

You can try the following. Implement the mediator to display windows and make sure that you use view models for the DataContext for both the main and edit windows. It is important to tell the main view model that the object is being deleted. This is done via a callback and routing that through a command on the EditNoticeViewModel
//This viewmodel is on the main windows datacontext
public class ParentViewModel
{
private readonly IWindowMediator _mediator;
public ParentViewModel(IWindowMediator mediator)
{
_mediator = mediator;
}
public ObservableCollection<Notice> Notices { get; private set; } //bound to list in xaml
public void OpenNotice(Notice notice)
{
//open the window using the Mediator pattern rather than a new window directly
_mediator.Open(new EditNoticeViewModel(notice, DeleteNotice));
}
private void DeleteNotice(Notice notice)
{
//This will remove it from the main window list
Notices.Remove(notice);
}
}
//view model for EditNoticeWindow
public class EditNoticeViewModel
{
public EditNoticeViewModel(Action<Notice> deleteCallback, Notice notice)
{
Model = notice;
DeleteCommand = new DelegateCommand((a) => deleteCallback(Model));
}
//Bind in xaml to the Command of a button
DelegateCommand DeleteCommand { get; private set; }
//bound to the controls in the xaml.
public Notice Model { get; private set; }
}
//This is a basic interface, you can elaborate as needed
//but it handles the opening of windows. Attach the view model
//to the data context of the window.
public interface IWindowMediator
{
void Open<T>(T viewModel);
}
Depending on implementation you might want to close the view when the delete button gets pushed. You can do this by implementing something like the as described here with respect to WorkspaceViewModel

Why don't you wrap the WrongCityNotice in a viewModel implementing IReporterNotice and having a reference to the parent viewmodel and a Delete method:
public void Delete() { _parentvm.Delete(_wrongCityNotice); }
You can use this wrapper as DataContext.

You're trying to destroy the DataContext. C# doesn't work that way. Setting an object reference to null doesn't delete the object, it only removes the reference to it. (When nothing references an object anymore it gets garbage collected, but you can't destroy an object directly).
DataContext = null only means that locally your DataContext doesn't point to any object any more. The main view model still has a reference however so nothing changes there. You'll have to ask the main view model to remove the notification from it's collection (probably through a callback method (Action) is best so you don't have to know about the parent view model).