AjaxToolkitExtender Controls

AjaxToolkitExtender Controls
1. Accordion Control 2. AlwaysVisibleControl 3. Animation Control 4. AsyncFileUpload Control 5. AutoComplete Control 6. Calendar Control 7. CascadingDropDown Control 8. TextBoxWatermark 9. HoverMenu Control 10. ConfirmButton Control 11. Rating Control 12. ToggleButton Control 13. Tabs Control 14. Slider Control 15. DragPanel Control 16. DropDown Control 17. CollapsiblePanel Control 18. DropShadow Control 19. FilteredTextBox Control 20. RoundedCorners Control 21. ResizableControl 22. PopupControl 23. ListSearchExtender Control 24. MaskedEdit Control 25. ValidatorCallout Control 26. PasswordStrength Control 27. SlideShow Control 28. MutuallyExclusiveCheckBox Control 29. NumericUpDown Control 30. ModalPopupExtender 31. MultiHandleSliderExtender Control 32. Mutually Exclusive Check Box 33. NoBot Control 34. ReorderList Control 35. AnimationExtender Control 36. MaskedEditExtender Control
Accordion Control
Accordion control provide multiple panes, only one of them is visible at a time another can be opened by clicking the header. It is like having several CollapsiblePanels. Each AccordionPane control has a template for its Header and its Content. Supports three AutoSize modes 1. None - The Accordion grows/shrinks without restriction. 2. Limit - The Accordion never grows larger than the value specified by its Height property. 3. Fill - The Accordion always stays the exact same size as its Height property. How to Use Accordion Control Step 1. Drag Accordion Control from Ajax Control tab. Add Pane property and AccordionPane Control to this control (your no of choice).
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Accordion Control</title> </head> <body> <form id="Accordion Control" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="false" SuppressHeaderPostbacks="true" BorderStyle="Solid" BorderColor="Black" Width="300"> <Panes> <cc1:AccordionPane ID="AccordionPane1" runat="server" BorderStyle="Solid"> <Header><h3>Er.Anil</h3></Header> <Content>Anil is a Good Programmer.....</Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane2" runat="server" BorderStyle="Solid"> <Header><h3>Er. Ashish</h3></Header> <Content>Ashish is a...</Content>
</cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane3" runat="server" BorderStyle="Solid"> <Header><h3>Er. Kamal</h3></Header> <Content>Kamal is a......</Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </form> </body> </html> Step 2. Debug the application. By default first Header opened.
Clicking on Ashish
Clicking on Kamal
AlwaysVisibleControl
To display the control above all the page content that always visible use AlwaysVisible Control, whether you scroll the page upwards or downwards. AlwaysVisible Control Properties 1. TargetControlID: ID of control for this extender to always make visible.
2. HorizontalOffset: Default is 0 pixels, distance to the HorizontalSide edge of the browser in pixels. 3. HorizontalSide: Default is Left, horizontal edge of the browser (either Left, Center, or Right) used to anchor the target control. 4. VerticalOffset: Default is 0 pixels, distance to the VerticalSide edge of the browser to the target control from the same side. 5. VerticalSide: Default is Top, vertical edge of the browser (either Top, Middle, or Bottom) to the target control. 6. ScrollEffectDuration: Default is .1 second, scrolling effect to last when the target control is repositioned in second. 7. UseAnimation: Default is false, Whether or not to animate the element into position.
Animation Control
Animation Control Provide easily adding animation effects to web pages. It plays animations whenever a specific event like OnLoad, OnClick, OnMouseOver, or OnMouseOut is raised by the target control. The sample below demonstrates a composite animation consisting of four primary animation actions, done in parallel:
1. 2. 3. 4.
Move (to move the panel to its final location) Resize (to change the size of the panel) Fade (to fade the text in/out) Color (the flyout changes from gray to white and the text pulses red)
Animation Control Properties
1. 2. 3. 4. 5. 6. 7.
OnHoverOut TargetControlID OnMouseOver OnClick OnHoverOver OnMouseOut OnLoad
AsyncFileUpload Control
AsyncFileUpload Control is an ASP.NET AJAX Control. To asynchronously upload files to the server you can used this control.. Uploading file results be checked on both sides (Client side and server side). SaveAs() is calling for to save the uploading file. Events
1. UploadedComplete
2. UploadedFileError
Properties
1. CompleteBackColor 2. ContentType 3. ErrorBackColor 4. FileContent 5. FileName 6. HasFile 7. OnClientUploadComplete 8. OnClientUploadError 9. OnClientUploadStarted 10. PostedFile 11. ThrobberID 12. UploaderStyle 13. UploadingBackColor 14. Width
Methods
1. SaveAs(string filename) AutoComplete Control

AutoComplete Control is offer to suggestion for the user and it can be attached to any TextBox Control, associate that control with a popup panel to display words that begin with the prefix typed into the textbox. Dropdown lists of candidate words is positioned on the bottom left of the text box supplied by a web service.
AutoComplete Properties TargetControlID ServiceMethod ServicePath ContextKey UseContextKey MinimumPrefixLength CompletionInterval EnableCaching CompletionSetCount CompletionListCssClass CompletionListItemCssClass. CompletionListHighlightedItemCssClass DelimiterCharacters FirstRowSelected ShowOnlyCurrentWordInCompletionListItem Animations
How To Use AutoComplete Control
Step 1. Drag a TextBox From Tool Box. Click on Add Extender
Step 2. A small window opened, select AutoComplete Extender. Press OK, control be added.
Step 3. Open solution Explorer and add Web Service (through Add Existing Item).
Design Code (Default.aspx).
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>AutoComplete</title> </head> <body> <form id="AutoComplete" runat="server"> <div> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server" style="top: 118px; left: 10px; position: absolute; height: 22px; width: 128px"></asp:TextBox> <cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" TargetControlID="TextBox1" ServiceMethod="GetCompletionList" ServicePath="ToolkitTestService.asmx" MinimumPrefixLength="2" CompletionInterval="1000" EnableCaching="true" CompletionSetCount="20" > </cc1:AutoCompleteExtender> </form> </body> </html> 1. Used Property and set the path of Web Service File (ServicePath="ToolkitTestService.asmx"). 2. (MinimumPrefixLength="2" ) Set this property 2, means the suggestion window will open after entered two character 3. (CompletionSetCount="20") This property will set the no of suggestion showen in window.
Step 4. Debug the Application and enter character in TextBox. New suggestion window opened.
Calendar Control
Calendar Control is an ASP.NET AJAX extender control, provides client-side date-picking functionality with customizable date format, that can be attached to any ASP.NET TextBox control. The left and right arrows can be used to move forward or back a month to months in the current year. Properties
1. 2. 3. 4. 5.
TargetControlID CssClass Format PopupButtonID PopupPosition
6. SelectedDate
Calendar CssClass property provide to change look and feel of your Calendar. Calendar has a predefined set of CSS classes . Calendar Css Classes
1. ajax__calendar_container 2. .ajax__calendar_header 3. .ajax__calendar_prev 4. .ajax__calendar_title 5. .ajax__calendar_next 6. .ajax__calendar_body 7. .ajax__calendar_days 8. .ajax__calendar_dayname 9. .ajax__calendar_day 10. .ajax__calendar_months 11. .ajax__calendar_month 12. .ajax__calendar_years 13. .ajax__calendar_year 14. .ajax__calendar_footer 15. .ajax__calendar_today 16. .ajax__calendar_hover 17. .ajax__calendar_active 18. .ajax__calendar_other
How to use Calendar Step 1. Drag a Text Box from Tool Box tab and click on Add Extender.
Step 2. New Window open now add Calendar Control. Press Ok
Design Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server" style="top: 99px; left: 7px; position: absolute; height:
22px; width: 128px"></asp:TextBox> <cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" Enabled="True" TargetControlID="TextBox1"> </cc1:CalendarExtender> </div> <p> <asp:Label ID="Label1" runat="server" Text="Select Date"></asp:Label> </p> </form> </body> </html>
You can change your date format in textbox using Property like shown in Diagram.
Step 3. Debug the Application. Output will be
Click on desire date to show in text box.
CascadingDropDown Control
CascadingDropDown Control provides the functionality to populate the Dropdownlist control in a sequence of relation to each other. Cascading Dropdown control works with a web service. Web service returns the result according to the call made by CascadingDropdown extender control. One dropdown call the web service method on its selected index change event. First dropdown fills the associates dropdown control with results retrieved from that web service method. The sample web service used to reads the data from a simple hierarchical XML data file.
Properties
1. TargetControlID 2. Category 3. PromptText 4. PromptValue 5. EmptyText 6. EmptyValue 7. LoadingText 8. ServicePath 9. ServiceMethod 10. ContextKey 11. UseContextKey 12. ParentControlID 13. SelectedValue
How to use CascadingDropDown Control
TextBoxWatermark Control 1. This Control attached to an ASP.NET TextBox control to get "watermark" behavior on 2.
the web Page. Purpose of this control to provide more information to user.
Properties
1. TargetControlID, Control ID. 2. WatermarkText, The text to show when the control has no value 3. WatermarkCssClass, The CSS class to apply to the TextBox.
Step.1 Drag ScriptManager Control and add a two Text Box . Click on First Text Box and click on Add Extender.
Step 2. Above process is repeat for the Second Text Box (Same as above). Add a button and Two Label on page for show the text which user enter in Text Box. Paste the Below code on button Click (Default.aspx.cs).
protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "Hello!!!!" + "" +TextBox1.Text.ToString(); Label2.Text = "" + TextBox2.Text.ToString(); }
The Design Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .style2 { width: 100%; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server" style="top: 86px; left: 10px; position: absolute; height: 22px; width:223px"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server" style="top: 138px; left: 9px; position: absolute; height: 21px; width: 225px"></asp:TextBox> <cc1:TextBoxWatermarkExtender ID="TextBox2_TextBoxWatermarkExtender" runat="server" Enabled="True" TargetControlID="TextBox2" WatermarkText="Enter Your Second Name.."> </cc1:TextBoxWatermarkExtender> <asp:Button ID="Button1" runat="server" style="top: 134px; left: 294px; position: absolute; height: 26px; width: 56px" Text="Submit" onclick="Button1_Click" /> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <asp:Label ID="Label1" runat="server"></asp:Label> <asp:Label ID="Label2" runat="server"></asp:Label> </form> </body> </html>
Step 3. Debug the Application. Output Will Be
Enter text in Textbox
HoverMenu Control 1. HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET
WebControl.
2. We Associate Panel (Web Controls) to this control, these control visible when mouse 3.
over the HoverMenu Control. Popup position has been decided by Developer.
Properties
1. TargetControlID: Control ID of HoverMenu Control. 2. PopupControlID: ID of the control which display when mouse over on the 3. 4. 5. 6. 7. 8.
HoverMenu Control.. HoverCssClass: Css class. PopupPostion: Popup should be positioned relative to the target control OffsetX/OffsetY: The number of pixels to offset the Popup from it's default position HoverDelay: The time, in milliseconds, before the popup display. PopDelay: The time, in milliseconds, for the popup to remain visible. Animations: Generic animations for the HoverMenu extender.
How to Use HoverMenu Control Step 1. Add Script manager and a HoverMenu Control to your page. Add a Link Button Control and Pass the ID of this link Button to the HoverMenu Control Property (TargetControlID="LinkButton1").
Step 2. Add a Control Panel and two other Link Button Control in the Panel. Copy the Panel ID and paste in the property of HoverMenu Control (PopupControlID="Panel1" ). This property show the popup control when mouse over the HoverMenu control (means Link Button).
The Design Code (Default.aspx).
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>HoverMenu</title> </head> <body> <form id="HoverMenu" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1" PopDelay="100"
HoverDelay="100" PopupPosition="bottom"> </cc1:HoverMenuExtender> <asp:LinkButton ID="LinkButton1" runat="server" Font-Size="Larger">R4R</asp:LinkButton> <asp:Panel ID="Panel1" runat="server" BackColor="#FF9900"> <asp:LinkButton ID="LinkButton2" runat="server" PostBackUrl="http://r4rtechsoft.com/">About Us</asp:LinkButton> <asp:LinkButton ID="LinkButton3" runat="server" PostBackUrl="http://r4r.co.in/">Portal</asp:LinkButton> </asp:Panel> </form> </body> </html>
Step 3. Debug the application. Mouse over the R4R Link, two other Links Open.
ConfirmButton Control 1. This control work like a java script confirm box. 2. ConfirmButton is a simple extender, that clicks on a button and displays a message
to the user. If the "OK" button is clicked, the button or link functions normally. If not
then perform its default submit behavior. Optionally, a client script is executed if the OnClientCancel property is set. Properties
1. 2. 3. 4. 5.
TargetControlID: ID of the control for this extender be operate. ConfirmText: The text is show when u want to confirm. OnClientCancel: Client side script, which you want to show on Cancel button click ConfirmOnFormSubmit: Boolean value true or false. DisplayModalPopupID
How to use ConfirmButton Control Step 1. Add ScriptManager and a Button Control. Go to Button task and click on Add Extender.
Step 2. A Small Window open, select ConfirmButtonExtender and click on Ok.
Step 3. Add a Panel control and two LinkButton Control. On Button Click (Default.aspx.cs) code.
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Panel1.Visible = false; } protected void Button1_Click(object sender, EventArgs e) { Panel1.Visible = true; } }
When Page be Laded Panel Control is invisible. When user click on button, a confirm box be open if click Ok then panel be visible. If click on Cancel panel is invisible. Client Side Script is Possible on Cancel Click. Design Code <%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ConfirmButton</title> </head> <body> <form id="ConfirmButton" runat="server"> <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </cc1:ToolkitScriptManager> <asp:Button ID="Button1" runat="server" Text="R4R SoftTech." onclick="Button1_Click" /> <asp:Panel ID="Panel1" runat="server"> <asp:LinkButton runat="server" PostBackUrl="http://r4rtechsoft.com/"> About Us</asp:LinkButton> <asp:LinkButton runat="server" PostBackUrl="http://www.r4r.co.in/"> Portal</asp:LinkButton> </asp:Panel> <cc1:ConfirmButtonExtender ID="Button1_ConfirmButtonExtender" runat="server" ConfirmText="Are u Sure..." Enabled="True" TargetControlID="Button1"> </cc1:ConfirmButtonExtender> </form> </body> </html> Step 4. Debug the Application, Click on Button
If Click on Ok then
If Click on Cancel. No action perform on Button Click.
Rating Control
The Rating control provides an intuitive rating experience that allows users to select the number of stars that represents their rating. Rating Control is useful for those who need to show ratings in ASP.NET more graphically. Properties
1. AutoPostBack: True to cause a postback on rating item click. 2. CurrentRating: Initial rating value 3. MaxRating: Maximum rating value 4. ReadOnly:Whether or not the rating can be changed 5. StarCssClass: CSS class for a visible star 6. WaitingStarCssClass: CSS class for a star in waiting mode 7. FilledStarCssClass: CSS class for star in filled mode 8. EmptyStarCssClass: CSS class for a star in empty mode 9. RatingAlign: Alignment of the stars (Vertical or Horizontal) 10. RatingDirection: Orientation of the stars (LeftToRightTopToBottom or 11. 12.
RightToLeftBottomToTop) OnChanged: ClientCallBack event to fire when the rating is changed Tag: A custom parameter to pass to the ClientCallBack
ToggleButton Control
ToggleButton is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control, enables the use of custom images to show the state of the CheckBox. Image attached at the place of CheckBoxes. Properties
1. TargetControlID: The ID of the CheckBox. 2. ImageHeight\ImageWidth: The height and width of the image 3. CheckedImageUrl: The URL of the image when the toggle button is in the checked
state.
4. UncheckedImageUrl: The URL of the image when the toggle button is in the 5. 6. 7. 8. 9. 10. 11.
unchecked state. DisabledCheckedImageUrl: The URL of the image to show when the toggle button is disabled and in the checked state. DisabledUncheckedImageUrl: The URL of the image when the toggle button is disabled and in the unchecked state. CheckedImageOverUrl: The URL of the image when the toggle button is in the checked state and the mouse is over the button. UncheckedImageOverUrl: The URL of the image when the toggle button is in the unchecked state and the mouse is over the button. CheckedImageAlternateText: The alt text when the toggle button is in the checked state. UncheckedImageAlternateText: The alt text when the toggle button is in the unchecked state. CheckedImageOverAlternateText: The alt text to show when the toggle button is in the checked state and the mouse is over the button.
12. UncheckedImageOverAlternateText: The alt text when the toggle button is in the
unchecked state and the mouse is over the button.
How to use ToggleButton Step 1. Add ScriptManager and a two CheckBox Control from Tool Box. Click on Add Extender.
Step 2. A new Small window open. Select ToggleButtonExtender and click on Ok. The Extender control will be added. This Step 1 and step 2 again repeat for Second CheckBox.
Step 3. Add two LinkButton in front of CheckBoxes and One Label, to show the information when user action perform. Set the URL of LinkButtons as your choice.
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ToggleButton</title> </head> <body> <form id="ToggleButton" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:CheckBox ID="CheckBox1" runat="server" oncheckedchanged="CheckBox1_CheckedChanged" /> <cc1:ToggleButtonExtender ID="CheckBox1_ToggleButtonExtender" runat="server" Enabled="True" CheckedImageUrl="ToggleButton_Checked.gif" TargetControlID="CheckBox1" UncheckedImageUrl="ToggleButton_Unchecked.gif" CheckedImageAlternateText="Check" UncheckedImageAlternateText="Uncheck" ImageHeight="20" ImageWidth="20"> </cc1:ToggleButtonExtender> <asp:LinkButton ID="LinkButton1" runat="server" ForeColor="#FF3300" PostBackUrl="http://www.helloanilyadav.blogspot.com/">I like Anil </asp:LinkButton> <br /> <asp:CheckBox ID="CheckBox2" runat="server" /> <cc1:ToggleButtonExtender ID="CheckBox2_ToggleButtonExtender" runat="server" Enabled="True" TargetControlID="CheckBox2" CheckedImageUrl="ToggleButton_Checked.gif" CheckedImageAlternateText="Check" UncheckedImageAlternateText="Uncheck" ImageHeight="20" ImageWidth="20" UncheckedImageUrl="ToggleButton_Unchecked.gif"> </cc1:ToggleButtonExtender> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" style="top: 110px; left: 9px; position: absolute; height: 26px; width: 56px" Text="Submit" />
<asp:LinkButton ID="LinkButton2" runat="server" ForeColor="#FF3300" PostBackUrl="http://www.facebook.com/#!/pages/First-GirlFriend/152726921431770" >I Like FGF</asp:LinkButton> <p> </p> <p> </p> <asp:Label ID="Label3" runat="server"></asp:Label> </form> </body> </html> On Button Click Code (Default.aspx.cs)
protected void Button1_Click(object sender, EventArgs e) { Label3.Text= string.Format("You {0} Like <b>Anil</b> and you {1} like <b>FGF</b>", (CheckBox1.Checked ? "do" : "do not"),(CheckBox2.Checked ? "do" : "do not")); }
Step 4. Debug the Application, the web page show like below.
Check on Images (ChekBoxes). Click the Submit Button, Message will show like below.
Tabs Control 1. Tabs Controls creates a set of Tabs that can be used to organize page content. 2. A TabContainer is a host for a number of TabPanel controls. 3. Each TabPanel defines its HeaderText or HeaderTemplate as well as a
ContentTemplate that defines its content.
TabContainer Properties
1. ActiveTabChanged (Event): Fired on the server side. 2. OnClientActiveTabChanged: The name of a JavaScript function to attach to the 3. 4. 5. 6. 7.
client-side tabChanged event CssClass: A css class override used to define a custom look and feel for the tabs. ActiveTabIndex: The first tab to show Height: Sets the height of the body of the tabs but it does not include the TabPanel headers. Width: Sets the width of the body of the tabs. TabStripPlacement:Whether to render the tabs on top of the container or below (Top, Bottom).
TabPanel Properties
1. Enabled: Whether to display the Tab for the TabPanel by default. 2. OnClientClick:The name of a JavaScript function to attach to the client-side click
event of the tab.
3. HeaderText: The text to display in the Tab 4. HeaderTemplate 5. ContentTemplate

