AJAX Control Toolkit Tutorial CollapsiblePanel Extender in ASP.NET 4.0 C (#)
Looking for a Tutorial on how to use the CollapsablePanel Extender? In today’s AJAX Tutorials we will learn how to add the CollapsablePanel Extender to your Webform or Webpage. We are assuming you are familiar with Styles and or adding Styles. If not we recommend you read our beginner AJAX tutorials. Again this is one of those tools we take for granted because they are so simple but yet do so much,
For instance they make a section of code or readable paragraph collapsible or in other words nest it away so you can focus on the next chapter as if you were reading a book or something along those lines. This is a very effective way to add lots of content to a page without having to make several pages and risk losing interest from your end user or reader.
Did you know?
We used over 10 web hosting companies before we found
Server Intellect. Their
dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour.
Server Intellect's customer support and assistance are the best we've ever experienced.
The CollapsiblePanel extender 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.
So Lets Begin with the Tutorial
· First Add a New WebForm to this project and name it CollapsiblePanel.aspx.
· Also Add a ScriptManager to the page.
· You’re going to want to Add Styles for the panels
· Last but Not Least Add a CollapsiblePanel extender to the page. Set the target control
The markup of the page will look like
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CollapsiblePanel.aspx.cs" Inherits="CollapsiblePanel" %>
<%@ 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 id="Head1" runat="server">
<title>CollapsiblePanelExtender Tips </title>
<style type="text/css">
.cpHeader
{
color: white;
background-color: #719DDB;
font: bold 11px auto "Trebuchet MS", Verdana;
font-size: 12px;
cursor: pointer;
width:450px;
height:18px;
padding: 4px;
}
.cpBody
{
background-color: #DCE4F9;
font: normal 11px auto Verdana, Arial;
border: 1px gray;
width:450px;
padding: 4px;
padding-top: 7px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
<asp:Label ID="lblText" runat="server" />
</asp:Panel>
<asp:Panel ID="pBody" runat="server" CssClass="cpBody">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
Collapsed="true" TextLabelID="lblText" CollapsedText="Click to Show Content.." ExpandedText="Click to Hide Content.."
CollapsedSize="0">
</cc1:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Load the page in browser looks like as follows
By clicking it shows like below
So
So We hope you enjoyed our Nifty AJAX tutorial, We try to keep things simple so you may understand what is going on, As these Controls start to get a little more complex we will also get into more details. We encourage you to develop some controls and get creative, We Have the latest AJAX Information on AJAXTutorials.com and if you ever need more tutorials you can always look here or suggest some.
If you have questions regarding this or any tutorials please feel free to comment below.
Also
If you're looking for a really good web host, try
Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
Thanks
AJAXTutorials.com
