Blazor UI: Block/Busy Service

UI Block disables (blocks) the page or a part of the page.

Quick Example

Simply inject IBlockUiService to your page or component and call the Block/UnBlock method to disables (blocks) the element.

namespace MyProject.Blazor.Pages { public partial class Index { private readonly IBlockUiService _blockUiService; public Index(IBlockUiService _blockUiService) { _blockUiService = blockUiService; } public async Task BlockForm() { /* Parameters of Block method: selectors: A string containing one or more selectors to match. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors busy : Set to true to show a progress indicator on the blocked area. */ await _blockUiService.Block(selectors: "#MySelectors", busy: true); } } } 

The resulting UI will look like below:

Then you can use _blockUiService.UnBlock() to re-enable the busy area/page.