How to use Tabs Control Step 1. Drag a ScriptManager and a TabContainer Control from Ajax Control tab. Add three TabPanels to the TabContainer and named as Personal Information, Professional Information and Show All respectively. Add Three label and three TextBoxes to the Personal Information tab. Add Three label and three TextBoxes to the Professional Information tab. Add Six Label and one Button Control to the Show All tab. Add a UpdatePanel and trigger the Button control show below figure.
Step 2. Click on properties and select Triggers Property, a Small window open. Click on Add Button of this window and Select ControlID then Press Ok. Button control Trigger to the UpdatePanel.
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .style1 { width: 100%; } </style> </head> <body> <form id="form1" runat="server"> <div>
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </cc1:ToolkitScriptManager> </div> <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="150px" Width="353px" BackColor="#CC9900" BorderColor="#CC3300" BorderStyle="Groove"> <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Personal Information" Font-Bold="True"> <ContentTemplate> <table> <tr> <td> First Name: </td><td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td> </tr> <tr> <td>Second Name:</td> <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td> </tr> <tr> <td>Age:</td> <td><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td> </tr> </table> </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Professional Information" Font-Bold="True"> <ContentTemplate> <table> <tr><td>Company Name:</td> <td><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td> </tr> <tr><td>Phone Number:</td> <td><asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></td> </tr> <tr><td>Email ID: </td> <td><asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td> </tr> </table> </ContentTemplate> </cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Show All" BorderColor="#993300" Font-Bold="True"> <HeaderTemplate> Show All</HeaderTemplate> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Click To Show All" onclick="Button1_Click" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <table> <tr><td><asp:Label ID="Label1" runat="server" Text=""></asp:Label></td> </tr> <tr><td><asp:Label ID="Label2" runat="server" Text=""></asp:Label></td> </tr> <tr><td> <asp:Label ID="Label3" runat="server" Text=""></asp:Label></td> </tr> <tr><td><asp:Label ID="Label4" runat="server" Text=""></asp:Label></td> </tr> <tr><td> <asp:Label ID="Label5" runat="server" Text=""></asp:Label></td> </tr> </table> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </form> </body> </html>
On Button Click (Default.aspx.cs) Code
protected void Button1_Click(object sender, EventArgs e) { Label1.Text = ("Name: " + "" + TextBox1.Text + TextBox2.Text).ToString(); Label2.Text = ("Age: " + "" +TextBox3.Text.ToString()); Label3.Text = ("Your Company Name: " + "" + TextBox4.Text).ToString(); Label4.Text = ("Contact No.:" + "" +
TextBox5.Text).ToString(); Label5.Text = ("Email ID:" + "" + TextBox6.Text).ToString(); }
Step 3. Debug the Application. Enter Your Information.
Click on Button, show all information without full page PostBack.
Slider Control
Slider Control allowed the user to choose a numeric value from a finite range, min and max value is created by Developer. The Slider's layout can be customized to using CSS classes for the Slider's rail and handle. If handle animation is enabled, the handle slides to the specified point on the rail with a nice animation effect. The Slider's value can be dynamically displayed in another asp:TextBox or an asp:Label. If a TextBox is used, the Slider's value can be updated through the bound TextBox. Properties
1. Minimum: Minimum value allowed. 2. Maximum: Maximum value allowed. 3. Decimals: Number of decimal digits for the value. 4. Steps: Number of discrete values inside the slider's range. 5. Value: Current value of the slider 6. EnableHandleAnimation: Enable/disable the handle animation. 7. HandleAnimationDuration: Duration of the handle animation, in milliseconds. 8. RailCssClass: CSS class for the slider's rail. 9. HandleCssClass: CSS class for the slider's handle. 10. HandleImageURL: URL of the image to display as the slider's handle. 11. Length: Width/height of a horizontal/vertical slider when the default layout is used. 12. BoundControlID: ID of the TextBox or Label that dynamically displays the slider's
value.
13. RaiseChangeOnlyOnMouseUp: If true, fires the change event on the extended

