ajax notes full.doc
TRANSCRIPT
What is AJAX?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.Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.Why Use AJAX?In traditional JavaScript coding to get any information from a database or a file on the server, or send user information to a server, its important to make an HTML form and GET or POST data to the server. Wait for the server to respond, then a new page will load with the results when clicking Ok button to send the information. Because the server returns a new page each time . With AJAX, your JavaScript communicates directly with the
server, through the JavaScript XMLHttpRequest object With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he will not notice that scripts request pages, or send data to a server in the background. By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded. The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. How Ajax Work?History Of Ajax
During browser innovation, Netscape added a feature known as LiveScript (LiveScript became JavaScript and grew more powerful,), allowed people to put small scripts in web pages so that they could continue to do things after you’d downloaded them.
Ajax came when the Internet Explorer introduced the concept of IFrame element. Microsoft introduced another technique, called as Microsoft’s Remote Scripting that technique involved the pulling of data through means of Java Applet which communicated with the client side using scripting language like JavaScript.
As soon Microsoft introduced new XMLHttpRequest object that acts as an ActiveX control in the Internet Explorer. Finally, in the year 2006, the W3C (World Wide Web Consortium) announced the release of the first draft that included the specification for the object (XMLHttpRequest) and made it an official web standard.
AJAX (first coined in the year 2005) is not a new programming language but a relatively new technique for creating faster, better and dynamic web applications. If you have the basic understanding of HTML, XHTML, XML and JavaScript languages then you can have a go with AJAX
AJAX is basically based on the following web standard, XML HTML JavaScript CSS.
Ajax Architecture in ASP. Net
Server Script, A script is a program or set of instructions that is interpreted or carried out by another program rather than by the processor. A CGI script is an example of a server-side script .Microsoft Ajax Library, There are different library and applications:
1. Base Class Library2. Script Code Library3. Asynchronous Communications, transfer data
asynchronously.4. Browser Capability5. Browsers (IE, Firefox etc.)
ASP.Net Ajax Extensions, Ajax Extensions provide controls in build with .Net framework.
1. Ajax Server Control2. Application3. Asynchronous Communication
First Program1. Open new ASP.NET Web Site then click OK.
4.5. 2. Open Tool Box and drag ScriptManager and
UpdatePanel from AJAX Extensions. Then drag label and Button, named UsingAjax. Open properties window of UpdatePanel. Go to Triggers property and click on collection then add the controlID (Button name, which you want to make a AJAX part) and select Event
(Click). Added one another button outside the UpdatePannel ,named WithoutAjax and a added another Label.
6. 7. 8. 3. Paste the code in .cs file of the application
protected void with_ajax_Click1(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); } protected void without_ajax_Click(object sender, EventArgs e) { Label2.Text = DateTime.Now.ToString(); }
9. 4. Debug the application
10.11. Clicking on "Using Ajax Button" ,only
first time (label) will be updated without reloading whole page.
12.Clicking on "Without Ajax Button", whole page Reloaded.
Ajax ControlsYou drop the controls to your page (Default.aspx) from the Tab Ajax Extensions.1. ScriptManager ControlClient script for AJAX-enable ASP.NET Web pages managed by ScriptManager control . ScriptManager control registered the client script for the Microsoft Ajax Library with the page. Script manager support features such as
1.Partial-page rendering to the browser2.Web-service calls.
2. ScriptManagerProxy ControlWhen a ScriptManager control is already defined in a parent element (or master page or host page already contains a ScriptManager control) then used ScriptManagerProxy control to enables nested components and user control to add service and script. 3. Timer controlThe ASP.NET AJAX Timer control
1.Performed Postbacks of pages at defined intervals.
2.Timer control with an UpdatePanel control, enable partial-page updates at a defined interval.
3.If you want to post the whole page, used Timer Control.
4.The Timer control requires specific settings in a web.config file in order to function correctly.
5.If your application does not contain the required web.config file, errors appear in the Design view of the page where the control would have appeared.
4. UpdatePanel controlWhich area on web page you want to partial update, used under the UpdatePanel control. Don't
wrap your entire page within an UpdatePanel. You may use several panels on your page. UpdatePanel control is the most important control in the ASP.NET AJAX package. It will AJAX controls contained within it, allowed to partial rendering of the area on the web page. 5. UpdateProgress ControlUpdateProgress control provides status information about partial-page updates in UpdatePanel controls. UpdateProgress control provides, to customize the content. When a partial-page update is very fast, you can specify a delay before the UpdateProgress control is displayed.
ScriptManager ControlClient script for AJAX-enable ASP.NET Web pages managed by ScriptManager control . ScriptManager control registered the client script for the Microsoft Ajax Library with the page. Script manager support features such as
1. Partial-page rendering to the browser2. Web-service calls.
Dragging ScriptManager from Ajax extension.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </form></body></html>
The ASP. NET controls UpdatePanel, UpdateProgress, and Timer needed a ScriptManager control in order to support partial-page rendering. To view the property window, right click to the ScriptManager control and select Properties. Several property opened.ScriptManagerProxy Control
When a ScriptManager control is already defined in a parent element (or master page or host page already contains a ScriptManager control) then used ScriptManagerProxy control to enables nested components and user control to add service and script. When you use the ScriptManagerProxy control, added to the script and service collections defined
by the ScriptManager control. If you do not used specific scripts and services on every page that includes a particular ScriptManager control. Add them to individual pages by using the ScriptManagerProxy control and remove those scripts and services from ScriptManager Control. The ScriptManagerProxy control requires specific settings in a web.config file in order to function correctly.
Timer controlThe ASP. NET AJAX Timer control
1. Performed Postbacks of pages at defined intervals.
2. Timer control with an UpdatePanel control, enable partial-page updates at a defined interval.
3. If you want to post the whole page, used Timer Control.
4. The Timer control requires specific settings in a web.config file in order to function correctly.
5. If your application does not contain the required web.config file, errors appear in the Design view of the page where the control would have appeared.
How to use Timer Control1. Drag ScriptManager Control, UpdatePanel and label from toolbox. After this add a timer control.
2. Open the properties of Update panel. Click on collection.
3.Select controlID and give the name of your Timer control and choose the event.
Click OK
4.Paste the code in the Default.aspx.cs file on your Website
using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using
System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Timer1_Tick1(object sender, EventArgs e) { Label1.Text = System.DateTime.Now.ToString(); }}
5. The design view of your Website
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
html1-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> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> </asp:UpdatePanel> <asp:Timer ID="Timer1" runat="server"
ontick="Timer1_Tick1" Interval="60"> </asp:Timer> </form></body></html>
6. Debug the Application
UpdatePanel controlWhich area on web page you want to partial update, used under the UpdatePanel control. Don't wrap your entire page within an UpdatePanel. You may use several panels on your page. UpdatePanel control is the most important control in the ASP.NET AJAX package. It will AJAX controls contained within it, allowed to partial rendering of the area on the web page.The <asp:UpdatePanel> tag has two childtags:
1. ContentTemplate, The ContentTemplate tag holds the content of the panel. The content are anything that you would normally put on your page, from web controls2. Triggers tags, The Triggers tag allows you to define certain triggers which will make the panel update there contents. The following example will show the use of both childtags.Go to properties of UpdatePanel control, click on Triggers a new window open. Add controls, which you want to make a part of web page for partial rendering.
Click Ok
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"> </asp:AsyncPostBackTrigger> <asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="Load"> </asp:AsyncPostBackTrigger> <asp:AsyncPostBackTrigger ControlID="TextBox2">
</asp:AsyncPostBackTrigger> </Triggers> </asp:UpdatePanel> </div> <p> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server" style="top: 84px; left: 255px; position: absolute; height: 22px; width: 128px"></asp:TextBox> </p> <p> <asp:Button ID="Button1" runat="server" style="top: 160px; left: 170px; position: absolute; height: 26px; width: 56px" Text="Button" /> </p> </form></body></html>
UpdateProgress Control
UpdateProgress control provides status information about partial-page updates in UpdatePanel controls. UpdateProgress control provides, to customize the content. When a partial-page update is very fast, you can specify a delay before the UpdateProgress control is displayed.
Example1.Open a new Website. Add ScriptManager, updatePanel and UpdateProgress in order. Drag a button (named Update) control on your webpage.
2. Go to UpdatePanel Control Properties and add the Update Button to UpdatePanelTrigger Collection.
3. Design Code (Default.aspx)
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>UpdateProgress Control</title></head><body> <form id="UpdateProgress" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="update_bt" EventName="Click"> </asp:AsyncPostBackTrigger> </Triggers> </asp:UpdatePanel> <asp:Button ID="update_bt" runat="server" Text="Update" /> </div> <p> </p> <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate><img src="face.jpg" width="300" height="300" /></ProgressTemplate> </asp:UpdateProgress> </form></body></html>
<ProgressTemplate> property used to gets or sets the template, which defined the content of the UpdateProgress control. On Update Button Click (.cs Code)
protected void update_bt_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); }4. Debug the Application
Note: When Click on Update Button, the image will be appear for 5 sec. You can increase the time to increment the value in sleep method (System.Threading.Thread.Sleep(5000)).Ajax Control Toolkit Download and Install1. Download Ajax Control Toolkit 2. How to Install Ajax Controls in .Net FrameworkStep 1. Open new Website and right click on Tool Box, choose Add tab option as shown in below Image.
Step 2. Written the name of Your Ajax control tab.
Step 3. Right click on Ajax control tab Click on the Choose Items option, a new window of Choose Toolbox Items be open.
Step 4. Click on Browse.. button , and find Ajax Control Toolkit Folder (Which you downloaded) and select AjaxControlToolkit.dll file. Click on Open button then click OK.
Step 5. Controls are Downloaded. You can see in your Ajax control Tab.
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 ControlAccordion 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 modes1. 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 ControlStep 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" CodeFile="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
AlwaysVisibleControlTo 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 ControlAnimation 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. Move (to move the panel to its final location)2. Resize (to change the size of the panel)3. Fade (to fade the text in/out)4. Color (the flyout changes from gray to white
and the text pulses red)Animation Control Properties
1. OnHoverOut2. TargetControlID3. OnMouseOver4. OnClick5. OnHoverOver6. OnMouseOut7. OnLoad
AsyncFileUpload ControlAsyncFileUpload 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
Properties1. CompleteBackColor 2. ContentType3. ErrorBackColor4. FileContent 5. FileName 6. HasFile 7. OnClientUploadComplete 8. OnClientUploadError 9. OnClientUploadStarted 10. PostedFile 11. ThrobberID12. UploaderStyle 13. UploadingBackColor 14. Width
Methods1. 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" CodeFile="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 ControlCalendar 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.
Properties1. TargetControlID2. CssClass3. Format4. PopupButtonID5. 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_header3. .ajax__calendar_prev4. .ajax__calendar_title5. .ajax__calendar_next6. .ajax__calendar_body7. .ajax__calendar_days8. .ajax__calendar_dayname9. .ajax__calendar_day10. .ajax__calendar_months
11. .ajax__calendar_month12. .ajax__calendar_years13. .ajax__calendar_year14. .ajax__calendar_footer15. .ajax__calendar_today16. .ajax__calendar_hover17. .ajax__calendar_active18. .ajax__calendar_other
How to use CalendarStep 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" CodeFile="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.
Properties1. TargetControlID2. Category3. PromptText
4. PromptValue5. EmptyText6. EmptyValue 7. LoadingText 8. ServicePath 9. ServiceMethod10. ContextKey11. UseContextKey12. ParentControlID13. SelectedValue
How to use CascadingDropDown ControlTextBoxWatermark Control
1. This Control attached to an ASP.NET TextBox control to get "watermark" behavior on the web Page.
2. Purpose of this control to provide more information to user.
Properties1. 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" CodeFile="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 Control1. 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 over the HoverMenu Control.
3. Popup position has been decided by Developer.
Properties1. TargetControlID: Control ID of HoverMenu
Control.2. PopupControlID: ID of the control which
display when mouse over on the HoverMenu Control..
3. HoverCssClass: Css class.4. PopupPostion: Popup should be positioned
relative to the target control5. OffsetX/OffsetY: The number of pixels to
offset the Popup from it's default position6. HoverDelay: The time, in milliseconds, before
the popup display.7. PopDelay: The time, in milliseconds, for the
popup to remain visible.8. Animations: Generic animations for the
HoverMenu extender.How to Use HoverMenu ControlStep 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" CodeFile="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>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.
Properties1. TargetControlID: ID of the control for this
extender be operate.2. ConfirmText: The text is show when u want to
confirm.3. OnClientCancel: Client side script, which you
want to show on Cancel button click4. ConfirmOnFormSubmit: Boolean value true
or false.5. 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" CodeFile="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 value3. MaxRating: Maximum rating value4. ReadOnly:Whether or not the rating can be
changed5. StarCssClass: CSS class for a visible star6. WaitingStarCssClass: CSS class for a star in
waiting mode7. FilledStarCssClass: CSS class for star in filled
mode8. EmptyStarCssClass: CSS class for a star in
empty mode9. RatingAlign: Alignment of the stars (Vertical
or Horizontal)10. RatingDirection: Orientation of the stars
(LeftToRightTopToBottom or RightToLeftBottomToTop)
11. OnChanged: ClientCallBack event to fire when the rating is changed
12. Tag: A custom parameter to pass to the ClientCallBack
ToggleButton ControlToggleButton 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 image3. 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 unchecked state.
5. DisabledCheckedImageUrl: The URL of the image to show when the toggle button is disabled and in the checked state.
6. DisabledUncheckedImageUrl: The URL of the image when the toggle button is disabled and in the unchecked state.
7. CheckedImageOverUrl: The URL of the image when the toggle button is in the checked state and the mouse is over the button.
8. UncheckedImageOverUrl: The URL of the image when the toggle button is in the unchecked state and the mouse is over the button.
9. CheckedImageAlternateText: The alt text when the toggle button is in the checked state.
10. UncheckedImageAlternateText: The alt text when the toggle button is in the unchecked state.
11. 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.
Design Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="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-Girl-Friend/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 client-side tabChanged event
3. CssClass: A css class override used to define a custom look and feel for the tabs.
4. ActiveTabIndex: The first tab to show 5. Height: Sets the height of the body of the
tabs but it does not include the TabPanel headers.
6. Width: Sets the width of the body of the tabs.7. TabStripPlacement:Whether to render the
tabs on top of the container or below (Top, Bottom).
TabPanel Properties1. 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.
Design Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="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 ControlSlider 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 slider6. 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" CodeFile="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>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 ControlThe 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 DragPanelStep 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" Code
File="Default.aspx.cs" Inherits
="_Default" %><%@ Register asse
mbly="AjaxControlToolkit" names
pace="AjaxControlToolkit" tagpr
efix="cc1" %><!DOCTYPE html PUB
LIC "-//W3C//DTD XHTML 1.0 Trans
itional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transiti
onal.dtd"><html xmlns="http://w
ww.w3.org/1999/xhtml"><head run
at="server"> <title>DragPanel</
title></head><body> <form id="D
ragPanel" runat="server"> <div>
<asp:ScriptManager ID="ScriptM
anager1" runat="server"> </asp:
ScriptManager> </div> <asp:Pane
l ID="Panel1" runat="server" Wi
dth="250px" style="z-index: 20;
"> <asp:Panel ID="Panel2" runat
="server" Width="100%" Height="
20px" BorderStyle="Solid" Borde
rWidth="2px" BorderColor="black
"> <div>  
; <font colo
r="#0066FF"><b> &nb
sp; ASP.Net With C#</b></
font> </div> </asp:Panel>
<asp:Panel ID="Panel3" runat="s
erver" Width="100%" Height="250
px" Style="overflow: scroll;" B
ackColor="#0B3D73" ForeColor="w
hitesmoke" BorderWidth="2px" Bo
rderColor="black" BorderStyle="
Solid"> <div> <p> ASP .NET bui
lt on .net framework. Asp .net
is a web development tool. As
p .net is offered by Microsoft
. We can built dynamic website
s by using asp .net. Asp .net
was first released in January
2002 with version 1.0 of the .
net framework. It is the succe
ssor of Microsoft's ASP. .NET
Framework consists of many cla
ss libraries,
support multiple
languages and a common execut
ion platform. Asp .net is a pr
ogram run in
IIS server. Asp
.net is also called Asp+. </p>
</div> </asp:Panel> </asp:Panel
> <cc1:DragPanelExtender ID="Pa
nel1_DragPanelExtender" runat="
server" DragHandleID="Panel2"
TargetControlID="Panel1" /> <sc
ript type="text/javascript"> fu
nction setBodyHeightToContentHe
ight() { document.body.style.h
eight = Math.max(document.docum
entElement.scrollHeight, docume
nt.body.scrollHeight)+"px"; } s
etBodyHeightToContentHeight();
</script> </form> </body></htm
l>
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 Control1. DropDown is an ASP.NET AJAX extender that
can be attached to almost any ASP.NET control2. 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 ControlStep 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" CodeFile="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" Font-Bold="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 Control1. 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 ControlStep 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" CodeFile="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 Bar.DropShadow ControlDropShadow 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 ApplicationStep 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" CodeFile="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 ControlFilteredTextBox 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.
Design Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="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 ControlThe 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 ControlsStep 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.
Design Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="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>
Step 3. Debug the Application.
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 ResizableControlStep 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;background-image: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" CodeFile="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>
Step 5. Debug the Application. 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.
2. This popup window normaly activated inside ASP.NET AJAX UpdatePanel, so it will show partial page postback.
3. Popup window can contain any content, including ASP.NET server controls, HTML elements, etc.
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 ControlStep 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.
Design Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="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 ControlThe 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 ControlStep 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" CodeFile="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", "X-ray","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.
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.
MaskedEdit ControlMaskedEdit 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 ControlStep 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 After Changing on basis of your choice
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.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" CodeFile="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" Font-Bold="True" ForeColor="#993300"></asp:Label></ContentTemplate><Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers></asp:UpdatePanel></fo
rm></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 ApplicationValue compulsory
Password Not Match
Input Correct Information
PasswordStrength Control1. 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 and updates itself as the user types the password.
3. 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" CodeFile="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>
Step 3. Debug the Application
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" CodeFile="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>
Step 5. Debug the Application
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.
SlideShow Control1. SlideShow is an extender that targets image
controls. 2. You can add buttons to hit previous, next and
play, configured the slideshow to play automatically on render and also allowed it loop through the images in a round robin fashion and also set the interval for slide transitions.
3. 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 ControlSep 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" CodeFile="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>
Step 4. Debug the Application
MutuallyExclusiveCheckBox ControlMutuallyExclusiveCheckBox 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" CodeFile="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 ControlNumericUpDown 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 ControlStep 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" CodeFile="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="text-align:center"></asp:TextBox> <cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="TextBox1" Width="120" RefValues="January;February;March;April;May;June;July;August;September;October;N
ovember;December" ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID=""> </cc1:NumericUpDownExtender></form></body></html>
Step 4. Debug the Application
Modal Popup Extender ControlIn 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 PropertiesTargetControlID - 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 popupOnCancelScript - Script to run when the modal popup is dismissed with the CancelControlIDPopupDragHandleControlID - 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 scrolledBackgroundCssClass - The CSS class to apply to the background when the modal popup is displayedDropShadow - if true then displays a shadow of ModalPopup.OkControlID - The ID of the element that dismisses the modal popupOnOkScript - Script to run when the modal popup is dismissed with the OkControlIDHow To Use Mutually Exclusive Check Box Extender ControlStep 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" CodeFile="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 propertyEnableKeyboard - 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.EventsOnClientLoad - 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 ControlStep 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" CodeFile="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="#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>
Step 6. Now run your web site by Ctrl + F5 Step 7. Output is
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" CodeFile="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>
Step 6. Now run your web site by Ctrl + F5 Step 7. Output is
NoBot ControlNoBot 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 windowInvalidAddressTooActive: When a single client’s 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 ControlStep 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" CodeFile="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:" Font-Bold="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 System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using 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(); }}
Step 6. Now run your web site by Ctrl + F5 Step 7. Output is
ReorderList ControlReorderList 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 ControlDataSourceID -DataSourceID is used to populate this controlAllowReorder - whether to allow drag/drop reordering. This is automatically set to true if a ReorderTemplate is presentItemTemplate - It is used as a template to display for items in the listEditItemTemplate - It is used to to display for a row that is in edit mode as a templateReorderTemplate - 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 dataSortOrderField - 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 EndDragHandleAlignment - 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 data-bindable.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 ControlAnimationExtender 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 propertyTargetControlID -It is the ID of the target control which events are used to animate OnLoad - when page is loaded, Generic animation createdOnClick - when the target control is clicked,Generic animation createdOnMouseOver - when the mouse moves over the target control than Generic animation createdOnMouseOut - Generic animation created when the mouse moves out of the target controlOnHoverOver 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" CodeFile="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 System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using 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 ControlMaskedEdit 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 inputMaskType - Type of validation to perform:None - No validationNumber - Number validationDate - Date validationTime - Time validationDateTime - Date and time validationMask Characters and Delimiters9 - Only a numeric character
L - Only a letter$ - Only a letter or a spaceC - Only a custom character (case sensitive)A - Only a letter or a custom characterN - 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 masksMaskedEditExtender 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 centuryClearMaskOnLostFocus - If it is True then remove the mask when the TextBox loses focusClearTextOnInvalid -If condition is true then clear the textbox when entered invalid text.ClipboardEnabled - True to allow copy/paste with the clipboardClipboardText - when a clipboard paste is performed,then Prompt text to use .DisplayMoney - Specifies how the currency symbol is displaye
How To Use MaskedEditExtender ControlStep 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" CodeFile="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>
Step 6. Now run your web site by Ctrl + F5 Step 7. Output is
