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

abp.event object is a simple service that is used to publish and subscribe to global events in the browser.

This API is not related to server side local or distributed events. It works in the browser boundaries to make the UI components (code parts) communicate in a loosely coupled way.

Basic Usage

Publishing Events

Use abp.event.trigger to publish events.

Example: Publish a Basket Updated event

abp.event.trigger('basketUpdated');

This will trigger all the subscribed callbacks.

Subscribing to the Events

Use abp.event.on to subscribe to events.

Example: Consume the Basket Updated event

abp.event.on('basketUpdated', function() {
  console.log('Handled the basketUpdated event...');
});

You start to get events after you subscribe to the event.

Unsubscribing from the Events

If you need to unsubscribe from a pre-subscribed event, you can use the abp.event.off(eventName, callback) function. In this case, you have the callback as a separate function declaration.

Example: Subscribe & Unsubscribe

function onBasketUpdated() {
  console.log('Handled the basketUpdated event...');
}

//Subscribe
abp.event.on('basketUpdated', onBasketUpdated);

//Unsubscribe
abp.event.off('basketUpdated', onBasketUpdated);

You don't get events after you unsubscribe from the event.

Event Arguments

You can pass arguments (of any count) to the trigger method and get them in the subscription callback.

Example: Add the basket as the event argument

//Subscribe to the event
abp.event.on('basketUpdated', function(basket) {
  console.log('The new basket object: ');
  console.log(basket);
});

//Trigger the event
abp.event.trigger('basketUpdated', {
  items: [
    {
      "productId": "123",
      "count": 2
    },
    {
      "productId": "832",
      "count": 1
    }
  ]
});

Multiple Arguments

If you want to pass multiple arguments, you can pass like abp.event.on('basketUpdated', arg0, arg1, agr2). Then you can add the same argument list to the callback function on the subscriber side.

Tip: Alternatively, you can send a single object that has a separate field for each argument. This makes easier to extend/change the event arguments in the future without breaking the subscribers.

Contributors


Last updated: October 15, 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, 17: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