TextBox only when the left mouse button is released.
How To Use Slider Control
Step 1. Drag ScriptManager and two TextBoxes from Tool Box.
Step 2. Add Slider Control from AjaxToolKit and Click on Add Extender..
A new small window open, select SliderExtender and click on Ok.
After click ok the page view like this. You can Remove the Extender Control Clicking on Remove Extender.
Design view of the page
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Slider</title> </head> <body> <form id="Slider" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <cc1:SliderExtender ID="SliderExtender1" runat="server" BoundControlID="TextBox2" TargetControlID="TextBox1"> </cc1:SliderExtender> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server" style="top: 97px; left: 11px; position: absolute; height: 23px; width: 26px"></asp:TextBox> </form> </body> </html>
(BoundControlID="TextBox2"): ID of the TextBox that dynamically displays the slider's value.
Step 3. Debug the application
Due to Sliding bar the value be changed in Second TextBox.
DragPanel Control
The DragPanel extender control provide facility to drag controls. ASP. Net provide to use "drag handle", means the control which is draggable. The user easily drag control around whole web page. Properties
1. TargetControlID: The ID of a Panel to make draggable.
2. DragHandleID: The ID of a control, served as a drag handle for the panel. When
the user clicks and drags this control, the panel will move. How To Use DragPanel Step 1. Drag ScripManager and Panel Control on the page. Click on Add Extender
A small window Open
Select DragPanelExtender and click on Ok
Step 2. Drag two more Panel. Select one Panel and copy the Control ID to the DragPanelExtender Property "DragHandleID="Panel2" ",means this Panel is the "DragHandle" for the Panel1 which Drag on the Web Page. Design Code(Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>DragPanel</title> </head> <body> <form id="DragPanel" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:Panel ID="Panel1" runat="server" Width="250px" style="z-index: 20;"> <asp:Panel ID="Panel2" runat="server" Width="100%" Height="20px" BorderStyle="Solid" BorderWidth="2px" BorderColor="black"> <div>        <font color="#0066FF"><b>     ASP.Net With C#</b></font> </div> </asp:Panel> <asp:Panel ID="Panel3" runat="server" Width="100%" Height="250px" Style="overflow: scroll;" BackColor="#0B3D73" ForeColor="whitesmoke" BorderWidth="2px" BorderColor="black"
BorderStyle="Solid"> <div> <p> ASP .NET built on .net framework. Asp .net is a web development tool. Asp .net is offered by Microsoft. We can built dynamic websites by using asp .net. Asp .net was first released in January 2002 with version 1.0 of the .net framework. It is the successor of Microsoft's ASP. .NET Framework consists of many class libraries, support multiple languages and a common execution platform. Asp .net is a program run in IIS server. Asp .net is also called Asp+. </p> </div> </asp:Panel> </asp:Panel> <cc1:DragPanelExtender ID="Panel1_DragPanelExtender" runat="server" DragHandleID="Panel2" TargetControlID="Panel1" /> <script type="text/javascript"> function setBodyHeightToContentHeight() { document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px"; } setBodyHeightToContentHeight(); </script> </form> </body> </html>
In order to be able to fix the panel on the web page and stay where you have dropped, you have to add the JavaScript before the end of the body tag.
<script type="text/javascript"> function setBodyHeightToContentHeight() { document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px"; } setBodyHeightToContentHeight(); </script>
The view of the Page When adding Color and Visualization effect in the Panel like Show in Design Code.
Step 3. Debug the Application.
You Can Drag and fix Panel anywhere on Page.
DropDown Control 1. DropDown is an ASP.NET AJAX extender that can be attached to almost any ASP.NET
control
2. It provide a SharePoint-style drop-down menu, displayed menu is any another panel

or control. Properties TargetControlID: The ID of the control which needs a drop-down. DropDownControlID: The ID of the control which will be displayed as the dropdown. Animations: Generic animations for the DropDown extender. Animation reference for more details:
OnShow: The OnShow animation will be played each time the dropdown is displayed. OnHide: The OnHide animation will be played each time the dropdown is hidden.
How to Use DropDownExtender Control Step 1. Drag ScriptManager and a Label Control from Tool Box. Click on Add Extender.
A new Small Window Open. Select DropdownExtender and click on Ok.
Step 2. Drag a ListBox Control, Copy there ControlID of ListBox and Paste it into DropDownExtender Property (DropDownControlID="ListBox1"). ListBox be show when Click on Extender Control. As shown in below Fig.
Step 3. Add items in ListBox as Shown in DesignCode. Drag a UpdatePanel. Select a Label (Label3) Control in UpdatePanel and open properties of UpdatePanel.
Click on Triggers and go to Collection, a window open click on Add button and Select Control
and Event on which the information show on Label3.
Step 4. To show Information write in the .CS Code (Default.aspx.cs) on ListBox1_SelectedIndexChanged event of ListBox, due to this when user click on List Box item, Label3 Show all information.
protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e) { Label2.Text = TextBox1.Text +","+" "+ "you selected course " + ListBox1.SelectedItem.Text; }
Now add TextBox and a Label Control on your page. Design Code of page (Default.aspx).
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>DropDown</title> </head> <body> <form id="DropDown" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:Label ID="Label3" runat="server" Text="Enter Your Name: " Font-Bold="True"></asp:Label><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:Label ID="Label1" runat="server" Text="Please Select your course......" Font-Bold="True" Font-Names="Times New Roman" ForeColor="#993300" TabIndex="1"></asp:Label> <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" onselectedindexchanged="ListBox1_SelectedIndexChanged"
ontextchanged="ListBox1_TextChanged" Font-Bold="False"> <asp:ListItem>C# with .Net Framework</asp:ListItem> <asp:ListItem>Java</asp:ListItem> <asp:ListItem>ASP.Net with C#</asp:ListItem> <asp:ListItem>Networking</asp:ListItem> </asp:ListBox> <cc1:DropDownExtender ID="Label1_DropDownExtender" runat="server" DropArrowBackColor="AliceBlue" DropDownControlID="ListBox1" DynamicServicePath="" Enabled="True" TargetControlID="Label1"> </cc1:DropDownExtender> <p> </p> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label2" runat="server" FontBold="False"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ListBox1" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> </form> </body> </html>
The Design view of your Application is the
Step 5. Debug the Application. Enter name and select Course.
CollapsiblePanel Control
1. The CollapsiblePanel is a very flexible extender for any Web page. 2. Its allows, to easily add sections on your web page, which you want to make
Collapsible.
3. This extender targets any ASP.NET Panel control. 4. Which Control is Expandable for the page and which part make collapsible for the
page its totally depend on the developer. Properties TargetControlID: The Panel to operate expand and collapse. CollapsedSize: The size of the target, in pixels, when it is in the collapsed state. ExpandedSize: The size of the target, in pixels, when it is in the opened state. Collapsed: Specifies that the object should initially be collapsed or expanded. AutoCollapse: True to automatically collapse when the mouse is moved off the panel. AutoExpand: True to automatically expand when the mouse is moved over the panel. ScrollContents: True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents. ExpandControlID/CollapseControlID: Values are the same, the panel will automatically toggle its state on each click. TextLabelID: The ID of a label control where the "status text" for the panel will be placed. CollapsedText: The text to show in the control specified by TextLabelID when the panel is collapsed. ExpandedText: The text to show in the control specified by TextLabelID when the panel is opened. ImageControlID: The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. CollapsedImage: The path to an image used by ImageControlID when the panel is collapsed ExpandedImage: The path to an image used by ImageControlID when the panel is expanded ExpandDirection: can be "Vertical" or "Horizontal" to determine whether the panel expands top-to-bottom or left-to-right.
How to Use CollapsiblePanel Control Step 1. In this Example, we add two CollapsiblePanelExtender Control. First is for the entering Information and second is the Showing Information, which entered by the user. First drag a ScriptManager. Add two Panel for Entering Information CollapsiblePanelExtender , thease step are showing in fig.
Click on Add Extender, A new window is Open
Click on ok. Step 2. Copy the Control ID of the panel which you want to Collapsed and paste this ID in property, CollapseControlID="Panel2", of CollapsePanelExtender Control. Add two label in this Panel and make one label to its Text label, for this copy the Label ID and paste it to the property of (TextLabelID="Label5") CollapsePanelExtender Control. Add four Label and four TextBoxes to the Second Panel.
Step 3. For Second CollapsePanel (Personal Information) Step2 repeated, For more help see Design Code (Default.aspx). Add a Button Control to submit Information.
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>CollapsiblePanel</title> </head> <body> <form id="CollapsiblePanel" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> //For Enter Information Panel <asp:Panel ID="Panel2" runat="server" BorderColor="Black" BorderWidth="2px" BackColor="#CCCCCC" Width="300px"> <table><tr> <td><asp:Label ID="Label6" runat="server" Text="Enter Information" Font-Bold="True"></asp:Label></td> <td><asp:Label ID="Label5" runat="server" Text="Label"></asp:Label></td> </tr></table> </asp:Panel><asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" style="top: 48px; left: 348px; position: absolute; height: 27px; width: 86px" /> <asp:Panel ID="Panel3" runat="server" BackColor="#00CC99" Width="300px"> <table> <tr> <td> <asp:Label ID="Label1" runat="server" Text="Name: "></asp:Label></td><td> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td> </tr> <tr><td> <asp:Label ID="Label3" runat="server" Text="Phone No. :"></asp:Label></td>
<td> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td></tr> <tr><td> <asp:Label ID="Label4" runat="server" Text="Company Name: "> </asp:Label></td><td> <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td> </tr> <tr><td> <asp:Label ID="Label2" runat="server" Text="Address: "></asp:Label> </td><td> <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"> </asp:TextBox></td> </tr> </table> </asp:Panel> ................///// //For Personal information <asp:Panel ID="Panel1" runat="server" BorderColor="Black" BorderWidth="2px" BackColor="#CCCCCC" Width="300px"> <table><tr> <td><asp:Label ID="Label7" runat="server" Text="Personel Information" Font-Bold="True"></asp:Label></td> <td><asp:Label ID="Label8" runat="server" Text="Label"></asp:Label></td> </tr></table> </asp:Panel> <asp:Panel ID="Panel4" runat="server" Width="300px" BackColor="#CCCC00"> <table> <tr> <td> <asp:Label ID="Label9" runat="server" Text=""></asp:Label></td><td> </td> </tr> <tr><td> <asp:Label ID="Label10" runat="server" Text=""></asp:Label></td> <td> </td></tr> <tr><td> <asp:Label ID="Label11" runat="server" Text=""> </asp:Label></td><td> </td> </tr> <tr><td>
<asp:Label ID="Label12" runat="server" Text=""></asp:Label> </td><td> </td> </tr> </table> </asp:Panel> ...........////// //Extender Control(Personal Information) <cc1:CollapsiblePanelExtender ID="Panel4_CollapsiblePanelExtender" runat="server" Enabled="True" TargetControlID="Panel4" ExpandControlID="Panel1" TextLabelID="Label8" CollapseControlID="Panel1" CollapsedText="(Show Information..)" ExpandedText="(Hide Information..)" Collapsed="True"> </cc1:CollapsiblePanelExtender> ......//// //Extender Control(Enter Information) <cc1:CollapsiblePanelExtender ID="Panel1_CollapsiblePanelExtender" runat="server" Enabled="True" TargetControlID="Panel3" CollapseControlID="Panel2" ExpandControlID="Panel2" TextLabelID="Label5" CollapsedText="(Show Panel..)" ExpandedText="(Hide Panel..)"> </cc1:CollapsiblePanelExtender> .....///// </form> </body> </html>
On click event of button (Default.aspx.cs)
protected void Button1_Click(object sender, EventArgs e) { Label9.Text = "Hello!!!" + " " + TextBox1.Text.ToString(); Label10.Text = "Your Phone Number:" + " " + TextBox3.Text.ToString(); Label11.Text = "Company Name:" + " " + TextBox4.Text.ToString(); Label12.Text = "Address:" + " " + TextBox2.Text.ToString(); }
The Design View of Page
Step 4. Debug the Application. Click on the Enter Information bar you make Hide Panel and Show panel.
Click on Submit Button, only Personal Information bar shown.
Click on Bar Show Infomation
If you want to hide the Information, Click on Ba
DropShadow Control
DropShadow is an extender control which applies a "Drop Shadow" to a Panel on basis of Opacity, that can be changed using opacity property of Extender Control. If you would like rounded corners for the Panel you can use Rounded property and set Radius on the basis of Requirement. Properties TargetControlID: The ID of the Control for this extender to operate on Width: The width, in pixels of the drop shadow. Default value is 5. Opacity: The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default value is .5. TrackPosition: Whether the drop shadow should track the position of the panel. Rounded: Set to true to set rounded corners on the target and the shadow. Default is false.
How to use Application Step 1. Drag ScriptManager and Panel on your Page.
Click on Add Extender
A new small window open. Click on Ok.
To show properties of Extender Control click on properties.
Step 2. Add two CheckBox to show extender property of Rounded and Show Shadow.
Design Code (default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>DropShadow</title> </head> <body> <form id="DropShadow" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:Panel ID="Panel1" runat="server" BackColor="Gray" Width="300px">
<table><tr><td> <asp:Label ID="Label1" runat="server" Text="Name: "></asp:Label> </td><td> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td></tr> <tr><td> <asp:Label ID="Label2" runat="server" Text="Company name: "> </asp:Label></td><td> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td></tr> </table> </asp:Panel> <table><tr><td>Show Shadow:</td><td> <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" oncheckedchanged="CheckBox1_CheckedChanged" /></td></tr><tr> <td>Rounded:</td><td> <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" oncheckedchanged="CheckBox2_CheckedChanged" /></td></tr></table> <cc1:DropShadowExtender ID="Panel1_DropShadowExtender" runat="server" Enabled="True" TargetControlID="Panel1" Opacity="0"> </cc1:DropShadowExtender> </form> </body> </html>
When Checked Chekboxes, Properties are changed. The .cs Code (Default.aspx.cs)
protected void CheckBox1_CheckedChanged(object sender, EventArgs e) { if (CheckBox1.Checked) { Panel1_DropShadowExtender.Opacity = 5; } else { Panel1_DropShadowExtender.Opacity = 0; } } protected void CheckBox2_CheckedChanged(object sender, EventArgs e) { if (CheckBox2.Checked) { Panel1_DropShadowExtender.Rounded = true; } else { Panel1_DropShadowExtender.Rounded = false; } }]
Step 3. Debug the Application. The output be the
Click on CheckBox (Show Shadow)
Click on CheckBox (Rounded)
FilteredTextBox Control
FilteredTextBox is an extender control, which prevents the user to entering invalid characters into a text box on the developer choice. This Control is useful when you want to validate control data without uses validation control. Properties TargetControlID: The ID of the text box for this extender to operate on. FilterType: A the type of filter which you want to apply, as a combination of Special Characters and other symbols. In Additional LowercaseLetters, UppercaseLetters, and Custom. If you selected Custom then valid characters specified. FilterMode: On which Property you validated the filter, means its on Valid character or Invalid character . ValidChars: A string consisting of all characters considered valid for the text field, if "Custom" is specified as the filter type. Otherwise this parameter is ignored. InvalidChars: A string consisting of all characters considered invalid for the text field, if "Custom" is specified as the filter type and "InvalidChars" as the filter mode. Otherwise this parameter is ignored. FilterInterval: An integer containing the interval (in milliseconds) in which the field's contents are filtered, defaults to 250.
How to use FilteredTextBox Control Step 1. Drag ScripManager and Five TextBoxes and labels to show different property of FilteredTextBox control.
Step 2. Click on Add Extender, A window be Open. Select FilterTextBoxExtender and press Ok.
Repeat step1 and step2 for other TextBoxes. Property be change on the basis of your requirement for each TextBox. For More help see Design code.
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body>
<form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <table><tr><td> <asp:Label ID="Label1" runat="server" Text="Only numbers: "> </asp:Label></td><td> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:FilteredTextBoxExtender ID="TextBox1_FilteredTextBoxExtender" runat="server" Enabled="True" FilterType="Numbers" TargetControlID="TextBox1"> </cc1:FilteredTextBoxExtender> </td></tr> <tr><td> <asp:Label ID="Label2" runat="server" Text="Lower Case Characters: "> </asp:Label></td><td> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <cc1:FilteredTextBoxExtender ID="TextBox2_FilteredTextBoxExtender" runat="server" Enabled="True" FilterType="LowercaseLetters" TargetControlID="TextBox2"> </cc1:FilteredTextBoxExtender> </td></tr> <tr><td> <asp:Label ID="Label3" runat="server" Text="Upper Case Characters: "> </asp:Label></td><td> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> <cc1:FilteredTextBoxExtender ID="TextBox3_FilteredTextBoxExtender" runat="server" Enabled="True" FilterType="UppercaseLetters" TargetControlID="TextBox3"> </cc1:FilteredTextBoxExtender> </td></tr> <tr><td> <asp:Label ID="Label4" runat="server" Text="No Digit: "></asp:Label></td> <td> <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox> <cc1:FilteredTextBoxExtender ID="TextBox4_FilteredTextBoxExtender" runat="server" Enabled="True" FilterMode="InvalidChars"
InvalidChars="1234567890" TargetControlID="TextBox4"> </cc1:FilteredTextBoxExtender> </td></tr> <tr><td> <asp:Label ID="Label5" runat="server" Text="Only Maths Symbol: "> </asp:Label></td><td> <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox> <cc1:FilteredTextBoxExtender ID="TextBox5_FilteredTextBoxExtender" runat="server" Enabled="True" TargetControlID="TextBox5" ValidChars="+-*/."> </cc1:FilteredTextBoxExtender> </td></tr> </table> </form> </body> </html>
Step 3. Debug the Application
RoundedCorners Control
The RoundedCorners extender applies rounded corners to existing elements. It is a simple control in use and make your application attractive. Here you can choose the corners as your choice from property of Extender Control, None, TopLeft, TopRight, BottomRight,
BottomLeft, Top, Right, Bottom, Left with there Radius ( it is also a property of Extender control). Properties TargetControlID: The ID of the button or link for this extender to operate on Radius: Default is 5, the radius of the corners Corners: The corners of the target panel that will be rounded (can be None, TopLeft, TopRight, BottomRight, BottomLeft, Top, Right, Bottom, Left, or All)
How to use RoundedCorners Controls Step 1. Drag ScriptManager and a Panel Control on your page. Click on Add Extender.
A new window open, click on RoundedCornersExtender Control then click Ok.
Step 2. You can Change properties as your requirements. you can change color , Which corner you want to round and radius of the corners, Border color.
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .style1 { text-align: center; } .style2
{ text-align: justify; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:Panel ID="Panel1" runat="server" BackColor="Silver" BorderColor="Black" Font-Bold="True" Font-Size="X-Large" Width="300px"> <div class="style1"> ASP.Net Ajax</div> <div class="style2" style="font-family: 'Times New Roman', Times, serif; font-size: medium; font-weight: normal; font-style: normal; background-color: #6666FF;"> Ajax (Asynchronous JavaScript and XML) is a new paradigm introduced in 2005. To use Ajax, able to trade data, with a web server, without having to load a new page. The purpose of Ajax is that of giving the illusion that websites are responsive. It achieves this by processing requests which involve the sending and receiving of small packets of data without refreshing the web browser. Ajax is a technique for creating fast and dynamic web pages. In other words, Ajax allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.</div> </asp:Panel> <cc1:RoundedCornersExtender ID="Panel1_RoundedCornersExtender" runat="server" Enabled="True" TargetControlID="Panel1"> </cc1:RoundedCornersExtender> </form> </body> </html>
ResizableControl
ResizableControl is an extender that attaches to any control or page element on a web page and allowed the user to resize that control. This control provide a handle, that attached to lower-right corner of the control. from that image user resized the image on web page. this handle image action perform by the CSS code. Properties TargetControlID: ID of the control that will server as the resizable control. MinimumWidth: Minimum width for the control that is attached to the Extender control. MinimumHeight: Minimum height for the control that is attached to the Extender control. MaximumWidth: Maximum resizable width allowed for the control. MaximumHeight: Maximum resizable height allowed for the control. HandleCssClass: It displays the image at the bottom-left side of the attached control that handles the resizing behavior. CSS class name to apply the style on resizable Handle.
ResizableCssClass: CSS class name to apply the style on control when you performed the resize action. HandleOffsetX: Horizontal offset for the resizable handle. HandleOffsetY: Vertical offset for the resizable handle. onClientResizeBegin: client side event fires when the attached control starts resize action. onClientResizing: When the attached control is being resized, client side event fires. onClientResize: When the attached control has been resized client side event fires.
How to use ResizableControl Step 1. Drag ScriptManager and a Panel Control from Tool box. click on Add Extender.
A new window Open. Click on ResizableControlExtender and click on Ok, control be added.
Step 2. Change property of Panel according to your choice.
Step 3. Set the Property of Extender control and add Property HandleCssClass to show the Handle, from where user resize the control. The CSS Code given Below.
<style type="text/css"> .handle { width:16px; height:16px; backgroundimage:url(images/HandleGrip.png); overflow:hidden; cursor:se-resize; }
A small JavaScript code to Show control Size in a Alert box, when user perform resizable operation for the control. This Method call on the Property onClientResize.
<script type="text/javascript"> function onResize(sender, eventArgs) { var e = sender.get_element(); alert("Current height and width of Resizable Panel:\n\nwidth: " + e.scrollWidth + ", height: " + e.scrollHeight); } </script>
Other property of extender Control you can change according to your choice show below.
Step 4. Drag a button Control on your page to reset the control property, and paste the code given below (Default.aspx.cs)
protected void Button1_Click(object sender, EventArgs e) { System.Drawing.Size s = Panel1_ResizableControlExtender.Size; Panel1_ResizableControlExtender.Size = new System.Drawing.Size(s.Width=150, s.Height=150); }
The Design Code of Page (Default.aspx). This make better help to you understand.
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ResizableControl </title> </head> <body> <form id="ResizableControl" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:Panel ID="Panel1" runat="server" BackColor="#CCCC00" Height="150px" Width="150px"> <b style="font-family: 'Times New Roman', Times, serif; font-size: xx-large; font-weight: bold; font-style: normal; color: #800000; text-align: center;"> AJAX</b> </asp:Panel> <cc1:ResizableControlExtender ID="Panel1_ResizableControlExtender" runat="server" MinimumHeight="50" MinimumWidth="50" MaximumHeight="400" MaximumWidth="400" HandleCssClass="handle" OnClientResize="onResize" TargetControlID="Panel1"> </cc1:ResizableControlExtender> <style type="text/css"> .handle { width:16px; height:16px; background-image:url(images/HandleGrip.png); overflow:hidden; cursor:se-resize; } </style> <script type="text/javascript"> function onResize(sender, eventArgs) { var e = sender.get_element(); alert("Current height and width of Resizable Panel:\n\nwidth:
" + e.scrollWidth + ", height: " + e.scrollHeight); } </script> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Reset" /> </form> </body> </html>
Click on Ok and resized the Panel. The alert box show the current size of the Panel.
Clicking on Reset Button to reset the Panel size.
PopupControl 1. PopupControl is an ASP.NET AJAX extender that can be attached to any control and
provide to open popup content when action perform on the control. One control added with the property TargetControlID and popup control added with the property PopupControlID. This popup window normaly activated inside ASP.NET AJAX UpdatePanel, so it will show partial page postback. Popup window can contain any content, including ASP.NET server controls, HTML elements, etc.
2. 3.
Properties TargetControlID: The ID of the control to which attach Extender Control. PopupControlID: The ID of the popup control to display. Position: Optional setting specifying where the popup should be positioned. (Left, Right, Top, Bottom, Center) CommitProperty: Optional setting specifying the property on the control being extended that should be set with the result of the popup. CommitScript: Optional setting specifying additional script.
OffsetX/OffsetY: The number of pixels to offset the Popup from its default position, as specified by Position. Animations: Generic animations for the PopupControlExtender. OnShow: The OnShow animation will be played each time the popup is displayed. The popup will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the popup along with any other visual effects. OnHide: The OnHide animation will be played each time the popup is hidden.
How to use Popup Control Step 1. Drag ScriptManager and a TxetBox Control on your page.
Click on Add Extender... , a small window open, select PopupControlEtender and Click on Ok.
Step 2. Drag a Panel control ( and add a RadioButtonList Control in this Panel) inside the UpdatePanel. Paste the ControlID of Panel to the Property PoppupControlID of Extender Control, means when click on text box the Panel show with RadioButtonList.
Step 3. Drag a button control and a label control inside the another UpdatePanel and trigger the Button control to the UpdatePanel on the Event Name Click show in fig.
Step 4. View of your page when adding all Control.
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>PopupControl</title> </head> <body> <form id="PopupControl" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <cc1:PopupControlExtender ID="TextBox1_PopupControlExtender" runat="server" DynamicServicePath="" Enabled="True" ExtenderControlID="" TargetControlID="TextBox1" PopupControlID="Panel1"> </cc1:PopupControlExtender> <b>Information About: </b><asp:TextBox ID="TextBox1" runat="server" BackColor="#CCCCCC" Font-Bold="True" Height="28px" Width="312px">
</asp:TextBox> <asp:Panel ID="Panel1" runat="server" BackColor="#CCCCCC" Height="150px" Width="100px"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:RadioButtonList ID="RadioButtonList1" runat="server" onselectedindexchanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="True"> <asp:ListItem Value="Object Oriented Programming Language"> Java</asp:ListItem> <asp:ListItem Value="Web Development Technology"> ASP.Net</asp:ListItem> <asp:ListItem Value="System Application Programming">C</asp:ListItem> <asp:ListItem Value="Object Oriented Programming">C++</asp:ListItem> <asp:ListItem Value="Nothing">No choice</asp:ListItem> </asp:RadioButtonList> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <asp:UpdatePanel ID="UpdatePanel2" runat="server"><ContentTemplate> <asp:Label ID="Label1" runat="server" ForeColor="#993300"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Show Information" style="top: 73px; left: 338px; position: absolute; height: 26px; width: 117px" /> </form> </body> </html>
Click on RadioButtonList control, the selected item show in a Text Box (Default.aspx.cs)
protected void RadioButtonList1_SelectedIndexChanged(object sender,
EventArgs e) { if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue)) { TextBox1_PopupControlExtender.Commit(RadioButtonList1.SelectedValue); } else { TextBox1_PopupControlExtender.Cancel(); } RadioButtonList1.ClearSelection(); }
On Button Click to show all Information
protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "You Select a " + TextBox1.Text.ToString() + " at the time" + DateTime.Now.ToLongTimeString(); }
Step 5. Debug the Application. Select one Item.
Select ASP. Net
Click on Show Information
ListSearchExtender Control
The ListSearchExtender provide facility to search items in a ListBox or DropDownList by typing a word or phrase word. This control performs an incremental search within the ListBox. The prompt message is displayed when you click the list, that can changed along with its CSS class and position. Properties PromptText: Default is 'Type to search' is display when the ListBox or DropDownList is given focus. The PromptText is replaced by the search text typed by the user. PromptCssClass: The name of the CSS class to apply to the prompt message. PromptPosition: Indicates whether the message should appear at the Top or Bottom of the ListBox. The default is Top. QueryPattern: Indicates how the typed characters should be used in the search query.
IsSorted: Indicates if items added to the List are expected to be sorted. The default is false. If set to true it allows the code to perform a faster search instead of having to determine the same before performing the search. QueryTimeout: Indicates whether the search query should be reset after the timeout if no match is found. The default is 0, meaning no auto reset behavior. Animations: Generic animations for the ListSearch extender. OnShow: The OnShow animation will be played each time the extender's prompt is displayed. The prompt will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the prompt along with any other visual effects. OnHide: The OnHide animation will be played each time the extender's prompt is hidden.
How to use ListSearchExtender Control Step 1. Drag ScriptManager and a ListBox control on your page. Click on Add Extender...
Small window open, select ListSearchExtender and press Ok.
Step 2. Design Code (Default.aspx) <%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ListSearchExtender</title> </head> <body> <form id="ListSearchExtender" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div>
<asp:ListBox ID="ListBox1" runat="server" style="top: 83px; left: 9px; position: absolute; height: 70px; width: 78px"> </asp:ListBox> <cc1:ListSearchExtender ID="ListBox1_ListSearchExtender" runat="server" Enabled="True" IsSorted="True" PromptCssClass="" PromptText="Type to search.." TargetControlID="ListBox1"> </cc1:ListSearchExtender> </form> </body> </html>
To show and search data in ListBox make a method ItemList() and call this onLoad() method when any event fired. CS Code (Default.aspx.cs)
protected override void OnLoad(EventArgs e) { base.OnLoad(e); ListBox1.DataSource = ItemList(); ListBox1.DataBind(); } private static string[] wordListText; public string[] ItemList() { if (null == wordListText) { string[] tempWordListText = new string[] { "Alfa","Alpha", "Bravo","Charlie","Delta", "Echo","Foxtrot", "Golf", "Hotel", "India","Juliett", "Juliet","Kilo", "Lima","Mike", "November","Oscar","Papa", "Quebec","Romeo", "Sierra", "Tango","Uniform", "Victor", "Whiskey", "Xray","Xray","Yankee","Zulu", "Zero", "Nadazero", "One", "Unaone","Two", "Bissotwo", "Three","Terrathree", "Four","Kartefour","Five","Pantafive","Six", "Soxisix","Setteseven","Eight", "Oktoeight", "Nine","Novenine" }; Array.Sort(tempWordListText); wordListText = tempWordListText; } return wordListText; }
Step 3.Debug the Application without using CSS (PromptCssClass=""), property has no css class Output will be
Type a word, which you want to search
Step 4. If you want to change the look of entering text (Type to search) then add CSS (written this code and Paste the Class name in the Property (PromptCssClass="ListSearchExtender") of Extender Control).
<style type="text/css">
.ListSearchExtender { font-style:italic; color:Gray; background-color:white; } </style>
Debug The Application. The Enter Text (Type to search) view changed.
MaskedEdit Control
MaskedEdit is an ASP.NET AJAX extender that attaches to a TextBox control to make restriction on user inputted text. MaskedEdit applies a "mask" to the input that permits only certain types of characters/text to be entered. Formats are: Number, Date, Time, and DateTime. MaskedEdit uses the culture settings specified in the CultureName property. MaskedEdit Properties MaskType: Type of validation to perform: None - No validation Number - Number validation Date - Date validation Time - Time validation DateTime - Date and time validation AcceptAMPM: True to display an AM/PM symbol AcceptNegative: True if the negative sign (-) is allowed None - Do not show the negative sign Left - Show the negative sign on the left of the mask Right - Show the negative sign on the right of the mask AutoComplete: True to automatically fill in empty mask characters not specified by the user MaskType=Number - Empty mask characters will be filled with zeros MaskType=Time - Empty mask characters will be filled with the current time
MaskType=Date - Empty mask characters will be filled with the current date MaskType=DateTime - Empty mask characters will be filled with the current date/time AutoCompleteValue: Default character to use when AutoComplete is enabled Century - Default century used when a date mask only has two digits for the year ClearMaskOnLostFocus: True to remove the mask when the TextBox loses focus ClearTextOnInvalid: True to clear the TextBox when invalid text is entered ClipboardEnabled: True to allow copy/paste with the clipboard ClipboardText: Prompt text to use when a clipboard paste is performed DisplayMoney: Specifies how the currency symbol is displayed None - Do not show the currency symbol Left - Show the currency symbol on the left of the mask Right - Show the currency symbol on the right of the mask ErrorTooltipCssClass: CSS class for the tooltip message ErrorTooltipEnabled: True to show a tooltip message when the mouse hovers over an invalid TextBox Filtered: Valid characters for mask type "C" (case-sensitive) InputDirection: Text input direction LeftToRight - Left to Right RightToLeft - Right to left MessageValidatorTip: Message displayed when editing in TextBox PromptChararacter: Prompt character for unspecified mask characters UserDateFormat: Custom date format UserTimeFormat: Custom time format OnFocusCssClass: CSS class used when the TextBox receives focus OnFocusCssNegative: CSS class used when the TextBox gets focus with a negative value OnBlurCssNegative: CSS class used when the TextBox loses focus with a negative value OnInvalidCssClass: CSS class used when the text is not valid. CultureName: Name of culture to use (overrides the default page culture) CultureAMPMPlaceholder: Culture override CultureCurrencySymbolPlaceholder: Culture override CultureDateFormat: Culture override CultureDatePlaceholder: Culture override CultureDecimalPlaceholder: Culture override CultureThousandsPlaceholder: Culture override CultureTimePlaceholder: Culture override
MaskedEditValidator Properties ControlToValidate: ID of the TextBox to validate ControlExtender: ID of the MaskedEditExtender attached to the TextBox AcceptAMPM: Whether or not AM/PM is accepted on times. The default value is false. ClientValidationFunction: Client script used for custom validation InitialValue: Initial value of the TextBox IsValidEmpty: True if the TextBox can be empty MaximumValue: Maximum value of the input MinimumValue: Minimum value of the input ValidationExpression: Regular expression used to validate the input
TooltipMessage: Message displayed when the TextBox has focus with an empty value EmptyValueMessage: Message displayed when empty and TextBox has focus EmptyValueBlurredText: Message displayed when empty and TextBox does not have focus InvalidValueMessage: Message displayed when invalid and TextBox has focus InvalidValueBlurredMessage: Message displayed when invalid and TextBox does not have focus MaximumValueMessage: Message displayed when maximum value exceeded and TextBox has focus MaximumValueBlurredMessage: Message displayed when maximum value exceeded and TextBox does not have focus MinimumValueMessage: Message displayed when minimum value exceeded and TextBox has focus MinimumValueBlurredText: Message displayed when minimum value exceeded and TextBox does not have focus
How to use MaskedEdit Control Step 1. Drag ScriptManager and a TextBox Control.
Click on Add Extender, small window open. Select MaskEditExtender and click on Ok. Control is Added.
Step 2. This Textbox is masked only for the entering Numbers, range of the number is set with the help of properties. The property window given below. Property Changing on basis of your choice After
Step 3. Add a MaskedEditValidator to validate TextBox Control.
Go to the Property of ValidatorControl and set the property, which type you validate like show in fig.
Step 4. If you want to view messages on your cursor then add these CSS classes to your application. <style type="text/css"> .MaskedEditFocus
{ background-color: #ffffcc; color: #000000;} .MaskedEditError {background-color: #ffcccc;} .MaskedEditFocusNegative { background-color: #ffffcc; color: #ff0000;} .MaskedEditBlurNegative {color: #ff0000;}</style> Design code (Default.aspx) <%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>MaskedEdit</title></head> <body><form id="MaskedEdit" runat="server"><div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager></div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:MaskedEditExtender ID="TextBox1_MaskedEditExtender" runat="server" AcceptAMPM="True" CultureAMPMPlaceholder="" CultureCurrencySymbolPlaceholder="" CultureDateFormat="" CultureDatePlaceholder="" CultureDecimalPlaceholder="" CultureThousandsPlaceholder="" CultureTimePlaceholder="" Enabled="True" InputDirection="RightToLeft" Mask="9,999,999.99" MaskType="Number" TargetControlID="TextBox1" ErrorTooltipEnabled="True"> </cc1:MaskedEditExtender> <cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="TextBox1_MaskedEditExtender" ControlToValidate="TextBox1" Display="Dynamic" EmptyValueBlurredText="*" EmptyValueMessage="Blank not Allowed" InvalidValueBlurredMessage="*" InvalidValueMessage="Only number required" MaximumValue="12000" MaximumValueBlurredMessage="*" MaximumValueMessage=">12000" MinimumValue="50" MinimumValueBlurredText="*" MinimumValueMessage="<50" TooltipMessage="Enter the No. between 50 to 12000" IsValidEmpty="False"> </cc1:MaskedEditValidator></form></body></html>
Value must be entered
Enter the number less than 50 the message shows that you enter less than 50 (value not allowed).
Enter the Number greater than 12000, message will shown.
ValidatorCallout Control
ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators.To use this control, add Validator control to the normal control which you validate and then add validatorCollout to the Validator Control.. Properties TargetControlID: The ID of the Validator to extend Width: The width of the callout CssClass: Name of the CSS class used to style the ValidatorCallout. See the ValidatorCallout Theming section for more information. HighlightCssClass: A CssClass to apply to the invalid field WarningIconImageUrl: The path to a custom warning icon image CloseImageUrl: The path to a custom close image Animations: Generic animations for the ValidatorCallout extender. See the Using Animations walkthrough and Animation Reference for more details.
How to use ValidatorCallout Control Step 1.Add ScriptManager and TextBoxes on your page. Step 2.Add ValidatorControl from your Tool Box, which type you want to use on the particular text boxes
Click on Add Extender, a new window open. Select ValidaterCalloutExtender and click on Ok
Step 3. Step2 repeated for all validator controls which you used in your application. Set there Property as your requirements like show in fig. for a selected ValidatorControl.
Step 4. The Design Code (default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ValidatorCallout</title></head><body> <form id="ValidatorCallout" runat="server"><div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager></div> <table><tr><td>Enter your Name: </td> <td><asp:TextBox ID="TextBox1" runat="server" TabIndex="1" BackColor="Silver"></asp:TextBox> </td></tr><tr> <td>Passward: </td><td> <asp:TextBox ID="TextBox2" runat="server" TabIndex="2" TextMode="Password" BackColor="Silver"></asp:TextBox></td></tr> <tr><td>Retype Passward: </td><td> <asp:TextBox ID="TextBox3" runat="server" TabIndex="3" TextMode="Password" BackColor="Silver"> </asp:TextBox></td></tr></table> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="<b>Field Missing</b><br/> Name is Required" Display="None"></asp:RequiredFieldValidator> <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1"> </cc1:ValidatorCalloutExtender> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="<b>Field Missing</b><br/>Name is Required" ControlToValidate="TextBox2" Display="None"> </asp:RequiredFieldValidator> <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" TargetControlID="RequiredFieldValidator2"> </cc1:ValidatorCalloutExtender> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox3" ErrorMessage="<b>Field Missing</b><br/> Name is Required" Display="None"></asp:RequiredFieldValidator> <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender4" runat="server"
TargetControlID="RequiredFieldValidator3"> </cc1:ValidatorCalloutExtender> <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="<b>Password Not Match</b><br/>Enter Same Password" ControlToCompare="TextBox2" ControlToValidate="TextBox3" Display="None"></asp:CompareValidator> <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="CompareValidator1"> </cc1:ValidatorCalloutExtender> <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><asp:Label ID="Label1" runat="server" FontBold="True" ForeColor="#993300"></asp:Label></ContentTemplate><Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers></asp:UpdatePanel></form></body></html>
Design View
On button Click (Default.aspx.cs)
protected void Button1_Click(object sender, EventArgs e) { Label1.Text = String.Format("Hello!! {0},your Passward is {1}", TextBox1.Text,TextBox2.Text); }
Step 5.Debug the Application Value compulsory
Password Not Match
Input Correct Information
PasswordStrength Control 1. PasswordStrength is an ASP.NET AJAX extender that can be attached to an ASP.NET
TextBox control used for the entry of passwords.
2. The PasswordStrength extender shows the strength of the password in the TextBox 3.
and updates itself as the user types the password. The indicator can display the strength of the password as a text message or with a progress bar indicator.
Properties TargetControlID: ID of the TextBox, which you add extender control DisplayPosition: Positioning of the strength indicator relative to the target control StrengthIndicatorType: Strength indicator type (Text or BarIndicator) PreferredPasswordLength: Preferred length of the password PrefixText: Text prefixed to the display text when StrengthIndicatorType=Text TextCssClass: CSS class applied to the text display when StrengthIndicatorType=Text MinimumNumericCharacters: Minimum number of numeric characters MinimumSymbolCharacters: Minimum number of symbol characters (ex: $ ^ *) RequiresUpperAndLowerCaseCharacters: Specifies whether mixed case characters are required MinimumLowerCaseCharacters: Only in effect if RequiresUpperAndLowerCaseCharacters property is true MinimumUpperCaseCharacters: Only in effect if RequiresUpperAndLowerCaseCharacters property is true TextStrengthDescriptions: List of semi-colon separated descriptions used when StrengthIndicatorType=Text (Minimum of 2, maximum of 10; order is weakest to strongest) BarBorderCssClass: CSS class applied to the bar indicator's border when StrengthIndicatorType=BarIndicator BarIndicatorCssClass: CSS class applied to the bar indicator's inner bar when StrengthIndicatorType=BarIndicator HelpStatusLabelID: Control ID of the label used to display help text HelpHandleCssClass: CSS class applied to the help element used to display a dialog box describing the password requirements HelpHandlePosition: Positioning of the help handle element relative to the target control
How to Use PasswordStrength Control Step 1. Drag ScriptManager and a TextBox control on your page
Click on Add extender, a new window open. Select PassWordStrength and click on Ok
Step 2. Drag a label to show help text and pass the ID of Label Control to the property of extender control (HelpStatusLabelID) and set other property like show in fig.
Design Code (Default.aspx) <%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>PasswordStrength</title> </head><body><form id="PasswordStrength" runat="server"><div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager></div> <table><tr><td><asp:TextBox ID="TextBox1" runat="server" MaxLength="10" TextMode="Password"></asp:TextBox>
</td></tr><tr><td><asp:Label ID="Label1" runat="server"></asp:Label> </td></tr></table><cc1:PasswordStrength ID="TextBox1_PasswordStrength" runat="server" Enabled="True" HelpStatusLabelID="Label1" PreferredPasswordLength="10" TargetControlID="TextBox1" TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent" MinimumSymbolCharacters="1"> </cc1:PasswordStrength></form></body></html>
SlideShow Control 1. SlideShow is an extender that targets image controls. 2. You can add buttons to hit previous, next and play, configured the slideshow to play 3.
automatically on render and also allowed it loop through the images in a round robin fashion and also set the interval for slide transitions. You can use a page method to supply images to the slide show or use a webservice.
Properties SlideShowServicePath: Path to the webservice that the extender will pull the images from. SlideShowServiceMethod: The webservice method that will be called to supply images. The signature of the method must match this: Note that you can replace "GetSlides" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
UseContextKey: Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of type string (as described above). NextButtonID: ID of the button that will allow you to see the next picture. PlayButtonID: ID of the button that will allow you to play/stop the slideshow. PreviousButtonID: ID of the button that will allow you to see the previous picture. PlayButtonText: The text to be shown in the play button to play the slideshow. StopButtonText: The text to be shown in the play button to stop the slideshow. PlayInterval: Interval in milliseconds between slide transitions in play mode. ImageTitleLabelID: ID of Label displaying current picture's title. ImageDescriptionLabelID: ID of Label describing current picture. Loop: Setting this to true will allow you to view images in a round-robin fashion. AutoPlay: Setting this to true will play the slideshow automatically on render.
How to use SlideShow Control Sep 1. Drag ScriptManager Control and a Image control from TollBox. Click on Add Extender.
A new small window open, Click on SlideShowExtender and then Ok.
Make a folder and add some images on Solution Explorer
Step 2. Click on Add SlideShow page method.
Written the code in .CS (Default.aspx.cs). Pass the images path for each slide to show on your web page.
[System.Web.Services.WebMethodAttribute(), System.Web.Script. Services.ScriptMethodAttribute()] public static AjaxControlToolkit.Slide[] GetSlides(string contextKey) { return new AjaxControlToolkit.Slide[]{ new AjaxControlToolkit.Slide("image/Main.jpg", "Front", "Go Ahead"), new AjaxControlToolkit.Slide("image/Baby.jpg", "Baby", "Cute"), new AjaxControlToolkit.Slide("image/Image.jpg", "Beautiful", "Most Precious"),
new AjaxControlToolkit.Slide("image/Precious.jpg", "Fabulous", "Cool Eye"), new AjaxControlToolkit.Slide("image/Face.jpg", "Face", "Black and white"), new AjaxControlToolkit.Slide("image/Cute.jpg", "Cute", "Hug Image"), new AjaxControlToolkit.Slide("image/Its Over.jpg", "Its Over", "The End"), }; }
Step 3. Add two Label Control and pass there ControlID to the property ImageDiscriptionLabelID and ImageTitleLabelID to show about image and there name as your choice. Add Three other Button Control and pass there Id to the NextButtonID , PlayButtonID and PreviousButtonID as your choice.
After adding all controls, view of your page
(Default.aspx), the design code
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>SlideShow</title> </head><body><form id="SlideShow" runat="server"> <div><asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div><table><tr><td><b>Name: </b> <asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="#FF3300"></asp:Label></td></tr> <tr><td> <asp:Image ID="Image1" runat="server"
Height="300px" ImageUrl="~/Image/ad.png" style="top: 87px; left: 11px; position: absolute" Width="500px" /> <cc1:SlideShowExtender ID="Image1_SlideShowExtender" runat="server" Enabled="True" NextButtonID="Button3" PlayButtonID="Button2" PlayButtonText="Play" PlayInterval="300" PreviousButtonID="Button1" SlideShowServiceMethod="GetSlides" SlideShowServicePath="" StopButtonText="||" TargetControlID="Image1" UseContextKey="True" ImageDescriptionLabelID="label2" ImageTitleLabelID="Label1"> </cc1:SlideShowExtender></td></tr> <tr><td><b>Description: </b><asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="#663300"></asp:Label></td></tr> <tr><td><asp:Button ID="Button1" runat="server" Text="<<" style="top: 402px; left: 171px; position: absolute; height: 26px; width: 26px; bottom: 117px" /></td><td><asp:Button ID="Button2" runat="server" Text="Play" style="top: 403px; position: absolute; height: 26px; width: 40px; left: 221px" /></td><td> <asp:Button ID="Button3" runat="server" Text=">>" style="top: 403px; left: 284px; position: absolute; height: 26px; width: 26px" /></td></tr></table></form> </body></html>
MutuallyExclusiveCheckBox Control
MutuallyExclusiveCheckBox is an ASP.NET AJAX extender that can be attached to any ASP.NET CheckBox control. By adding a number of checkboxes to the same "Key", only one checkbox with the specified key can be checked at a time. This extender is useful when a number of choices are available but only one can be chosen, similar to a radio button. The use of checkboxes however allows you to choose to uncheck a value which is not possible normally with radio buttons. Properties TargetControlID: The ID of the CheckBox to modify Key: The unique key to use to associate checkboxes. This key does not respect INamingContainer renaming.
How to use MutuallyExclusiveCheckBox Step 1.Drag ScriptManager and two CheckBox Control from Toolbox, click on Add Extender
A new window open, Select MutuallyExclusiveCheckBoxExtender and press Ok.
This process done for second CheckBox Step 2.Open the property of both checkBoxes and add a same Key property.
Step 3. The Design view of your web page.
Default.aspx <%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>MutuallyExclusiveCheckBox</title></head><body> <form id="MutuallyExclusiveCheckBox" runat="server"> <div><asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager></div> <asp:Label ID="Label1" runat="server" Text="Select a Gender: " Font-Bold="True"></asp:Label> <asp:CheckBox ID="CheckBox1" runat="server" Text="Male" /> <cc1:MutuallyExclusiveCheckBoxExtender ID="CheckBox1_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Check" TargetControlID="CheckBox1"> </cc1:MutuallyExclusiveCheckBoxExtender> <asp:CheckBox ID="CheckBox2" runat="server" Text="Female"
/> <cc1:MutuallyExclusiveCheckBoxExtender ID="CheckBox2_MutuallyExclusiveCheckBoxExtender" runat="server" Enabled="True" Key="Check" TargetControlID="CheckBox2"> </cc1:MutuallyExclusiveCheckBoxExtender> </form></body></html>
Step 4. Debug the Application. You select only one item at a time.
NumericUpDown Control
NumericUpDown is an ASP.NET AJAX extender, can be attached to an ASP.NET TextBox control and used to add "up" and "down" buttons to increment and decrement the value in the TextBox on developer choice. Increment and decrement can be simple +1/-1 arithmetic. This Increase or decrease the value of provided list of values (like the months of the year), or they can call a Web Service to determine the next value. Properties TargetControlID: The ID of the TextBox to modify. Width: Combined size of the TextBox and Up/Down buttons (min value 25). This property is not used if you provide custom buttons. RefValues: A list of strings separated by semicolons (;) to be used as an enumeration by NumericUpDown Step: Step used for simple numeric incrementing and decrementing. The default value is 1. TargetButtonDownID/TargetButtonUpID: Reference to custom Up/Down buttons. ServiceDownPath/ServiceUpPath: Path to a web service that returns the data used to get the next or previous value.
ServiceDownMethod/ServiceUpMethod: Web service method that returns the data used to get the next or previous value, or the name of a method declared on the Page which is decorated with the WebMethodAttribute. Tag: Specifies a custom parameter to pass to the Web Service Minimum: The minimum value allowed by the extender. Maximum: The maximum value allowed by the extender.
How to use NumericUpDown Control Step 1.Drag ScriptManager and a TextBox Control from ToolBox.
Click on add Extender and select NumericUpDownExtender and press ok
Step 2. If you want to use Web method then click on below two label (Add "Get Next"..,Add "Get Previous"..) as your requirement. We use simple application of this control.
Step 3. Properties of control. Pass the Months name to the property RefValues and fix the Width and Step as your choice. You can use Web Services and type the path of services using property ServiceUpPath and SeviceDownPath.
The Design code of the Page (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>NumericUpDown</title></head><body> <form id="NumericUpDown" runat="server"> <div><asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager></div> <asp:TextBox ID="TextBox1" runat="server" Text="April" Width="120" style="textalign:center"></asp:TextBox> <cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="TextBox1" Width="120" RefValues="January;February;March;April;May;June; July;August;September;October;November;December" ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID=""> </cc1:NumericUpDownExtender></form></body></html>
Modal Popup Extender Control
In ASP.Net 2.0 AJAX control toolkit provides a very useful control as ModalPopupExtender that provides the functionality of popup without opening the new browser window.ModalPopup Extender comes in handy when you want to display information on the page modally.The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page.ModalPopupExtender works within the same window of web browser that popup on the fixed content of a page.When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the modal content and optionally runs custom script.ModalPopup extender control disables the fixed content on the web page, places a layer on it and displays a new web form with other interactive controls to get the user input. Modal Popup Properties TargetControlID - ID of the button or link button control that will produce the ModalPopup. PopupControlID - You can pass the ID of panel server control having the controls layout inside it that
will appear as a modal popup on the web page.
CancelControlID - T0 cancels the modal popup OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title
which will be used as a drag handle
X - The X coordinate of the top/left corner of the modal popup . Y - The Y coordinate of the top/left corner of the modal popup RepositionMode - The setting that reolves if the popup needs to be repositioned when the window is
resized or scrolled
BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed DropShadow - if true then displays a shadow of ModalPopup. OkControlID - The ID of the element that dismisses the modal popup OnOkScript - Script to run when the modal popup is dismissed with the OkControlID How To Use Mutually Exclusive Check Box Extender Control Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008 Step 2. Now go to File Menu -> New -> Web Site Step 3. Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# ,Visual Basic , J #)
Choose Visual C# Step 4. Click on the OK Button. Step 5. Now drag some controls under the AJAX Extensions. First control you are going to drag and drop on the page is - Script Manager. After that .
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Login.aspx.cs" Inherits="Login" EnableEventValidation="false"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function ok(sender, e) { $find('ModalPopupExtenderLogin').hide(); __doPostBack('LoginBtn', e); } function okJoin(sender, e) { $find('ModalPopupExtenderSignup').hide(); __doPostBack('JoinBtn', e); } function OnKeyPress(args) { if(args.keyCode == Sys.UI.Key.esc) { $find("ModalPopupExtenderLogin").hide(); } } function body_onkeydown() { if(event.keyCode==13 || event.keyCode==27) { var _defaultButtonName=getDefautButtonName( event.keyCode==13 ? "submitButton" : "cancelButton"); var frm=document.forms[0]; if(frm && document.all(_defaultButtonName)) { document.all(_defaultButtonName).click();
} } } function getDefautButtonName(className) { var _defaultButtonName=""; var children = document.getElementsByTagName("input"); for (var i = 0; i < children.length; i++) { var var1 = children[i]; var btnAction = var1.buttonAction; if(btnAction == className) { _defaultButtonName = var1.id; break; } } return _defaultButtonName; } </script> </head> <body onkeydown="body_onkeydown()"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <table style="width: 297px"> <tr> <td style="width: 36px"> <asp:LinkButton ID="Loginlnk" runat="server" Width="47px">Login</asp:LinkButton></td> <td> <asp:LinkButton ID="Signuplnk" runat="server">Sign Up</asp:LinkButton></td> </tr> <tr> <td colspan="2"> <asp:Label ID="successLabel" runat="server" Width="273px" Visible="False"></asp:Label></td> </tr> </table> <br /> <div> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderLogin" runat="server" TargetControlID="Loginlnk" PopupControlID="LoginPanel"
BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="LoginBtn" OnOkScript="ok()" CancelControlID="CancelBtn" /> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderSignup" runat="server" TargetControlID="Signuplnk" PopupControlID="SignupPanel" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="JoinBtn" OnOkScript="okJoin()" CancelControlID="CancelBtn2" /> <br /> <br /> <asp:Panel ID="LoginPanel" runat="server" CssClass="modalPopup" Style="display: none" Width="278px" Font-Names="@MS PGothic"> <table style="width: 270px"> <tr> <td style="width: 30% " align="right"> <asp:Label ID="Label10" runat="server" Height="23px" Text="UserName :"></asp:Label> </td> <td style="width: 179px" > <asp:TextBox ID="loginId" runat="server" Width="75%"></asp:TextBox></td> </tr> <tr> <td style="width: 30% " align="right"> <asp:Label ID="Label9" runat="server" Height="23px" Text="Password :"></asp:Label> </td> <td style="width: 179px"> <asp:TextBox ID="pwd" runat="server" Width="75%"></asp:TextBox></td> </tr> <tr> <td style="width: 94px"> </td> <td style="width: 179px"> <asp:Button ID="CancelBtn" runat="server" Text="Cancel" Width="52px" buttonAction="submitButton" /> <asp:Button ID="LoginBtn" runat="server" Text="Log In" OnClick="LoginBtn_Click" buttonAction="cancelButton" /></td> </tr> </table>
<br /> </asp:Panel> <br /> <asp:Panel ID="SignUpPanel" runat="server" CssClass="modalSignUp" Style="display: none" Width="539px" Font-Names="@MS PGothic"> <span style="color: #cc0000"><strong><span style="color: dimgray">Welcome to ModalPopupExtender.com<br /> </span></strong><br /> </span> If you already have an account, you can also <span style="color: dimgray"><span> login</span> </span> above. <br /> <table style="width: 452px; height: 177px;" Align="center"> <tr> <td colspan="2" style="height: 21px"> </td> </tr> <tr> <td style="width: 30% " align="right"> <asp:Label ID="Label1" runat="server" Height="23px" Text="Choose username :"></asp:Label> </td> <td style="width: 179px" > <asp:TextBox ID="txtUserName" runat="server" Width="100%"></asp:TextBox></td> </tr> <tr> <td style="width: 30%" align="right"> <asp:Label ID="Label2" runat="server" Height="23px" Text="Password :"></asp:Label></td> <td style="width: 179px"> <asp:TextBox ID="txtPassword" runat="server" Width="100%"></asp:TextBox></td> </tr> <tr> <td style="width: 30% " align="right"> <asp:Label ID="Label3" runat="server" Height="23px" Text="Confirm password :"></asp:Label> </td> <td style="width: 179px"> <asp:TextBox ID="txtConfirmPassword" runat="server" Width="100%"></asp:TextBox></td> </tr> <tr>
<td style="width: 30% " align="right"> <asp:Label ID="Label4" runat="server" Height="23px" Text="Email address:"></asp:Label></td> <td style="width: 179px"> <asp:TextBox ID="txtEmailAddress" runat="server" Width="100%"></asp:TextBox></td> </tr> <tr> <td style="width: 30% " align="right"> <asp:Label ID="Label6" runat="server" Height="23px" Text="First Name:"></asp:Label></td> <td style="width: 179px"> <asp:TextBox ID="txtFirstName" runat="server" Width="100%"></asp:TextBox></td> </tr> <tr> <td style="width: 30% " align="right"> <asp:Label ID="Label7" runat="server" Height="23px" Text="Last Name :"></asp:Label></td> <td style="width: 179px"> <asp:TextBox ID="txtLastName" runat="server" Width="100%"></asp:TextBox></td> </tr> <tr> <td style="width: 30% " align="right"> <asp:Label ID="Label5" runat="server" Height="23px" Text="Zipcode:"></asp:Label></td> <td style="width: 179px"> <asp:TextBox ID="txtZipcode" runat="server" Width="100%"></asp:TextBox></td> </tr> <tr> <td align="right" style="width: 30%; height: 18px"> <asp:Label ID="Label8" runat="server" Height="23px" Text="Gender:"></asp:Label></td> <td style="width: 179px; height: 18px"> <asp:RadioButtonList ID="rblGender" runat="server" RepeatDirection="Horizontal" Height="19px"> <asp:ListItem>Male</asp:ListItem> <asp:ListItem>Female</asp:ListItem> </asp:RadioButtonList></td> </tr> <tr> <td style="width: 104px; height: 26px;"> </td> <td style="width: 179px; height: 26px;"> <asp:Button ID="CancelBtn2" runat="server" Text="Cancel"
Width="52px" /> <asp:Button ID="JoinBtn" runat="server" Text="Join" OnClick="JoinBtn_Click" /></td> </tr> </table> <br />
</asp:Panel> </div> </form> </body> </html>
Step 6. Now run your web site by Ctrl + F5 Step 7. Output is
MultiHandleSliderExtender Control The MultiHandleSlider extender provides a feature-rich extension to a regular asp:Textbox control.This control reduced the need to use four DropDownlist controls to hold the range values and the need for a validation control. It allows you to choose a single value, or multiple values in a range, through a graphical slider interface.It supports one handle, dual handles, or any number of handles bound to the values of asp:TextBox or asp:Label controls. It also provides options for read-only access, custom graphic styling, hover and drag handle styles, as well as mouse and keyboard support for accessibility.
MultiHandleSliderExtender Control property
EnableKeyboard - using the keyboard.,slider values can be changed EnableMouseWheel -using the mouse wheel., slider values can be changed Increment - For sliders using keyboard or mouse wheel support; determines the number of points to increment or decrement the slider values BoundControlID - For backwards compatibility, allows using classic Slider properties for a single handle. RaiseChangeOnlyOnMouseUp - fires the change event on the extended TextBox only when the left mouse button is released, If true. MultiHandleSliderTargets - An inner property describing each handle on the slider. Minimum - Minimum value allowed. Maximum - Maximum value allowed. Length - The length of the graphical slider, in pixels. Decimals - Number of decimal digits for the value. Steps - Number of discrete values inside the slider's range. EnableRailClick - Whether clicking on the rail will move the closest handle to the click location. ControlID - The TextBox or Label whose value is bound to this handle. Events
OnClientLoad - The event called when the slider is initialized. onClientDragStart - The event called when the user starts dragging a handle. OnClientDrag - The event called when the user drags the handle. OnClientDragEnd - The event called when the user stops dragging the handle. OnClientValueChanged - The event called when a handle value changes.
How To Use MultiHandleSliderExtender Control Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008 Step 2. Now go to File Menu -> New -> Web Site
Step 3. Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# ,Visual Basic , J #) Choose Visual C# Step 4. Click on the OK Button. Step 5. Now drag some controls under the AJAX Extensions. First control you are going to drag and drop on the page is - Script Manager. After that .
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body bgcolor="#9999ff"> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server" BackColor="#FF9966"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server" BackColor="#FF66FF"></asp:TextBox> <asp:TextBox ID="txtSlider" runat="server" Width="40px" BackColor="Fuchsia"></asp:TextBox> <cc1:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" runat="server" TargetControlID="txtSlider" BehaviorID="multiHandleSliderOne" Minimum="0" Maximum="100" Steps="50" Length="317">
<MultiHandleSliderTargets> <cc1:MultiHandleSliderTarget ControlID="TextBox1" /> <cc1:MultiHandleSliderTarget ControlID="TextBox2" /> </MultiHandleSliderTargets> </cc1:MultiHandleSliderExtender> </div> </form> </body> </html>
Mutually Exclusive Check Box Control

MutuallyExclusiveCheckBox is an ASP.NET AJAX extender that can be attached to any ASP.NET CheckBox control.This also provides a more consistent and expected interface than using javascript to allow the de-selection of a RadioButton item.This extender is useful when a number of choices are available but only one can be chosen, similar to a radio button.The use of Mutually Exclusive Check Box Extender it that you can select only one check box under a heading.This also provides a more consistent and expected interface than using javascript to allow the de-selection of a RadioButton item.
How To Use Mutually Exclusive Check Box Control Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008 Step 2. Now go to File Menu -> New -> Web Site
Step 3. Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# ,Visual Basic , J #) Choose Visual C# Step 4. Click on the OK Button. Step 5. Now drag some controls under the AJAX Extensions. First control you are going to drag and drop on the page is - Script Manager. After that .
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" BackColor="#999999"> <div><center>Choices...</center></div> <asp:Label ID="label1" runat="server" Text="Course" Font-Bold="true"/><br /> <br /> <asp:CheckBox ID ="CheckBox1" runat="server" Text="MCA" /><br /> <asp:CheckBox ID ="CheckBox2" runat="server" Text="B.Tech" /> <br /> <br /> <asp:Label ID="label2" runat="server" Text="Gender" Font-Bold="true" /> <br /> <br /> <asp:CheckBox ID ="CheckBox3" runat="server" Text="Male" /> <br /> <asp:CheckBox ID ="CheckBox4" runat="server" Text="FeMale" /> </asp:Panel> <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender1"
runat="server" Key="Course" TargetControlID="CheckBox1"> </cc1:MutuallyExclusiveCheckBoxExtender> <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender2" runat="server" Key="Course" TargetControlID="CheckBox2"> </cc1:MutuallyExclusiveCheckBoxExtender> <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender3" runat="server" Key="Gender" TargetControlID="CheckBox3"> </cc1:MutuallyExclusiveCheckBoxExtender> <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender4" runat="server" Key="Gender" TargetControlID="CheckBox4"> </cc1:MutuallyExclusiveCheckBoxExtender> </div> </form> </body> </html>
NoBot Control
NoBot is a control that try to provide CAPTCHA-like bot/spam prevention without requiring any user interaction.AJAX NoBot control checks whether all the client side javascript is working or has been disabled by the spamming software.ASP.Net AJAX NoBot extender Control returns different types of responses when a user sends a request and ASP.Net web page performs postback.AJAX NoBot extender control checks all the behaviors and detects whether the action is being performed by the human or automated software. NoBot Properties: OnGenerateChallengeAndResponse -this is a server side EventHandler that allows you to implement the challenge or response code to test the Javascript as well as server code. InvalidBadResponse:-When challenge script fails the test then AJAX NoBot control returns the bad response. InvalidBadSession:When ASP.Net Session State becomes unusable. CutOffMaximumInstances:optional maximum number of postbacks to allow by a single IP addresses within the cutoff window InvalidAddressTooActive: When a single clients IP remains active for a long time and performs number of postback then it returns the InvalidAddressTooActive. CutOffWindowSeconds: Optional number of seconds specifying the length of the cutoff window that tracks previous postbacks from each IP address. AJAX NoBot extender verifies the delay in requests sent by the user within a given time span.AJAX NoBot control caches the IP address of the client and counts the number of postback of a single APS.Net web page. How To Use NOBOT Control Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008 Step 2. Now go to File Menu -> New -> Web Site Step 3. Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# ,Visual Basic , J #) Choose Visual C# Step 4. Click on the OK Button. Step 5. Now drag some controls under the AJAX Extensions. First control you are going to drag and drop on the page is - Script Manager. After that .
Design code
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body bgcolor="#6666ff"> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Label ID="Label1" runat="server" Text="NoBot Response State:" Font-Bold="true" Font-Size="14px"></asp:Label> <asp:Label ID="Label2" runat="server" Font-Size="16px"></asp:Label> <div class="clear"><br /> <asp:Label ID="Label3" runat="server" Text="Client IP Address:" FontBold="true" Font-Size="14px"></asp:Label> <div class="clear"></div> <asp:Label ID="Label4" runat="server" Font-Size="16px"></asp:Label> <div class="clear"><br /> </div> <cc1:NoBot ID="NoBot1" runat="server" CutoffMaximumInstances="5" CutoffWindowSeconds="60" ResponseMinimumDelaySeconds="2" /> <asp:Button ID="Button1" runat="server" Text="Check Spam" OnClick="Button1_Click" /> </div> </form> </body> </html
using using using using using using using using using using
System; System.Configuration; System.Data; System.Linq; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts;
using System.Xml.Linq; using System.Text; using AjaxControlToolkit; using System.Collections.Generic; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { NoBotState nbs; // if condition to check the response nbs of NoBot if (NoBot1.IsValid(out nbs)) { Label2.Text = nbs.ToString(); } else { Label2.Text = nbs.ToString(); } StringBuilder sb = new StringBuilder(); // foreach loop to get cached IP address and datetime assocated with it (when last postback was occurred) foreach (KeyValuePair<DateTime, string> keyValue in NoBot.GetCopyOfUserAddressCache()) { sb.AppendFormat("{0}: {1}<br />", keyValue.Key.ToString(), keyValue.Value); } Label4.Text = sb.ToString(); } }
ReorderList Control
ReorderList is an ASP.NET AJAX control that implements a bulleted, data-bound list with items that can be reordered interactively.This is useful if the data is only to be
ordered.The ReorderList is a very powerful piece of the ASP.NET AJAX Control Toolkit. It gives you the ability to interactively reorder a list of items.The ReorderList can handle reorders in two ways, either via a callback or via a postback.the ReorderList can automatically perform reorders If the data you are displaying has a field that determines sort order (e.g. the select query is sorted by this column), and that column is of an integer type and if its SortOrderField property is set. The ReorderList can also bind to any data source that implements IList (such as Arrays). Properties of ReorderList Control DataSourceID -DataSourceID is used to populate this control AllowReorder - whether to allow drag/drop reordering. This is automatically set to true if a ReorderTemplate is present ItemTemplate - It is used as a template to display for items in the list EditItemTemplate - It is used to to display for a row that is in edit mode as a template ReorderTemplate - It is used as the template to show the drop location when doing a reorder operation. This template is not data bindable. InsertItemTemplate - It is used to show for adding new items to the list. DataKeyField - DataKeyField is The primary key field for the data SortOrderField - SortOrderField is the field that represents the sort order of the items.
ItemInsertLocation - It Determines where new items are inserted into the list, can be Beginning or End DragHandleAlignment - Where the drag handle should be relative to the item row - can be "Top", "Bottom", "Left", or "Right" DragHandleTemplate - It is used to drag handle that the user clicks and drags to reorder items. EmptyListTemplate - It is used to show when the list has no data. This item is not databindable. PostbackOnReorder - It Determines if reorders initiate a postback or callback. To use any edit or delete functionality of a data-bound list, postbacks must be enabled.
AnimationExtender Control
AnimationExtender Control is an ajax control that provides powerful animation framework with existing pages in an easy, declarative fashion animation effect .such as moving an ASP Control to a new place, resizing it, modifying its color, or making it fade in or fade out.
AnimationExtender Control property TargetControlID -It is the ID of the target control which events are used to animate OnLoad - when page is loaded, Generic animation created OnClick - when the target control is clicked,Generic animation created OnMouseOver - when the mouse moves over the target control than Generic animation created OnMouseOut - Generic animation created when the mouse moves out of the target control OnHoverOver it is same as an OnMouseOver except before it plays, stop the OnHoverOut animation OnHoverOut - It is same as an OnMouseOutr except before it plays, stop the OnHoverOut animation How To Use AnimationExtender control Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008 Step 2. Now go to File Menu -> New -> Web Site Step 3. Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# ,Visual Basic , J #) Choose Visual C# Step 4. Click on the OK Button. Step 5. Now drag some controls under the AJAX Extensions. First control you are going to drag and drop on the page is - Script Manager. After that .
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body bgcolor="#cc99ff"> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager> <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1"> <Animations> <OnClick> <Sequence> <Color AnimationTarget="Button1" Duration="50" StartValue="#FFF000" EndValue="#FF6666" PropertyKey="backgroundColor" /> <EnableAction Enabled="true" /> </Sequence> </OnClick> </Animations> </cc1:AnimationExtender> <asp:Panel ID="Panel1" runat="server"> <asp:Button ID="Button1" runat="server" Text="Animation" OnClick="Button1_Click" /> <asp:Label ID="Label1" runat="server" BackColor="#33CCFF"></asp:Label> </asp:Panel> </div> </form> </body> </html> ........................................CS CODE....................................................... using using using using using using using using using using using System; System.Configuration; System.Data; System.Linq; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; System.Xml.Linq;
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "hello!. It is a AnimationExtender Control program"; } }
Step 6. Now run your web site by Ctrl + F5
Step 7. Output is
MaskedEditExtender Control
MaskedEdit is an ASP.NET AJAX extender control that attaches to a TextBox control to prevent the kind of text that can be entered.When we use MaskedEdit ,the input is masked and the value is validated on the client according to the MaskType selection.. The MaskedEdit control integrated with the MaskedEditValidator for verify the input MaskType - Type of validation to perform: None - No validation Number - Number validation Date - Date validation Time - Time validation DateTime - Date and time validation Mask Characters and Delimiters 9 - Only a numeric character L - Only a letter $ - Only a letter or a space C - Only a custom character (case sensitive) A - Only a letter or a custom character N - Only a numeric or custom character ? - Any character / - Date separator : - Time separator . - Decimal separator , - Thousand separator \ - Escape character { - Initial delimiter for repetition of masks } - Final delimiter for repetition of masks
MaskedEditExtender Control Property AutoCompleteValue -when Auto complete is true when defult character is used. Century - when a date mask only has two digits for the year than used Default century ClearMaskOnLostFocus - If it is True then remove the mask when the TextBox loses focus ClearTextOnInvalid -If condition is true then clear the textbox when entered invalid text. ClipboardEnabled - True to allow copy/paste with the clipboard ClipboardText - when a clipboard paste is performed,then Prompt text to use . DisplayMoney - Specifies how the currency symbol is displaye How To Use MaskedEditExtender Control Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008 Step 2. Now go to File Menu -> New -> Web Site Step 3. Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# ,Visual Basic , J #) Choose Visual C# Step 4. Click on the OK Button. Step 5. Now drag some controls under the AJAX Extensions.
First control you are going to drag and drop on the page is - Script Manager. After that .
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body bgcolor="#66ff66"> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br />                            <asp:Label ID="Label1" runat="server" Text="Name" Font-
Bold="True"></asp:Label>                                <asp:TextBox ID="TextBox1" runat="server" BackColor="#CCCCFF"></asp:TextBox> <br />                           <asp:Label ID="Label2" runat="server" Font-Bold="True" Text="MobileNumber"> </asp:Label>                  <asp:TextBox ID="TextBox2" runat="server" BackColor="#FFFFCC"></asp:TextBox> <cc1:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TextBox2" MaskType="Number" Mask="9999999999" MessageValidatorTip="true" AcceptNegative="None" InputDirection="RightToLeft" ErrorTooltipEnabled="true"> </cc1:MaskedEditExtender> <cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlToValidate="TextBox2" ControlExtender="MaskedEditExtender1" MinimumValue="1000000000" MinimumValueMessage="Please enter correc mobile number" MaximumValueMessage="Invalid mobile number! The highest roll number is 105" Display="Dynamic" IsValidEmpty="false" InvalidValueMessage="The mobile number does not exist" EmptyValueMessage="Mobile number is not entered"></cc1:MaskedEditValidator> </div> </form> </body> </html>

