AjaxControlToolkit Part2

AJAX Control Toolkit
Rakesh Singh
Naresh I Technologies Hyderabad
0
Ajax Control Toolkit ToggleButtonExtender:

ToggleButton is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control. ToggleButton enables the use of custom images to show the state of the CheckBox. The behaviour of the CheckBox is unaffected.
ToggleButton Properties:
TargetControlID - The ID of the CheckBox to modify ImageHeight\ImageWidth - The height and width of the image CheckedImageUrl - the URL of the image to show when the toggle button is in the checked state. UncheckedImageUrl - the URL of the image to show when the toggle button is in the unchecked state. DisabledCheckedImageUrl - the URL of the image to show when the toggle button is disabled and in the checked state. DisabledUncheckedImageUrl - the URL of the image to show when the toggle button is disabled and in the unchecked state. CheckedImageOverUrl - the URL of the image to show when the toggle button is in the checked state and the mouse is over the button. UncheckedImageOverUrl - the URL of the image to show when the toggle button is in the unchecked state and the mouse is over the button. CheckedImageAlternateText - the alt text to show when the toggle button is in the checked state. UncheckedImageAlternateText - the alt text to show when the toggle button is in the unchecked state. CheckedImageOverAlternateText - the alt text to show when the toggle button is in the checked state and the mouse is over the button. UncheckedImageOverAlternateText - the alt text to show when the toggle button is in the unchecked state and the mouse is over the button.
Example: ToggleButtonExtender.aspx (Source View):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ToggleButtonExtender.aspx.cs" Inherits="ToggleButtonExtender" %>
Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <div> <asp:CheckBox ID="CheckBox1" runat="server" Text="I Like ASP.NET AJAX" /> <asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1" ImageWidth="19" ImageHeight="19" CheckedImageAlternateText="Check" UncheckedImageAlternateText="UnCheck" UncheckedImageUrl="Images/ToggleButton_UnChecked.gif" CheckedImageUrl="Images/ToggleButton_Checked.gif" /> </div> </form> </body> </html>
Ajax Control Toolkit PopupControlExtender:

