Creating an ASP.NET AJAX Control Extender Using VS 2008

• Download source code - 38.2 KB

Introduction

ASP.NET AJAX Extender controls add features (usually AJAX or JavaScript support) to existing controls already declared on a page. With VS 2005, you had to manually wire-up control extenders yourself (either via source-view or via the property grid). This is not necessary with the newly released VS 2008, and can be done easily using the "Add Extender" feature. The following example demonstrates the addition of AJAX support to a TextBox in VS 2008.

Using the code

Step 1: Create a simple ASP.NET website using the VS 2008 templates by accepting defaults at a suitable location.

Step 2: Add a new project using File->Add->New Project->Visual C# -> ASP.NET AJAX Server Control Extender, as shown:

Step 3: Modify ExtenderControl1.cs as follows. Add the following attributes to the ExtenderControl1 class:

[
    TargetControlType(typeof(TextBox))
]

[
    DefaultProperty("Contacts"),
    ParseChildren(true, "Contacts"),
    ToolboxData(
      "<{0}:QuickContacts runat=\"server\"> </{0}:QuickContacts>")
]

Step 4: Add a property as follows to the ExtenderControl1 class:

private ArrayList contactsList;
[
Category("Behavior"),
Description("The contacts collection"),
DesignerSerializationVisibility(
    DesignerSerializationVisibility.Content),
Editor(typeof(ContactCollectionEditor), typeof(UITypeEditor)),
PersistenceMode(PersistenceMode.InnerDefaultProperty)
]
public ArrayList Contacts
{
    get
    {
        if (contactsList == null)
        {
            contactsList = new ArrayList();
        }
        return contactsList;
    }
}

Step 5: Modify the GetScriptDescriptors method as follows:

protected override IEnumerable<ScriptDescriptor>
              GetScriptDescriptors(System.Web.UI.Control targetControl)
{
    ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor(
          "AjaxTextWithTableExtender.ClientBehavior1",
          targetControl.ClientID);
    descriptor.AddProperty("contactsList", this.Contacts);
    return new ScriptBehaviorDescriptor[] { descriptor };

   // yield return descriptor;
}

Step 6: Modify the ClientBehavior1.initializeBase function by adding the following lines:

this.contactsList=null;
this.strtext=null;
this.flag=true;

Add the following lines to ClientBehavior1.prototype Initialize function. Note: ve careful with the commas.

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

and also add the following:

get_contactsList : function() {
    return this.contactsList;
},
set_contactsList : function(value) {

    this.contactsList=value;
    this.raisePropertyChanged('contactsList');
},
_onkeyup : function() {
   this.strtext=document.getElementById("TextBox1").value;
  

var links = new Array ("link1", "link2", "link3"); 
var links_url = new Array ("link1.htm", "link2.htm",  
"link3.htm"); 

/* Resolve the location */ 
var loc=String(this.location); 

loc=loc.split("/"); 
loc=loc[loc.length-1].split("."); 
loc=loc[loc.length-2]; 

           
var v=new Array(this.contactsList);
//////////////////////////////////////////////////////////////////

var t = document.getElementById("TextBox1");
if (t) {
    // alert(this.flag);

    if(this.flag)
    {
        var mybody = document.getElementsByTagName("body")[0];
        // creates <table> and <tbody> elements
        mytable     = document.createElement("table");
        mytablebody = document.createElement("tbody");

        // creating all cells
        for(var j = 0; j < 1; j++) {
            // creates a <tr> element
            for(var i = 0; i < 2; i++) {
            // creates a <td> element

                mycurrent_row = document.createElement("tr");
                if(this.strtext!=null & v[0][i].Email.substring(0,1)!=null)
                {
                    //alert("strtext is not null");

                    if(v[0][i].Email.substring(0,1)==this.strtext.substring(0,1))
                    {
                        //alert("next shows v[0][i].
                        //       Email.substring\(0,1\)==this.strtext.substring\(0,1\)");
                        //alert(v[0][i].Email.substring(0,1)==this.strtext.substring(0,1));

                        mycurrent_cell = document.createElement("td");

                        //////////////////////////////////////////////////

                        linkEmail=document.createElement("a");
                        linkEmail.setAttribute("href",links_url[0]);
                        mycurrent_cell.appendChild(linkEmail);
                        var stre=v[0][i].Email;
                        //alert(str);  

                        currenttext = document.createTextNode(stre);
                        linkEmail.appendChild(currenttext);
                        // appends the cell <td> into the row <tr>
                        mycurrent_row.appendChild(mycurrent_cell);
                                
                        /////////////////////////////////////////////////////

                        mycurrent_cell = document.createElement("td");
                        // creates a Text Node

                        stre=v[0][i].Name;
                        //alert(str);  

                        currenttext = document.createTextNode(stre);
                        // appends the Text Node we created into the cell <td>

                        mycurrent_cell.appendChild(currenttext);
                        // appends the cell <td> into the row <tr>

                        mycurrent_row.appendChild(mycurrent_cell);
                         //////////////////////////////////////////////////   

                        mycurrent_cell = document.createElement("td");
                        // creates a Text Node
  
                           var stre=v[0][i].Phone;
                        //alert(str);  

                        currenttext = document.createTextNode(stre);
                        // appends the Text Node we created into the cell <td>

                        mycurrent_cell.appendChild(currenttext);
                        // appends the cell <td> into the row <tr>

                        mycurrent_row.appendChild(mycurrent_cell);
                        /////////////////////////////////////////////////////
                    }
                }
                mytablebody.appendChild(mycurrent_row);
            }
            // appends the row <tr> into <tbody>
        }

        // appends <tbody> into <table>
        mytable.appendChild(mytablebody);
        // appends <table> into <body>
        mybody.appendChild(mytable);
        // sets the border attribute of mytable to 2;

        mytable.setAttribute("border","2");
        if(this.strtext=='')
            this.flag=true;
        else
            this.flag=false;
        }
    }    
}

Step 7: The editor used to create the contacts collection is ContactCollectionEditor, which is based on the example found at: http://msdn2.microsoft.com/en-us/library/ms178654.aspx. Now compile the ExtenderControl project. Open the designer of your website's Default.aspx. You will find your ExtenderControl added at the top of the Toolbox. Now add a Label and a TextBox as shown:

Step 8: Click on the arrow to the right of the TextBox and choose "Add Extender". The following screen pops up:

Step 9: Select ExtenderControl1 and accept the default ID for the extender. If everything is fine, a "Remove Extender" option will appear below the "Add Extender" option for the TextBox. Right click the TextBox and in Properties, navigate to TextBox1_Extender. Add some dummy records to the Contacts collection with the following ContactCollectionEditor:

Step 10: Add an HTML file called "link1.htm" to your website project. Build the example and run the website.

Test the control

Add the letter 'a' or the first letter of one of the email records you entered, and watch the extender control work. It should be something like this:

The matching records from the Contacts collection are displayed and they can be linked as well.