Author : MD TAREQ HASSAN | Updated : 2021/01/15
accesskey Attribute
- https://webaim.org/techniques/keyboard/accesskey
- Common Windows Browsers:
Alt + [the accesskey]
orShift + Alt + [the accesskey]
<button type="submit" class="btn btn-success" accesskey="h">Fetch Repositories</button>
Nuget package installation
Install-Package Toolbelt.Blazor.HotKeys
- ` dotnet add package Toolbelt.Blazor.HotKeys`
- Github Repo: https://github.com/jsakamoto/Toolbelt.Blazor.HotKeys
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
- Create
OnSubmitByShortcut()
function - Dispose 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>