oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

The Three Faces of ASP.NET AJAX
Pages: 1, 2, 3, 4, 5, 6

Implementing the Functionality

Open the Extender file, ChangeAwareButtonExtender.vb. You will see there are several attributes decorating the ChangeAwareButtonExtender class, including one called TargetControlType. In the boilerplate, the type of the target control is Control, meaning any type of control will qualify. Change this to TextBox to limit the target types to TextBoxes, as shown in the highlighted code in the following snippet:

<Designer(GetType(ChangeAwareButtonDesigner))> _
<ClientScriptResource("ChangeAwareButton.ChangeAwareButtonBehavior", _
    "ChangeAwareButton.ChangeAwareButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class ChangeAwareButtonExtender
    Inherits ExtenderControlBase

Rename the default property name MyProperty to something more meaningful, such as TargetButtonID. This must be changed in three places in the Extender file, ChangeAwareButtonExtender.vb, and in five places in the JavaScript Behavior file, ChangeAwareButtonBehavior.js.

When doing the search and replace, do not match whole words only, since you need to replace this._MyPropertyValue with this._TargetButtonIDValue.

Add a second property, ButtonText, that will allow you to dynamically set the text on the button. In order to add a property to an AJAX control extender, you must modify two files in synchrony: the JavaScript Behavior file and the VB Extender file.

First add the following public string property definition to ChangeAwareButtonExtender.vb:

<ExtenderControlProperty()> _
<DefaultValue("")> _
Public Property ButtonText() As String
        Return GetPropertyValue("ButtonText", "")
    End Get
    Set(ByVal value As String)
        SetPropertyValue("ButtonText", value)
    End Set
End Property

Even though VB is not normally case-sensitive, in this case the property name is case-sensitive because it must correspond exactly with the property name in the JavaScript file.


This extender will extend the text box, but it will reference the button. To make that clear to the framework, there is a special attribute, IDReferenceProperty, that you must attach to the TargetButtonID property to signal that it is the button that is referenced.

<ExtenderControlProperty()> _
<DefaultValue("")> _
<IDReferenceProperty(GetType(Button))> _
Public Property TargetButtonID() As String
        Return GetPropertyStringValue("TargetButtonID")
    End Get
    Set(ByVal value As String)
        SetPropertyValue("TargetButtonID", value)
    End Set
End Property

Having set up the VB, it is time to set up the corresponding JavaScript. Open the behavior file, ChangeAwareButtonBehavior.js and add the one line of code to the ChangeAwareButton.ChangeAwareButtonBehavior function (the last line in the method; we are defining a new member variable to hold the property value for the button's text value).

ChangeAwarebutton.ChangeAwarebuttonBehavior = function(element) 
    ChangeAwarebutton.ChangeAwarebuttonBehavior.initializeBase(this, [element]);
    this._TargetButtonIDValue = null;
    this._ButtonTextValue = null;  // we added this line

We'll need accessor functions for the new property as well. The following lines of code get and set the value for _ButtonTextValue:

get_ButtonText : function() 
    return this._ButtonTextValue;
set_ButtonText : function(value) 
    this._ButtonTextValue = value;

You can place these either above or below the existing accessors for the TargetButtonID.

Finally, and this is (you should pardon the pun) key to our extender, we want to implement a client-side method to respond to the keyup event in the TextBox control. There is no server-side keyup event, but there is one for the client side, which is what makes AJAX so powerful. Unfortunately, Microsoft does not provide access to this event in any of its extenders, which, after all, is why we are writing our own extender.

We do this as classic JavaScript, putting the declaration in the prototype section, where you find the comment "Add your initialization code here."

$addHandler(this.get_element(), 'keyup',
   Function.createDelegate(this, this._onkeyup));

Put the method itself inside the class, just below the definition of the dispose method,

_onkeyup : function() 
    // set a local variable to represent the button
    var e = $get(this._TargetButtonIDValue);
    if (e)    // if we got the button
        // set the variable disabled to whether the text box is empty
        var disabled = (this.get_element().value == "");
        // set the button disabled to the value of the variable
        e.disabled = disabled;
        // if the button has text...
        if (this._ButtonTextValue) 
            // if the button is disabled
            if (disabled) 
                // set the control's old value to the current value
                this._oldValue = e.value;
                // set the current value to the button's text value
                e.value = this._ButtonTextValue;
            else // if the button is not disabled
                if (this._oldValue) // if there is an old value
                    // set the text to the old value
                    e.value = this._oldValue;
                }   // end if _oldvalue
            }       // end else
        }           // end if TextValue
    }               // end if e
},                  // end on key up function

Pages: 1, 2, 3, 4, 5, 6

Next Pagearrow