Author : MD TAREQ HASSAN | Updated : 2021/01/15

accesskey Attribute

<button type="submit" class="btn btn-success" accesskey="h">Fetch Repositories</button>

Nuget package installation

Dependency njection in Program class

Program.cs

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Net.Http;
using System.Threading.Tasks;
using Toolbelt.Blazor.Extensions.DependencyInjection;

namespace Foo
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);

            builder.Services.AddHotKeys(); // <-----------------

            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            await builder.Build().RunAsync();
        }
    }
}

Implement IDisposable in code behind class

Index.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System;
using Toolbelt.Blazor.HotKeys;
using System.Diagnostics;

namespace Foo.Pages
{
    public class IndexBase : ComponentBase, IDisposable
    {

        protected override void OnInitialized()
        {
            // ... ... ...
        }

        protected void OnValidSubmission(EditContext editContext)
        {
            // ... ... ...
        }

        public void Dispose()
        {
            //throw new NotImplementedException();
        }
    }
}

Inject HotKeys

Index.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System;
using Toolbelt.Blazor.HotKeys;
using System.Diagnostics;

namespace Foo.Pages
{
    public class IndexBase : ComponentBase, IDisposable
    {
        [Inject]
        protected HotKeys HotKeys { get; set; }

        protected override void OnInitialized()
        {
            // ... ... ...
        }

        protected void OnValidSubmission(EditContext editContext)
        {
            // ... ... ...
        }


        public void Dispose()
        {
            //throw new NotImplementedException();
        }
    }
}

HotKeysContext

Index.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System;
using Foo.Models;
using Toolbelt.Blazor.HotKeys;
using System.Diagnostics;

namespace Foo.Pages
{
    public class IndexBase : ComponentBase, IDisposable
    {
        [Inject]
        protected HotKeys HotKeys { get; set; }

        protected HotKeysContext HotKeysContext;

        protected override void OnInitialized()
        {
            this.HotKeysContext = this.HotKeys.CreateContext()
              .Add(ModKeys.Ctrl, Keys.H, OnSubmitByShortcut, "Submit by keyboard shortcut");
        }

        protected void OnValidSubmission(EditContext editContext)
        {

        }

        protected void OnSubmitByShortcut()
        {

        }

        public void Dispose()
        {
            //throw new NotImplementedException();
            this.HotKeysContext.Dispose();
        }
    }
}

Complete code

Models

using System.ComponentModel.DataAnnotations;

namespace Foo.Models
{
    public class GithubUserCredential
    {
        [Required]
        [StringLength(50)]
        [Display(Name = "Github Id")]
        public string RepositoryId { get; set; } = "hovermind";
        public string FetchLimit { get; set; }
    }
	
    public class GithubUserDetails
    {
	
    }
}

Index.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System;
using Foo.Models;
using Toolbelt.Blazor.HotKeys;
using System.Diagnostics;

namespace Foo.Pages
{
    public class IndexBase : ComponentBase, IDisposable
    {
        [Inject]
        protected HotKeys HotKeys { get; set; }

        protected HotKeysContext HotKeysContext;

        protected GithubUserCredential GithubUserCredential { get; set; }
        protected GithubUserDetails GithubUserDetails { get; set; }

        protected override void OnInitialized()
        {
            GithubUserCredential = new GithubUserCredential();
            this.HotKeysContext = this.HotKeys.CreateContext()
              .Add(ModKeys.Ctrl, Keys.H, OnSubmitByShortcut, "On submit by keyboard shortcut");
        }

        protected void OnValidSubmission(EditContext editContext)
        {

            Debug.WriteLine($"ID: {GithubUserCredential.RepositoryId}");

        }

        protected void OnSubmitByShortcut()
        {
            if (String.IsNullOrWhiteSpace(GithubUserCredential.RepositoryId))
            {
                Debug.WriteLine("No ID entered");
            }
            else
            {
                Debug.WriteLine($"ID: {GithubUserCredential.RepositoryId}");
            }
        }

        protected void OnInValidSubmission(EditContext editContext)
        {
            // ... ... ...
        }

        public void Dispose()
        {
            //throw new NotImplementedException();
            this.HotKeysContext.Dispose();
        }
    }
}

Index.razor

@page "/"
@inherits IndexBase

<EditForm Model="@GithubUserCredential" OnValidSubmit="@OnValidSubmission" OnInvalidSubmit="@OnInValidSubmission">

    <DataAnnotationsValidator />

    <div class="form-group row mb-0">

        <label for="@nameof(GithubUserCredential.RepositoryId)" class="col-sm-2  text-right pr-1 my-auto">Github ID</label>

        <InputText id="@nameof(GithubUserCredential.RepositoryId)" @bind-Value="@GithubUserCredential.RepositoryId" class="col-sm-6 form-control" />

    </div>

    <div class="row mt-0">
        <div class="col-sm offset-sm-2 px-0">
            <ValidationMessage For="() => GithubUserCredential.RepositoryId" />
        </div>
    </div>

    <div class="form-group row mt-2">

        <label for="@nameof(GithubUserCredential.FetchLimit)" class="col-sm-2  text-right pr-1 my-auto">Repo. Count</label>

        <InputText id="@nameof(GithubUserCredential.FetchLimit)" @bind-Value="@GithubUserCredential.FetchLimit" class="col-sm-6 form-control" />

    </div>

    <div class="row mt-2">
        <div class="col-sm p-0 my-auto offset-sm-2">
            <button type="submit" class="btn btn-success">Fetch Repositories</button>
        </div>
    </div>

</EditForm>