AJAX controlKit webserver controls

AJAX controlKit webserver controls :

These controls are the independent controls and they will not extend other controls. The webserver controls  available in AJAXcontrolToolkit are as follows.  

2. Accordion :

Accordion control is used to provide a number of panes on the page allow the user to expand a panel by clicking on its header when user select a pane then all other panes available in the accordion control will be automatically collapsed.  

properties :

1. FadeTransitions :
   • Used to specify whether or not the FadeTransition effect will apply to the pane whenever it is expanded or collapsed.
2. Framespersecond :
   • Used to specify no of frame to change within a second while applying Fade Transitions.
3. Transition Duration : 
   • Used to specify the time in Millie-seconds for the total transition to complete
4. Headercssclass :
   • Used to specify the css class you want to use to display the header for accordion panes available within Accordion control when it is not selected.
5. Headerselectedcssclass :
   • Used to specify the css class to use to display the header of Accordion panes when they are selected.
6. Required opened pane :
   • Indicates whether or not atleast one pane is opened within the accordion control.

  Use the property panes to create panes within the accordion control & for every pane you have to specify header& content where header is used to specify heading for that & content is used to specify the context to display within that pane.  

Example :

The following example demonstrates how to use the accordion.

1. Add a page to the website and then take a Toolkit scriptmanager on the page and within the HTML source of the page within the headsection create two css class with the names ‘header’ & ‘Selectedheader’ as follows

<style type=”text/css”> .header { background-color:Black; font-family  :       Arial Black; font-size       : large; color:white; } .selected header { background-color:Blue : font-family:Arial Black: font-size   :large; color : white ; }  

2. Within HTML source of the page itself drag& drop an accordion control and design it as follows with two Accordion panes.

<asp: Accordion ID=”Accordion1”  runat=”server” FadeTransitions=”true” Headercssclass=”header” Framepersecond=”30” TransitionDuration=”2000” Headerselectedcssclass=”selectedheader” requireiopenedpane=”true”>  <panes> <asp:Accordionpane Id=”AP1” runat=”server”> <Header> This is Accordion Panel </Header>  <context> This is according panel context <br/> This is Accordion panel context <br/> ------------------ ------ </context> </asp:Accordionpane> <asp:Accordiopane Id=”AP2” runat=”server”> <Header> This is Accordion pane 2 </Header> <context> This is Accordion pane 2 context <br/> This is Accordion pane 2 context <br/> ---- ------------------- </context> </asp:Accordionpane> </panes> </asp:Accordion>  

3. AsyncFileupload:

Asyncfileupload control is used to Asynchronously upload the file to server properties.

1. Hasfile :
   1. Used to specify whether or not a file is selected with in the file upload control
2. FileName :
   1. Returns name of the file selected in fileupload control.
3. FileBytes :
   1. Returns the content of the selected file in the form of Byte array.
4. Filecontent : 
   1. Returns an IOstream object by using which you can read data from the selected file or write data to the selected file.
5. uploaderstyle :
   1. used to specify how the Asynch fileuplad will appear. IT has two options ‘traditional’ & ‘modern’
6. uploadingBackcolor :
   1. Used to specify the back ground color for file upload while the file is uploadoing.
7. ErrorBackcolor :
   1. Used to specify the background color for the Asyncfileupload if there is any error in uploading the file.
8. completebackcolor :
   1. Used to specify the background color for ‘file upload control ’ after uploading the file is completed.

Method :

saveAS() : Used to save the file selected in the Asynfileupload to the server.  

Example :

The following example demonstrates how to use the AsyncFileupload.

1. Add a page to the web site , take a toolkit scriptmanager on the page and then design it as follows with one Async fileuplaod, a button & an image control.
2. For the Asyncfile upload control set the name as AFUL and write the following code within the button upload click event.

Button click { if(AFUL.Hasfile) { string path=”~/photos/” + AFUL.fileName; AFUL.saveAs(Mappath(path)); Image1.Imageurl.path l }}  

34 .  AJAXFileUpload :

AJAX file upload is also used to upload files to the server.Advantage of this over Asyncfileuploader & fileupload of control of ASP.net is you can select multiple files at a time with a Ajaxfileupload and displays the progress of uploading a file by clicking on the AJAX file upload you can select multiple files by holding control (ctrl) or shift key. You can also select multiple file by simple dragging & dropping the files on to the AJAX – fileupload control.      

properties :

1. Allowed file type :
   • Used to specify a list of allowed file types by separationg them with (;) semicolon.
2. MaximumNumberoffiles:
   • Used to specify the Maximum Number of files user can upload using the Ajaxfileupload
3. style :
   • This property is used to specify the style for the control using CSS properties.

Method :

SaveAs () : Used to save the file selected in Ajaxfileupload to the server. within the browsers like Internet explorer chrome its that support HTML5 & CSS 3 this control can automatically display the progress of uploading a file with a progress bar when if takes time to upload.  

5. Cascading Drop Down :

                   This control is used with dropdown list control and it is used to automatically get values to display in a dropdown list by executing a method Asynchronously.

