Creating an ASP.Net AJAX Control Extender using VS 2008

• Download HelloWorldExtenderTestWebSite - 69,895 KB

Using the code

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.

Step1: Create a simple ASP.Net website using the VS 2008 templates by accepting defaults at a suitable location.

Step2: Add a new project using the File->Add->New Project->VisualC# -> ASP.Net AJAX Server Control Extender as shown :

Introduction

Step3: Modify ExtenderControl1.cs as following: Add the following attributes to the ExtenderControl1 class:

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

Step4: 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;
            }
        }

Step5: 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;



        }

Step6: 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: Be 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  and  elements



        mytable     = document.createElement("table");
        
        mytablebody = document.createElement("tbody");

        // creating all cellsfor(var j = 0; j < 1; j++) {
            // creates a  elementfor(var i = 0; i < 2; i++) {
                // creates a 



                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 



                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 



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



                }
            }
            mytablebody.appendChild(mycurrent_row);
            }
            // appends the row  into 



            
        }

        // appends  into 




        




            
            
            
 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 
 into the row 




                mycurrent_cell.appendChild(currenttext);
                // appends the cell 
 into the row 




                mycurrent_cell.appendChild(currenttext);
                // appends the cell 
 into the row 




        mytable.appendChild(mytablebody);
        // appends  into <body>



        mybody.appendChild(mytable);
        // sets the border attribute of mytable to 2;



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



Step7:

The Editor used to create 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 find your ExtenderControl added at the top of the ToolBox.

Now add a Label and a TextBox as shown:


Step8:

Click on the arrow to the right of the TextBox and choose “Add Extender”. The following screen pops up:

Step9:

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 the Properties navigate to TextBox1_Extender.
Add some dummy records to the Contacts Collection with the following ContactCollectionEditor:

Step10:

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 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.

The author Miti is with .Net Technologies for the last 7 years and is a Microsoft Certified Trainer working at Infosys Technologies Pvt. Ltd.
License
This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.
A list of licenses authors might use can be found here



							
						
 
				    
				

			

				Permalink

				

				Privacy

    			Cookies

                Terms of Use

			

            

				



    Layout: fixed
    |
    fluid



				

				

	            

                

			
                
			

				Article Copyright 2007 by mitibhat
Everything else
				Copyright © CodeProject, 1999-2025

                

				Web01 
				2.8:2024-12-08:1