DotVVM - Add Shortcuts To Your Buttons And Links

As developers we are used to using shortcuts while writing code. The most famous shortcut for developers and non-developers is CTRL+S for the save command, CTRL+C for the copy command and CTRL+V for the paste command.

 

If you would like to add command shortcuts to your web application you need to write a massive JavaScript code but with DotVVM it is just a matter of one line in your markup file.

 

One of the available controls in DotVVM Business Pack is CommandShortcut control which allows you to assign shortcut keys to commands in your web application. Let's see how we can achieve it.

 

CommandShortcut Control

 

It is an invisible DotVVM control which lives in the DotVVM.BusinessPack.Controls namespace and allows us to trigger a command  in a viewmodel for a key shortcut.

 

You can create different combinations of the shortcut using CTRL, Shift, Alt, and Key properties of the CommandShortcut control.

1. Open your Visual Studio and create new DotVVM Web Application.
2. In Custom Your DotVVM Project, check DotVVM Business Pack and Sample CRUD Page checkboxes.
   
   
   
   Note
   You must have a valid license to be able to check DotVVM Business Pack checkbox otherwise it will be disabled.
   
   
3. Open DotVVMStartup.cs and add the below line to ConfigureServices() method if doesn’t exist.
   

   options.AddBusinessPack();

4. Build and run your application. In the Home page you will see a New Item button that we want to create a shortcut key for.
   
   
5. Open Default.dothtml file and add the below lines where we add CommandShortcut control and create a new shortcut using CTRL+ALT+N combination.
   

   <bp:CommandShortcut Ctrl="true"
                       Shift="false"
                       Alt="true"
                       Key="N"
                       Command="{command: NewItem()}" />

6. Open ViewModels/DefaultViewModel.cs file and add NewItem() method that redirects to the CRUD_Create route
   

   public void NewItem()
   {
      Context.RedirectToRoute("CRUD_Create");
   }

   Note
   Here we added a new method just for redirecting to CRUD_Create route because RouteLink doesn’t have command property. Another workaround is replacing RouteLink control with Button control.
7. Build and run your solution.
8. Press CTRL+ALT+N to redirect to create view.

Summary

 

In this article we saw how to create a shortcut key to command using CommandShortcut control which is part of DotVVM Business Pack.

 

You can find the full code on Github.