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


Example: Block (disable) an HTML element


Example: Enables the previously blocked element or page:



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

  elm: '#MySection',
  busy: true

The resulting UI will look like below:



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

Example: Block with busy


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

Was this page helpful?
Please make a selection.
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
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.