Auto focus an input in a Blazor form - Gérald Barré

When a user open a web page that contains a form, they expect the first input to be focused so they can start typing. In an html page, you can use the autofocus attribute. However, the browser only check this attribute the first time the page is loaded. This means, this is not applicable in an SPA application without pre-rendering.

The workaround is to use the focus() function once the page is rendered to focus the desired element.

#Focus an element

First, you need to add the following JavaScript function to your project before the blazor script:

<script>
    function BlazorFocusElement(element) {
        if (element instanceof HTMLElement) {
            element.focus();
        }
    }
</script>
<script src="_framework/blazor.webassembly.js"></script>

Then, you can create an extension method to invoke this function:

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System.Threading.Tasks;

namespace AutoFocusBlazorApp
{
    public static class JSInteropFocusExtensions
    {
        public static ValueTask FocusAsync(this IJSRuntime jsRuntime, ElementReference elementReference)
        {
            return jsRuntime.InvokeVoidAsync("BlazorFocusElement", elementReference);
        }
    }
}

Now, you can use this method in a Blazor component by creating a reference to an element using @ref and using the Focus method on it:

@page "/"
@inject IJSRuntime JSRuntime

<EditForm Model="editItem">
    <input type="text" @ref="firstInput" />

    <button type="submit">submit</button>
</EditForm>

@code {
    private ElementReference firstInput;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Focus the element
            await JSRuntime.FocusAsync(firstInput);
        }
    }
}

#blazor #.net #asp.net core #web

What is GEEK

Buddha Community

Blazor for ASP.NET Web Forms Developers PDF

Blazor is a new web framework that changes what is possible when building web apps with .NET. It is also a client-side web UI framework based on C## instead of JavaScript. When paired with .NET running on the server, Blazor enables full-stack web development with .NET.

It also builds on the foundations of .NET Core to provide a modern and high-performance web development experience. Additionally, Blazor is a natural solution for ASP.NET Web Forms developers looking to take advantage of client-side development and the open-source, cross-platform future of .NET.

This e-book pdf covers the following ASP.NET Web Forms features and practices:-

• Building Blazor apps.
• How Blazor works.
• Blazor’s relation to .NET Core.
• Reasonable strategies for migrating existing ASP.NET Web Forms apps to Blazor where appropriate.
• A reference sample that demonstrates the migration strategies used.

#articles #asp.net #blazor #blazor for asp.net web forms #blazor for asp.net web forms developers #blazor web forms #convert web forms to blazor

Blazor from validation

#Blazor #Blazor tutorial #Blazor c# #Blazor core #Blazor form validation

Auto Saving Form Data in Blazor

I got tagged in a thread on Twitter last week by Mr Rockford Lhotka. I’ve embedded the thread below so you can read it for yourself, but essentially he was voicing his frustration
Now, this type of situation very much depends on the application and how it’s been developed, but, none the less, I agree. There is nothing worse than spending ages filling in a form and then for something to blow up and lose everything you’ve entered.

He and Dan Wahlin were discussing the idea of a form auto saving data so it could be recovered if something went wrong with the application. I got tagged by Rockford suggesting it would be a great addition to Blazored – Challenge accepted!

#blazor #blazor (webassembly) #blazor (server) #forms

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

https://youtu.be/5xG9J6OqdV8

#blazor #blazor tutorial #blazor crud #blazor api #blazor with asp.net core #blazor in c#

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

https://youtu.be/5xG9J6OqdV8

#blazor #blazor tutorial #blazor in c# #blazor crud #blazor webassembly #blazor with asp.net core