MAUI with MVVM - How Do I implement a Submit method in a 'details' page? - mvvm

Question

I am new to MVVM and MAUI, and I am quite a bit confused now.
This is the situation - I will explain it as well as I can:
In my main page I have a CollectionView with frames etc., and in each frame I show a picture of some CAR object. On clicking on a frame I execute the command
[RelayCommand]
private async Task GoToCarsDetails(Car car)
{
if (car == null)
return;
await Shell.Current.GoToAsync(nameof(CarPage), true, new Dictionary<string, object>
{
{"Car", car}
});
}
In my CarPage.xaml, which I reach with the method above, I have a grid which contains this xaml:
<Label
x:Name="Description"
Grid.Row="2"
Style="{StaticResource MediumLabelCentered}"
Text="{Binding Car.Description, StringFormat='Description: {0}'}" />
<Label
x:Name="Color"
Grid.Row="3"
Style="{StaticResource MediumLabelCentered}"
Text="{Binding Car.Color, StringFormat='Color: {0}'}" />
and also an Editor to be able to change the Description, a Picker to be able to change the Color, and a Submit button.
I want to allow the user to set some description and a color, and this should NOT immediately change the CAR object passed as param to the method Shell.Current.GoToAsync - they should only be changed when clicking on the submit button - if the user changes for instance the color from the initial Red to Blue, but does NOT click the Submit button and goes back to the previous screen (Main) instead, the property Color should NOT have changed - it should still show "Red".
So, for instance, let's say that for some car I have the
Color = RED, and
Description = "My Car"
Click on that car, go to the CarPage.xaml, see in the Picker the color set to RED and the description in the editor = "My Car", change those to BLUE and "Your Car", respectively, and navigate away without clicking on the Submit button. The initial car should still show
Color = RED, and
Description = "My Car"
(no change).
Do the same thing as above but this time click on the submit button. This should take us to the previous page (Main), and see that the initial car now shows
Description = "Your Car", and
Color = BLUE
My problem is this:
If I BIND the controls, as seen in the xaml above, then any change on those Editor and Picker will already change the underlying Car object, and then the Submit button has no meaning anymore. If I click on it or not, that makes no difference - the Car object already contains those changes.
If instead of opening the CarPage.xaml page with the Car object I open it with a clone, with the intention of allowing the user wo freely play on the clone object, by passing a clone object
car.Clone<Car>()
(I have created an extension method for that). I can now indeed change the Clone's properties all I want, but then how do I replace on Submit the object CAR with the object CARCLONE ? The code for that Submit button exists either in the code-behind of the CarPage.xaml object, either in the CarViewModel class. In neither object do I have access to both CAR and CARCLONE, to be able to switch them.
I cannot switch these two objects (the original CAR object with the changed CARCLONE object) in the MainViewModel's GoToCarsDetails method
private async Task GoToCarsDetails(Car car)
either, because this method calls Shell.Current.GoToAsync in an async way, and I cannot add the code which would switch objects after the Shell.Current.GoToAsync call, because the code will not wait for the CarPage to be closed.
I also thought of passing the real CAR object as param, NOT binding the two labels above, play with the controls, and populate the CAR object with the updated properties only in Submit_Click().... But how do I set, on opening the CarPage page, the Text of the two labels ? (Is there a Load() event ? I couldn't find one). Writing such code in the constructor does not work (it gives me a null reference).
So... I don't know how do do this seemingly very simple task:
Pass an object to a Details form, allow it to be changed, but actually update it to our collection in Main only if the user has clicked on the submit button in that Details page (CarPage, that is), all by not violating the MVVM ideas.
Thank you very much.
Alex

Answer 1

There is a standard mechanism, in any language, for dealing with situations like this: a "callback".
Think about "Responsibilities". The main page (and its viewmodel) is responsible for managing the Car objects.
You want somewhere else to work with a Car object, but that "somewhere else" [I'll call it CarEditor] isn't the place that should deal with the consequences of modifying a Car.
So what do you want to pass in? A Car. What do you want to do on Submit_Click? Something that CarEditor doesn't need to know about. It should hand all the information "back" (via the callback action) to somewhere that has the responsibility to act on the result.
As Jason suggested, one way to do this is to have a clone of Car. Then pass back both original and clone. This could be done as (Car original, Car clone).
Calling code:
Car original = ...;
Editor.EditThis(original, ProcessTheEdit);
...
void ProcessTheEdit(Car original, Car clone)
{
}
Editor code:
public delegate void CallbackDlg(Car original, Car clone);
public void EditThis(Car original, CallbackDlg callback)
{
Car clone = new Car();
//... do work.
callback(original, clone);
}

Answer 2

I have followed your advice, and here it is:
[RelayCommand]
private async Task GoToCarsDetails(Car car)
{
Car carClone = car.Clone();
await Shell.Current.GoToAsync(nameof(CarPage), true, new Dictionary<string, object>
{
{"Car", car},
{"CarClone", carClone}
});
}
CarPage has the controls bound to CarClone.
On the Submit button in the ViewModel I have:
[RelayCommand]
private void Submit()
{
Car = carClone.Clone();
Shell.Current.GoToAsync("../", true);
}
If I change the color from the initial RED to YELLOW and I set a breakpoint on the Shell line, I see that indeed Car now has the color property = YELLOW.
Good.
However, if I click again on the same car, the CarPage view opens again with Color = RED, which is not correct. I have changed that Car object to have the color set to Yellow, right ? The Cars collection in this MainViewModel shows as unchanged !
I don't understand - I have passed the Car object to the "Details" CarView page and I have changed it from Red to Yellow, and yet... it is still Red. It's like I have passed the Car object Byval and not Byref.... :-(
Thank you,
Alex