PopupControl is an ASP.NET AJAX extender that can be attached to any control in order to open a popup window that displays additional content. This popup window will probably be interactive and will probably be within an ASP.NET AJAX UpdatePanel, so it will be able to perform complex server-based processing (including postbacks) without affecting the rest of the page. The popup window can contain any content, including ASP.NET server controls, HTML elements, etc. Once the work of the popup window is done, a simple server-side call dismisses it and triggers any relevant script on the client to run and update the page dynamically.
PopupControl Properties:
TargetControlID - The ID of the control to attach to PopupControlID - The ID of the control to display Position - Optional setting specifying where the popup should be positioned relative to the target control. (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 to run after setting the result of the popup
OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by Position. Animations - Generic animations for the PopupControlExtender. o 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 to display the popup along with any other visual effects. hidden.
o OnHide - The OnHide animation will be played each time the popup is Example: PopupControlExtender.aspx (Source View)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupControlExtender.aspx.cs" Inherits="PopupControlExtender" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <div> <b>Enter Date: </b> <asp:TextBox ID="txtDate" runat="server"></asp:TextBox> <asp:Panel ID="Panel1" runat="server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px"> <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /> <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#CC9966" /> <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<SelectorStyle BackColor="#FFCC66" /> <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /> <TodayDayStyle BackColor="#FFCC66" ForeColor="White" /> </asp:Calendar> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="txtDate" PopupControlID="Panel1" Position="Bottom"> </asp:PopupControlExtender> </div> </form> </body> </html> Code View protected void Calendar1_SelectionChanged(object sender, EventArgs e) { // Popup result is the selected date PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString()); }
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupControlExtender.aspx.cs" Inherits="PopupControlExtender" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> <h3>Ajax Control Toolkit Example: Using PopupControlExtender </h3> <hr /> <div> <b>Enter Your Favourite Language: </b> <asp:TextBox ID="txtLanguage" runat="server"></asp:TextBox> <asp:Panel ID="Panel1" runat="server"> <div style="border: 1px outset white; width: 150px"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"> <asp:ListItem Text="Visual C#" /> <asp:ListItem Text="Visual Basic" /> <asp:ListItem Text="Visual C++" /> <asp:ListItem Text="Visual J#" /> <asp:ListItem Text="Cancel" Value="" /> </asp:RadioButtonList> </ContentTemplate> </asp:UpdatePanel> </div> </asp:Panel> <asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="txtLanguage" PopupControlID="Panel1" CommitProperty="value" Position="Bottom" /> </div> </form> </body> </html>
Code View: protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) { if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue)) { // Popup result is the selected task PopupControlExtender1.Commit(RadioButtonList1.SelectedValue); } else { // Cancel the popup PopupControlExtender1.Cancel (); } // Reset the selected item RadioButtonList1.ClearSelection(); }
Ajax Control Toolkit BalloonPopupExtender:

The BalloonPopupExtender control displays a popup which can contain any content. For example, you can use the BalloonPopupExtender to display help information when you move focus to a TextBox control.
The BalloonPopupExtender supports three different styles: Balloon, Rectangle, and Custom. You can select among three different sizes for the popup: Small, Medium, and Large. If you set the BalloonPopup style to the value Custom then you can define a custom appearance for the BalloonPopup. In that case, you also need to set the CustomCssUrl property to point to a custom style sheet. This control can be set to 5 positions - TopLeft, TopRight, BottomLeft, BottomRight and Auto. If you select the value Auto then the position of the BalloonPopup is determined automatically based on available space. You can set the BalloonPopExtender to be triggered by the MouseOver, Focus or Click events. The control is hidden automatically when you click outside the Balloon Popup.
BalloonPopupExtender Properties
TargetControlID - The ID of the control to attach to. BalloonPopupControlID - The ID of the control to display. Position - Optional setting specifying where the popup should be positioned relative to the target control. (TopRight, TopLeft, BottomRight, BottomLeft, Auto) Default value is Auto. OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by Position. Default value is 0. BalloonStyle - Optional setting specifying the theme of balloon popup. (Cloud, Rectangle, Custom). Default value is Rectangle. BalloonSize - Optional setting specifying the size of balloon popup. (Small, Medium and Large). Default value is Small. CustomCssUrl - This is required if user choose BalloonStyle to Custom. This specifies the url of custom css which will display custom theme. CustomClassName - This is required if user choose BalloonStyle to Custom. This specifies the name of the css class for the custom theme. UseShadow - Optional setting specifying whether to display shadow of balloon popup or not. ScrollBars - Optional setting specifying whether to display scrollbar if contents are overflowing. This property contains 5 options - None, Horizontal, Vertical, Both and Auto. Default value is Auto. DisplayOnMouseOver - Optional setting specifying whether to display balloon popup on the client onMouseOver event. Default value is false. DisplayOnFocus - Optional setting specifying whether to display balloon popup on the client onFocus event. Default value is false. DisplayOnClick - Optional setting specifying whether to display balloon popup on the client onClick event. Default value is true. 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. Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.
OnHide - The OnHide animation will be played each time the popup is hidden.
Example: BalloonPopupExtender.aspx (Source View)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BalloonPopupExtender.aspx.cs" Inherits="BalloonPopupExtender" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> <h3>Ajax Control Toolkit Example: Using BalloonPopupExtender </h3> <hr /> <div> <b>Cloud Style Balloon Popup: </b> <asp:TextBox ID="TextBox1" runat="server" /> <asp:Panel ID="Panel1" runat="server" ForeColor="Green" Font-Size="15" FontNames="Tahoma"> <b>This is a Cloud Balloon Popup</b> </asp:Panel> <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="TextBox1" UseShadow="true" DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel1" BalloonStyle="Cloud" /> </div> </form> </body> </html>
<b>Rectangle Style Balloon Popup: </b> <asp:TextBox ID="TextBox2" runat="server" /> <asp:Panel ID="Panel2" runat="server" ForeColor="Green" Font-Size="15" Font-Names="Tahoma"> <b>This is a Rectangle Balloon Popup</b> </asp:Panel> <asp:BalloonPopupExtender ID="BalloonPopupExtender2" runat="server" TargetControlID="TextBox2" UseShadow="true" DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel2" BalloonStyle="Rectangle" />
10
<b>Custom Style Balloon Popup: </b> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> <asp:Panel ID="Panel3" runat="server" ForeColor="Green" Font-Size="12" FontNames="Tahoma"> <b>This is a Custom Balloon Popup</b> </asp:Panel> <asp:BalloonPopupExtender ID="BalloonPopupExtender3" runat="server" TargetControlID="TextBox3" UseShadow="true" DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel3" BalloonStyle="Custom" CustomCssUrl="~/Styles/Css.css" CustomClassName="oval" />
11
Ajax Control Toolkit DropShadowExtender:

DropShadow is an extender that applies a drop shadow to an ASP.NET Panel control. The extender allows you to specify how wide the shadow is, how opaque it is, and whether the shadow should have rounded corners. For pages that let the user move or resize the panel, the DropShadow extender has a mode that will resize and reposition the shadow to match the target panel at run time.
DropShadowExtender Properties:
TargetControlID - The ID of the control to extend. Width - The width, in pixels, of the drop shadow. The default is 5. Opacity - The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default is .5. TrackPosition - A Boolean value that specifies whether the DropShadow should track the position of the panel it is attached to. Set this property to true if the panel is absolutely positioned or if it might move at run time. The default is false. Rounded - A Boolean value that specifies whether the corners of the target and drop shadow should be rounded.
Example:
DropShadowExtender.aspx (Source View)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropShadowExtender.aspx.cs" Inherits="DropShadowExtender" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <h3>Ajax Control Toolkit Example: Using DropShadowExtender</h3> <hr /> <div> <asp:Panel ID="Panel1" runat="server" Width="300" Height="150" BackColor="Blue" ForeColor="White"> <div style="padding: 10px; text-align: center">
12
<b>First Name:</b> <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br /> <br /> <b>Last Name:</b> <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br /> <br /> <hr style="width: 270px" /> </div> </asp:Panel> <asp:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1" Width="15" Rounded="true" Radius="20" Opacity=".75" TrackPosition="true" /> </div> </form> </body> </html>
13
Ajax Control Toolkit CalendarExtender:

The Calendar control enables you to display a date picker when focus is moved to an input element. Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with customizable date format and UI in a popup control. You can interact with the calendar by clicking on a day to set the date, or the "Today" link to set the current date. In addition, the left and right arrows can be used to move forward or back a month. By clicking on the title of the calendar you can change the view from Days in the current month, to Months in the current year. Another click will switch to Years in the current Decade. This action allows you to easily jump to dates in the past or the future from within the calendar control.
CalendarExtender Properties:
TargetControlID - The ID of the TextBox to extend with the calendar. CssClass - Name of the CSS class used to style the calendar. See the Calendar Theming section for more information. Format - Format string used to display the selected date. PopupButtonID - The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus. PopupPosition - Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox. SelectedDate - Indicates the date the Calendar extender is initialized with. StartDate - Indicates start date for range that available for selection. EndDate - Indicates end date for range that available for selection. Example:
CalendarExtender.aspx (Source View):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalendarExtender.aspx.cs" Inherits="CalendarExtender" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
14
<head id="Head1" runat="server"> <title></title> <style type="text/css"> .MyCalendar .ajax__calendar_container { border: 1px solid #646464; background-color: lemonchiffon; color: red; } .MyCalendar .ajax__calendar_other .ajax__calendar_day, .MyCalendar .ajax__calendar_other .ajax__calendar_year { color: black; } .MyCalendar .ajax__calendar_hover .ajax__calendar_day, .MyCalendar .ajax__calendar_hover .ajax__calendar_month, .MyCalendar .ajax__calendar_hover .ajax__calendar_year { color: black; } .MyCalendar .ajax__calendar_active .ajax__calendar_day, .MyCalendar .ajax__calendar_active .ajax__calendar_month, .MyCalendar .ajax__calendar_active .ajax__calendar_year { color: black; font-weight: bold; } </style> </head> <body> <form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> <h3>Ajax Control Toolkit Example: Using CalendarExtender </h3> <hr /> <div> <b>Default Calendar: </b> <br /> <asp:TextBox runat="server" ID="txtDate1" /><br /> <asp:CalendarExtender ID="defaultCalendarExtender" runat="server" TargetControlID="txtDate1" /> <div style="font-size: 90%"> <em>(Set the focus to the textbox to show the calendar)</em> </div> <br /> <br /> <b> Calendar with a custom style and formatted date (opening on left): </b>
15
<br /> <asp:TextBox runat="server" ID="txtDate2" /><br /> <asp:CalendarExtender ID="customCalendarExtender" runat="server" TargetControlID="txtDate2" CssClass="MyCalendar" Format="MMMM d, yyyy" SelectedDate="April 28, 2013" PopupPosition="Left" /> <div style="font-size: 90%"> <em>(Set the focus to the textbox to show the calendar)</em> </div> <br /> <br /> <b>Calendar with an associated button:</b><br /> <asp:TextBox runat="server" ID="txtDate3" /> <asp:ImageButton ID="Image1" runat="Server" ImageUrl="~/images/calendarIcon.gif" AlternateText="Click to show calendar" /><br /> <asp:CalendarExtender ID="calendarButtonExtender" runat="server" TargetControlID="txtDate3" PopupButtonID="Image1" /> <div style="font-size: 90%"> <em> (Click the image button to show the calendar; this calendar dismisses automatically when you choose a date) </em> </div> <br /> <br /> <b>Calendar with date range:</b> <br /> <asp:TextBox runat="server" ID="txtDate4" /> <asp:CalendarExtender ID="dateRangeCalendarExtender1" runat="server" Format="MM/dd/yyyy" TargetControlID="txtDate4" StartDate="8/3/2013" EndDate="10/18/2013" SelectedDate="8/3/2013" /> <div style="font-size: 90%"> <em> (Set the focus to the textbox to show the calendar. This calendar's StartDate property is '8/3/2013' and EndDate is '10/18/2013') </em> </div> </div> </form> </body> </html>
16
Calendar Theming
You can change the look and feel of Calendar using the Calendar CssClass property. Calendar has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. If your CssClass does not provide values for any of those then it falls back to the default value. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a Calendar control can be styled accordingly. The second calendar in the demo above uses the "MyCalendar" style, which sets the Calendar container style as follows.
.MyCalendar .ajax__calendar_container { border:1px solid #646464; background-color: lemonchiffon; color: red; }
Calendar CSS Classes:
.ajax__calendar_container : The outer rectangular container that supplies the border around the calendar element. Child Css classes:
.ajax__calendar_header, .ajax__calendar_body,.ajax__calendar_footer.
17
.ajax__calendar_header : A container element that holds the next and previous arrows and the title of the current view. Child Css classes:
.ajax__calendar_prev, .ajax__calendar_title, .ajax__calendar_next.
.ajax__calendar_prev : An element that displays the arrow to view the previous set of data in the view(previous month/year/decade). Child Css classes: none. .ajax__calendar_title : An element that displays the title of the current view (month name, year, decade). Child Css classes: none. .ajax__calendar_next : An element that displays the arrow to view the previous set of data in the view (previous month/year/decade). Child Css classes: none. .ajax__calendar_body : A container element that holds the days, months, and years panes. Also provides a fixed rectangle with hidden overflow that is used for transitioning between views (next/previous month, or days/months/years).Child Css class:
.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years.
.ajax__calendar_days : A container element that holds the layout for the days in a month. Child Css classes: .ajax__calendar_dayname, .ajax__calendar_day .ajax__calendar_dayname : An element that displays the short name of the day of the week. Child Css classes: none. .ajax__calendar_day : An element that displays the day of the month. Child Css classes: none .ajax__calendar_months : A container element that holds the layout for the months in a year. Child Css classes: .ajax__calendar_month. .ajax__calendar_month : An element that displays the month of the year. Child Css classes: none .ajax__calendar_years : A container element that holds the layout for the years in a decade. Child Css classes: .ajax__calendar_year. .ajax__calendar_year : An element that displays the year in a decade. Child Css classes: none .ajax__calendar_footer : A container element that holds the current date. Child Css classes: .ajax__calendar_today. .ajax__calendar_today : An element that displays the current date. Child Css classes: none. .ajax__calendar_hover : This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show a hover state. Child Css classes: .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year
.ajax__calendar_active : This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show the currently selected value. Child Css classes: .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year.
.ajax__calendar_other : This is applied to an element in the DOM above a day or year that is outside of the current view (day not in the visible month, year not in the visible decade). Child Css classes: .ajax__calendar_day, .ajax__calendar_year.
18
Ajax Control Toolkit CollapsiblePanelExtender:

The CollapsiblePanelExtender adds collapsible sections to a Web page. This extender targets any ASP.NET Panel control. You specify which control or controls on the page should act as the open and close controllers for the panel. Alternatively the panel can be set to automatically expand and collapse when the mouse cursor moves in or out of it. The panel is postback aware. During a client postback, the panel remembers and restores its client state. You can specify whether the panel should scroll when the content is larger than the panel, and whether the panel expands horizontally or vertically (height or width). Note: The CollapsiblePanelExtender assumes that the standard CSS box model is being used. Early versions of Internet Explorer did not support that model completely. Therefore, use the !DOCTYPE declaration (as found at the top of this page and as enabled by default for new ASP.NET pages) to specify that the page should be rendered using Internet Explorer standards-compliant mode.
CollapsiblePanelExtender Properties:
TargetControlID - The ID of the control to 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 - True to specify that the object should initially be collapsed or expanded. Set this to match your initial size. In that case, the panel is initially set to a height of 0 to match the CollapsedSize property, so that when the page first renders, the panel is not displayed in expanded state. AutoCollapse - True to automatically collapse the panel when the mouse is moved out of the panel. AutoExpand - True to automatically expand when the mouse is moved into the panel. ScrollContents - True to add a scrollbar if the contents are larger than the panel, or False to clip the contents. ExpandControlID - The ID of the control that can be clicked to expand the panel. If the value of this property is the same as CollapseControlID, the panel will automatically toggle its state on each click. CollapseControlID - The ID of the control that can be clicked to collapse the panel. If the value of this property is the same as ExpandControlID, 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. The panel will replace the inner HTML of the specified control.
19
CollapsedText - The text to display in the control that is specified by TextLabelID when the panel is collapsed. This text is also used as the alternate text of the image if ImageControlID is set. ExpandedText - The text to display in the control that is specified by TextLabelID when the panel is opened. This text is also used as the alternate text of the image if ImageControlID is set. ImageControlID - The ID of an Image control where an icon that indicates the collapsed status of the panel will be placed. The extender sets the Source property of the Image control to the URLs of the CollapsedImage and ExpandedImage properties. If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image. CollapsedImage - The path of an image used by ImageControlID when the panel is collapsed. ExpandedImage - The path of an image used by ImageControlID when the panel is expanded. ExpandDirection - The direction to expand the panel. This can be Vertical or Horizontal.
Example: CollapsiblePanelExtender.aspx (Source View):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CollapsiblePanelExtender.aspx.cs" Inherits="CollapsiblePanelExtender" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .collapsePanel { background-color: white; overflow: hidden; } .collapsePanelHeader { width: 50%; height: 30px; background-image: url(images/bg-menu-main.png); background-repeat: repeat-x; color: #FFF; font-weight: bold; } </style> </head> <body>
20
<form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> <h3>Ajax Control Toolkit Example: Using CollapsiblePanelExtender </h3> <hr /> <div> <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px"> <div style="padding: 5px; cursor: pointer; vertical-align: middle;"> <div style="float: left;">What is ASP.NET AJAX?</div> <div style="float: left; margin-left: 20px;"> <asp:Label ID="Label1" runat="server"> (Show Details...) </asp:Label> </div> <div style="float: right; vertical-align: middle;"> <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(Show Details...)" /> </div> </div> </asp:Panel> <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0" Width="50%" Style="text-align: justify;"> <br /> <p> <asp:ImageButton ID="Image2" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" ImageAlign="right" /> <%= GetContentFillerText() %> </p> </asp:Panel> <asp:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1" ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="True" TextLabelID="Label1" ImageControlID="Image1" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ExpandedImage="~/images/collapse_blue.jpg" CollapsedImage="~/images/expand_blue.jpg" SuppressPostBack="true" /> </div> </form> </body> </html>
21
Code View (CollapsiblePanelExtender.aspx.cs):

protected string GetContentFillerText() { return "ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers."; }
22

AjaxControlToolkit Part2

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

AjaxControlToolkit Part2

Enviado por

Direitos autorais:

Formatos disponíveis

AJAX Control Toolkit

Ajax Control Toolkit ToggleButtonExtender:

Example: ToggleButtonExtender.aspx (Source View):

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Ajax Control Toolkit PopupControlExtender:

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupControlExtender.aspx.cs" Inherits="PopupControlExtender" %>

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Ajax Control Toolkit BalloonPopupExtender:

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Example: BalloonPopupExtender.aspx (Source View)

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Ajax Control Toolkit DropShadowExtender:

DropShadowExtender.aspx (Source View)

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Ajax Control Toolkit CalendarExtender:

CalendarExtender.aspx (Source View):

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

.MyCalendar .ajax__calendar_container { border:1px solid #646464; background-color: lemonchiffon; color: red; }

Calendar CSS Classes:

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

.ajax__calendar_prev, .ajax__calendar_title, .ajax__calendar_next.

.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Ajax Control Toolkit CollapsiblePanelExtender:

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Example: CollapsiblePanelExtender.aspx (Source View):

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Code View (CollapsiblePanelExtender.aspx.cs):

Copyright 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

Você também pode gostar