Mar 5, 2008

expose event in asp.net ajax

  1. Create a method that adds an event handler.
  2. Create a method that removes an event handler.
  3. Create a method that is responsible for raising the event.
            Type.registerNamespace('Samples');

            Samples.Collection = function() {
            this._innerList = [];

            // Store an instance of Sys.EventHandlerList.
            this._events = null;
            }
            Samples.Collection.prototype = {
            // Add an item to the collection.
            add : function(member) {
            this._innerList.push(member);

            // Raise the itemAdded event.
            this._raiseEvent('itemAdded', Sys.EventArgs.Empty);
            },

            // Return the Sys.EventHandlerList instance.
            get_events : function() {
            if(!this._events) {
            this._events = new Sys.EventHandlerList();
            }

            return this._events;
            },

            // Add an handler for the itemAdded event.
            add_itemAdded : function(handler) {
            this.get_events().addHandler('itemAdded', handler);
            },

            // Remove an handler for the itemAdded event.
            remove_itemAdded : function(handler) {
            this.get_events().removeHandler('itemAdded', handler);
            },

            // Generic function to raise an event.
            _raiseEvent : function(eventName, eventArgs) {
            var handler = this.get_events().getHandler(eventName);

            if (handler) {
            if (!eventArgs) {
            eventArgs = Sys.EventArgs.Empty;
            }
            handler(this, eventArgs);
            }
            }
            }
            Samples.Collection.registerClass('Samples.Collection');
            

The same process applies to client components that want to expose events. The only difference is that you don't need to store an instance of Sys.EventHandlersList class in the constructor, because every component inherits it from the base Sys.Component class. You also inherit the get_events method shown above.

Additionally, components expose an event called propertyChanged that can be raised whenever the value of a property changes. This mechanism is useful because you don't have to expose and raise a custom event for each value you want to monitor. Instead you rely on the propertyChanged event, defined in the SysINotifyPropertyChange interface. Whenever the value exposed by a property changes, all you have to do is call the raisePropertyChanged method. This method accepts a string with the name of the property whose value has changed. Below is an example.

            Type.registerNamespace('Samples');
            Samples.Customer = function() {
            Samples.Customer.initializeBase(this);
            this._fullName;
            }
            Samples.Customer.prototype = {
            get_fullName : function() {
            return this._fullName;
            },
            set_fullName : function(value) {
            if(value != this._fullName) {
            this._fullName = value;
            this.raisePropertyChanged('fullName');
            }
            }
            }
            Samples.Customer.registerClass('Samples.Customer', Sys.Component);

            //at the client side you use the following code to subscribe the event as below.

            function pageLoad(sender, e) {
            var customer = new Samples.Customer();
            customer.add_propertyChanged(onPropertyChanged);
            customer.set_fullName('John Doe');
            }

            function onPropertyChanged(sender, e) {
            if(e.get_propertyName() == 'fullName') {
            alert('New value for the fullName property: ' +
            sender.get_fullName());
            }
            }