Design View Of hiding and showing ASP.NET AJAX Collapsable Panel Extender
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server">
</asp:ScriptManager>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
TargetControlID="ContentPanel"
ExpandControlID="TitlePanel"
CollapseControlID="TitlePanel"
Collapsed="True"
TextLabelID="Label1"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="Image1"
ExpandedImage="~/images/collapse_blue.jpg"
CollapsedImage="~/images/expand_blue.jpg"
SuppressPostBack="true">
</ajaxToolkit:CollapsiblePanelExtender>
<asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg"/>
is shibashish is a good Boy ?
<asp:Label ID="Label1" runat="server">(Show shibashish's Details...)</asp:Label>
</asp:Panel>
<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">
<h1>
<br />
Just your average MS Joe ...</h1>
If you would like to contact me you can send email from my blog at either
of the following web sites.<p>
shibashishm@gmail.com</p>
<p>
</p>
<p>
I'm a software Developer on the Microsoft Web Tools and Platform.
</p>
<p>
I am Staying in Bhubaneswar You can send me your problems related coding. i am always happy to help you</p>
<p>
<img align="right" border="0" height="150" src="images/shibashish.JPG" width="150" /></p>
<h2>
What do I do at Microsoft DotNet?</h2>
<p>
You would think this should be an easy question, but it's actually not.
</p>
<p>
My job has many parts.
</p>
<p>
To developing the web application and implement it which is fullfill to Clients requirement Is not so easy.
</p>
</asp:Panel>
</form>
</body>
</html>
Add a StyleSheet.cs
and paste this code:-
.collapsePanel {
width: 640px;
height:0px;
background-color:white;
overflow:hidden;
}
.collapsePanelHeader{
width:640px;
height:20px;
color: Yellow;
background-color: Black;
font-weight:bold;
float:left;
padding:5px;
cursor: pointer;
vertical-align: middle;
}
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
.accordionLink
{
background-color: #D3DEEF;
color: white:
}
.watermark {
background: #FFAAFF;
}
.popupControl {
background-color:#AAD4FF;
position:absolute;
visibility:hidden;
border-style:solid;
border-color: Black;
border-width: 2px;
}
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
.sampleStyleA {
background-color:#FFF;
}
.sampleStyleB {
background-color:#FFF;
font-family:monospace;
font-size:10pt;
font-weight:bold;
}
.sampleStyleC {
background-color:#ddffdd;
font-family:sans-serif;
font-size:10pt;
font-style:italic;
}
.sampleStyleD {
background-color:Blue;
color:White;
font-family:Arial;
font-size:10pt;
}
Take one reference of AjaxcontrolToolKit
No comments:
Post a Comment
Please don't spam, spam comments is not allowed here.