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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)
About the Author



	mitibhat


	

	Member		



	
	

	

	

	

	

	
Location: 
	
 India


	
	
	
	


			

		
	
	
	
	
			
		

			
Other popular ASP.NET Controls articles:
ASP.NET TreeView Control & the Client's Browser
Demonstrates how to use the Microsoft ASP.NET TreeView control from client-side script.
How to group RadioButtons
This article describes how to group radio-buttons when using them in DataGrid, DataList, Repeater etc.
Adding a CheckBox column to your DataGrid
A CheckBox column that is can be used and bound in a DataGrid
DataCalendar
A data-driven, templated sub-class of the ASP.NET Calendar control
PleaseWaitButton ASP.NET Server Control
An approach to displaying a "please wait" message/animated gif following a button click using encapsulated client-side JavaScript
		
		

									 
		
	
	

	

	

		
Article Top
		




	
	
	

		

		

			

				Sign Up to vote for this article
			
		
			
			
			
			
			
			

		
		
	




	
Your reason for this vote:
	

	




	


	
	
	
		  
		
		
	

	

	

		

			
You must Sign In to use this message board.
		

			

				

					
 FAQ 

						 
					

				

					

						

							Layout
								Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview
							  Per page
								102550
							   
						
					
				
			
		

			

				

					
 
Msgs 1 to 6 of 6 (Total in Forum: 6) (Refresh)
FirstPrevNext
				
			
		

			

				

					

				


				

					

						

							
My vote of 1 
Dmitri Nesteruk
11:26 5 Dec '08  
						
					
				


				

					

						

							

								

									

										

											
-

										

											
Sign In·View Thread·PermaLink

										
									
								
							
						
					
				

					

				


				

					

						

							
The Scenario [modified] 
spolarium7
21:34 21 May '08  
						
					
				


				

					

						

							

								

									

										

											
First of all, thanks for the reply. I am currently in the process of studyng the code from AJAX Control Toolkit. I am looking for that Contacts Property you mentioned. Im hoping to somehow manipulate it...

Now, I have to explain how I came to this point.

I am consuming a web service that posts data asynchronously into an ASP.NET AJAX  Page. 

I wanted all error messages to come into my application just the way that the validator callout from the toolkit does. The behavior is the same but with this major difference --- If I use a validator control, it will only be checking if the data is valid. And not if the search returned no results. And or if I wanted some custom messages like 'This Billing is Overdue'.

So I decided to create my own Callout control extender.
I figured that it can have a Message property. And when the OnPrerender fires, I can check the length of that string. If it has 0 length, then nothing happens, but it it has content, then it shows the message in the callout box.

I just dont know how to do that. 

modified on Thursday, May 22, 2008 9:58 PM


										

											
Sign In·View Thread·PermaLink

										
									
								
							
						
					
				

					

				


				

					

						

							
Regarding this Article 
spolarium7
22:29 20 May '08  
						
					
				


				

					

						

							

								

									

										

											
Im trying to create my own AJAX Control Extender...
Its supposed to have a function much like the Validator Callout from the AJAX Control Toolkit but I want it to display messages from an asynchronous webservice event handler. And I dont have ideas as of how to do this yet. Could you point me to the right direction? 

										

											
Sign In·View Thread·PermaLink

										
									
								
							
						
					
				

					

				


				

					

						

							
new Implement 
kianoosh soorani
4:43 15 Dec '07  
						
					
				


				

					

						

							

								

									

										

											
Can u implement  the lookup with search for large data 
with your article 

										

											
Sign In·View Thread·PermaLink

										
									
								
							
						
					
				

					

				


				

					

						

							
Re: new Implement 
mitibhat
22:54 17 Dec '07  
						
					
				


				

					

						

							

								

									

										

											
The property called Contacts is of the type ArrayList and is a public property. You could assign the data to this and use the search. I hope that answers your question. 
Miti

										

											
Sign In·View Thread·PermaLink

										
									
								
							
						
					
				

					

				


				

					

						

							
Re: new Implement 
mitibhat
22:56 17 Dec '07  
						
					
				


				

					

						

							

								

									

										

											
Of course you need to change the code a liitle i.e. for the table generation. 

										

											
Sign In·View Thread·PermaLink

										
									
								
							
						
					
				

					

				
			
		

			

				

					
Last Visit: 1:15 21 Nov '09      Last Update: 1:15 21 Nov '09 
1
				
			
		
	
 General     News     Question     Answer     Joke     Rant     Admin