AjaxToolkitExtender Controls

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

AjaxToolkitExtender Controls

Diunggah oleh

Hak Cipta:

Format Tersedia

AjaxToolkitExtender Controls

Animation Control Properties

OnHoverOut TargetControlID OnMouseOver OnClick OnHoverOver OnMouseOut OnLoad

1. SaveAs(string filename) AutoComplete Control

How To Use AutoComplete Control

Step 1. Drag a TextBox From Tool Box. Click on Add Extender

Design Code (Default.aspx).

TargetControlID CssClass Format PopupButtonID PopupPosition

Step 2. New Window open now add Calendar Control. Press Ok

Design Code (Default.aspx)

Step 3. Debug the Application. Output will be

Click on desire date to show in text box.

How to use CascadingDropDown Control

The Design Code (Default.aspx)

Step 3. Debug the Application. Output Will Be

Enter text in Textbox

The Design Code (Default.aspx).

Step 2. A Small Window open, select ConfirmButtonExtender and click on Ok.

If Click on Cancel. No action perform on Button Click.

Design Code (Default.aspx)

3. HeaderText: The text to display in the Tab 4. HeaderTemplate 5. ContentTemplate

Design Code (Default.aspx)

On Button Click (Default.aspx.cs) Code

TextBox5.Text).ToString(); Label5.Text = ("Email ID:" + "" + TextBox6.Text).ToString(); }

