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

vcp.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 vcp.event.trigger to publish events.

Example: Publish a Basket Updated event

vcp.event.trigger('basketUpdated');

This will trigger all the subscribed callbacks.

Subscribing to the Events

Use vcp.event.on to subscribe to events.

Example: Consume the Basket Updated event

vcp.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 vcp.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
vcp.event.on('basketUpdated', onBasketUpdated);

//Unsubscribe
vcp.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
vcp.event.on('basketUpdated', function(basket) {
  console.log('The new basket object: ');
  console.log(basket);
});

//Trigger the event
vcp.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 vcp.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.