Blazor: Code Behind HotKey Navigation

[lachlanwgordon]

This feature is basically the same as in Xamarin Forms. Alt+Shift+2 should take you to a .razor.cs, Alt+Shift+3 should take you to a .razor and if a ViewModel can be found Alt+Shift+1 should take you there.

The MVVM pattern is not as widely accepted in the Blazor community as it is in Xamarin.Forms so you can't make all the same assumptions.

There is also no baked in concept of a BindingContext on a page as there is in Forms, you just need to have a variable called Binding, or VM etc. Detecting a ViewModel would probably need to be based on naming convention or you could perhaps look through the View code for a class that is often bound or has a suggestive name.

[matthewrdev]

@lachlanwgordon Can you link me to a sample project (EG: Microsofts docs etc) that I can use as a basis for this feature?

[ravero]

This could also be easily adapted to support razor pages with models in plain ASP.NET Core projects.

[lachlanwgordon]

@matthewrdev here's a link to a basic repo I'm put together.

https://github.com/lachlanwgordon/BasicBlazor

It has sample of using WASM, Server Side and Hosted WASM. Each from dotnet new with minimal changes. Documentation for the first 2 are in the Get Started Docs https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=netcore-cli and this blog talks about hosted WASM with PWA https://devblogs.microsoft.com/visualstudio/building-a-progressive-web-app-with-blazor/.

In the WASM Project I've split the Counter page into a View, Code Behind and ViewModel. In the Server version I've just split it into View and Code behind. In hosted WASM I've left as it is found in file>New, so you can play with the three approaches.

I'll add to this repo if samples are needed for any other Blazor cards I open. I'm happy to add you two to the repo if you like or accept pull requests.

@ravero I don't have a lot of experience with Razor pages outside of Blazor, but I think regardless of whether you're using PageModels or Code Behind, it follows the same pattern of having the same file name but with .cshtml.cs/.razor.cs. So if you just work off file names it would need no changes.

If you're actually analysing the code in one situation I suppose you look for the partial declaration and in the other you look for the type with @model next to it.

[matthewrdev]

Progress Update

I've now built the relevant APIs to handle this behaviour (known internally as relational navigation) and have ported the existing XAML MVVM navigation to the relational navigation APIS.

I've defined the RazorRelationalNavigationHandler and am currently working on it's implementation. @lachlanwgordon I'll let you know when this is ready to go.

[matthewrdev]

@lachlanwgordon This is now done:

[matthewrdev]

@lachlanwgordon This will be published in MFractor 4.2.2 for both Mac and Windows. Closing this ticket.