Properties :

1. TargetcontrolID :
2. ParentcontrolID : Used to specify the ID of the parent dropdownlist from which it has to take the value to get the list of values for targetcontrol of the current cascading dropdown.
3. Category : Used to specify a category name for the cascading drop down
4. Loading Text : Used to specify the text to display in the target control while loading item into it.
5. Prompt Text : Used to specify the text to display in for the Target control after loading items to it.
6. ServideMethod : Used to specify the method name that is called to get the list of items to display within the target cotrol.

Example :

The following example demonstrates how to use the cascading dropdown with dropdownlist controls.

1. Add a page to the website and take a ToolkitscriptManager on it along with two Dropdownlist controls and set their ID’s as DDL1 & DDL2.
2. Within HTML source of the page Drop & Drop two cascading drop down controls & set following for them.

<asp : cascading Dropdown ID=”cascading Drop Down1” runat=”server” TargetcontrolID = “DDL1” category=”countries” LoadingText=”[Loading countries]” promptText = “select your country”  Servidemethod=”Getcountries” usecontentkey = “True”> </asp: cascadingDropDown> <asp : Cascading Dropdown ID=”cascading Dropdown2” runat=”server” TargetcontrolID=”DDL2” parentcontrolID=”DDL1” category=”states” LoadingText = “[loading states]” propmptText = “select your state” usecontextkey=”True”>  </asp:cascadingDropDown> Within the design of the page click on the smart tag of 1^st dropdown list & choose “Add cascading Drop down page method”  to create a Method in the code getcounties which is set as the serviceMethods for the 1 st cascading Dropdown & write the following code with in it.{ sqlconnection cn= new sqlconnection (“server=Nikhil; database=mydb;uid=sa;pwd=123”); Sqldatadpater Da=new Sql DataAdapter(“Select country from countires”, cn); Dataset Ds= new Dataset(); Da.fill(Ds,”countries”); CascadingDropDownNameValue[]Items=new cascading DropDownNamevalue[d.Tables[“countries”].Rows.count]; int i=0; foreach(DataRow Dr in Ds.Tables[“Countries”].Rows) { Items[i++]=new cascadingDropDownNameValue(Dr[0].Tostring(),Dr[0].Tostring()); } returns Items; }

4. With in the design of the page click on the smart tag of second DropDownList & choose”Add cascading DropDownPageMethod” to create a method in the code with the name “GetStates” which is the serviceMethos set to 2 nd dropdownlist and write the following code with in that mehod.

{ string country=knowncategoryvalues; country=country.substring(country.Indexof(“:”)+1); country=country.substring(0,country.Length-1); Sqlconnection cn=new sqlconnection(“Server=Nikhil; database=mydb;uid=sa;pwd=123); SqldataAdapter Da=new sqlDataAdapter( “Select state from states from states where country=”’+country+’”,cn); Dataset Ds = new Dataset(); Da.fill(Ds.”States”); CascadingDropDownNameValue[]Items=new CascadingDropDownNameValue[DS.Table[“states”].Rows.count]; int i=0; foreach(DataRow Dr in Ds.Tables[“states”].Rows) { Item[i++]=new cascading DropDownNameValue( Dr[0].Tostring()); } returns Items; }

5. at runtime immediately after the page is loaded list of countries will be add to 1 st Dropdownlist& when you select a country in DropDownlist then a list of states related to the country are added to the second dropdown list & all this done asynchronously.
6. For this example you required the following two tables in database.

create table countries(country  varchar(30)) create table states (country varchar(30),state varchar(30))  

6. ComboBox:

Combo Box is similar to DropDownList except that it allows you to select an Item from the List and also type the Item If it is not available in List.  

Properties:

1. AutocompleteMode: Indicate how the Item is automatically completed while user types it .It has the possible values None,Append,Suggest&SuggestAppend.
2. Casesenstive: Indicate whether or not the comboBox is casesenstive to Apply the AutocompleteMode.
3. Datasource: Used to specify source of data for that comboBox that can be an array ,a collection or a table in database.
4. DataTextFiled: When datasource is in then this property is used to specify the column name in table whose data to treat as the text of the Item.
5. DatavalueField: When data source is a table in database then this property is used to specify the column name in table whose data to treat as value for the Items.
6. DropDownStyle: Used to specifyappearence & behaviour of the combobox.It has three possible values ‘simple’,Dropdown&DropDownlist’.When DropDownList is set to simple then the list portion will not hidden& It will be displayed permanently .But in Both DropDown& DropDownList style the list will be automatically hidden after selecting an Item. In the simple & dropdown styles they will allow you to select an Item available in the list .But in DropDown style you cannot type the Item& you select an Item from the list.
7. Items: This is the collection of Items in Combo.It can be used for adding Items to the ComboBox or delete Items from the combo box ,Bothe at design time & runtime.It has the methods & properties same as properties and methods of Itens collection of dropdownlist and listbox.

The default event for combobox is selected Indexchanged.