Wednesday, September 21

Use the ASP.NET AJAX Collapsable Panel Extender




Design View Of hiding and showing  ASP.NET AJAX Collapsable Panel Extender

Source View



<%@ 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"/>&nbsp;&nbsp;
       is shibashish is a good Boy ?&nbsp;&nbsp;
           <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>
        &nbsp;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.&nbsp;
        </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.

.

ShibashishMnty
shibashish mohanty