ASP.NET Core MVC / Razor Pages UI: JavaScript UI Block/Busy API

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

Basic Usage

Example: Block (disable) the complete page

abp.ui.block();

Example: Block (disable) an HTML element

abp.ui.block('#MyContainer');

Example: Enables the previously blocked element or page:

abp.ui.unblock();

Options

abp.ui.block() method can get an options object which may contain the following fields:

  • elm: An optional selector to find the element to be blocked (e.g. #MyContainerId). If not provided, the entire page is blocked. The selector can also be directly passed to the block() method as shown above.
  • busy: Set to true to show a progress indicator on the blocked area.
  • promise: A promise object with always or finally callbacks. This can be helpful if you want to automatically unblock the blocked area when a deferred operation completes.

Example: Block an element with busy indicator

abp.ui.block({
  elm: '#MySection',
  busy: true
});

The resulting UI will look like below:

ui-busy

setBusy

abp.ui.setBusy(...) and abp.ui.clearBusy() are shortcut functions if you want to use the block with busy option.

Example: Block with busy

abp.ui.setBusy('#MySection');

Then you can use abp.ui.clearBusy(); to re-enable the busy area/page.

Contributors


Last updated: October 17, 2020 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Building Modular Monolith Applications Using .Net and ABP Framework

17 Oct, 20:00
Online
Register Now
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More