MvvmCross url navigation navigates to wrong ViewModel

Question

I'm working on a mobile app that uses Xamarin Classis UI with MvvmCross 5.6.x and we are looking to leverage the url base navigation to add deeplinking to the app. We would like to follow the same url scheme as the customers website so urls can be shared for navigating to specific content in both. For example the following two urls should navigate as described:

http://www.rseg.net/rewards should navigate to a list of loyalty rewards http://www.rseg.net/rewards/1234 should display details about a specific reward

I've setup the following two view model to be the targets of the urls:

[assembly: MvxNavigation(typeof(RewardsViewModel),
    @"http://www.rseg.net/rewards")]
namespace MvvmNav.Core.ViewModels
{
    public class RewardsViewModel : MvxViewModel
    {
       …
    }
}

and

[assembly: MvxNavigation(typeof(RewardDetailViewModel),
    @"http://www.rseg.net/rewards/(?<id>[0-9]{4})$")]
namespace MvvmNav.Core.ViewModels
{
    public class RewardDetailViewModel :
        MvxViewModel<RewardDetailViewModel.Parameteres>
    {
        …
    }
}

I've added the following two commands an initial view model.

public IMvxAsyncCommand ShowRewardsByUrl { get; protected set; }
protected async Task ShowRewardsByUrlHandler()
{
    var url = "http://www.rseg.net/rewards";

    if (await _navigationService.CanNavigate(url))
        await _navigationService.Navigate(url);
}

public IMvxAsyncCommand ShowRewardDetailByUrl { get; protected set; }
protected async Task ShowRewardDetailByUrlHandler()
{
    var url = "http://www.rseg.net/rewards/1234";

    if (await _navigationService.CanNavigate(url))
        await _navigationService.Navigate(url);
}

The behavior I see is that both commands end up navigating to the RewardsViewModel rather than the second command navigating to the RewwardDetailViewModel; Is there a way to specify the navigation urls so that I can achieve the behavior I described above?

The entire example can be downloaded from GitHub https://github.com/rsegtx/So.MvvmNav; I've only completed the views for the Android app.

Thanks in Advance.

fmaccaroni fmaccaroni · Accepted Answer · 2018-02-01T15:37:47

I think you need a Navigation facade for that to work and change both ViewModels' routes to @"http://www.rseg.net/rewards(/(?<id>[0-9]{4}))?$" too:

[assembly: MvxRouting(typeof(SimpleNavigationFacade), @"http://www.rseg.net/rewards(/(?<id>[0-9]{4}))?$")]
namespace *.NavigationFacades
{
    public class SimpleNavigationFacade
        : IMvxNavigationFacade
    {
        public Task<MvxViewModelRequest> BuildViewModelRequest(string url,
            IDictionary<string, string> currentParameters, MvxRequestedBy requestedBy)
        {
            var viewModelType = typeof(RewardsViewModel);
            if(currentParameters.TryGetValue("id", out string paramId) && !string.IsNullOrEmpty(paramId))
                viewModelType = typeof(RewardDetailViewModel);

            return Task.FromResult(new MvxViewModelRequest(viewModelType, string.IsNullOrEmpty(paramId) ? new MvxBundle() : new MvxBundle(currentParameters), null));
        }
    }
}

HIH

MvvmCross url navigation navigates to wrong ViewModel

1 Answers