Step 3. Debug the Application. Enter Your Information.

Click on Button, show all information without full page PostBack.

13. RaiseChangeOnlyOnMouseUp: If true, fires the change event on the extended

How To Use Slider Control

Step 1. Drag ScriptManager and two TextBoxes from Tool Box.

A new small window open, select SliderExtender and click on Ok.

Design view of the page

(BoundControlID="TextBox2"): ID of the TextBox that dynamically displays the slider's value.

Step 3. Debug the application

Due to Sliding bar the value be changed in Second TextBox.

1. TargetControlID: The ID of a Panel to make draggable.

A small window Open

Select DragPanelExtender and click on Ok

<script type="text/javascript"> function setBodyHeightToContentHeight() { document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px"; } setBodyHeightToContentHeight(); </script>

Step 3. Debug the Application.

You Can Drag and fix Panel anywhere on Page.

2. It provide a SharePoint-style drop-down menu, displayed menu is any another panel

A new Small Window Open. Select DropdownExtender and click on Ok.

and Event on which the information show on Label3.

The Design view of your Application is the

Step 5. Debug the Application. Enter name and select Course.

Click on Add Extender, A new window is Open

On click event of button (Default.aspx.cs)

The Design View of Page

Click on Submit Button, only Personal Information bar shown.

Click on Bar Show Infomation

If you want to hide the Information, Click on Ba

Click on Add Extender

A new small window open. Click on Ok.

To show properties of Extender Control click on properties.

Design Code (default.aspx)

Step 3. Debug the Application. The output be the

Click on CheckBox (Show Shadow)

Click on CheckBox (Rounded)

Design Code (Default.aspx)

Step 3. Debug the Application

A new window open, click on RoundedCornersExtender Control then click Ok.

Design Code (Default.aspx)

Step 3. Debug the Application.