Working With CollapsiblePanel Control in Ajax


Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. With the help of AJAX we can develop web applications and retrieve small amounts of data from the web server. AJAX consists of a different type of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server

CollapsiblePanelExtender 

The CollapsiblePanelExtender control is a very flexible extender that allows you to easily add a collapsible section to your webpage. The collapsiblePanel is used to collapse and expand any web page content or controls inside an ASP.Net panel control. A panel control will expand and collapse using a label control or linkbutton control.

Property

  • TargetControlID
  • Collapsed
  • AutoCollapsed
  • AutoExpand
  • ScrollContent
  • CollapseControlID

Step 1 : Open Visual Studio 2010.

  • Go to File->New->WebSite
  • Select ASP.NET Empty WebSite
dr1.gif

Step 2 : Go to Solution Explorer and right-click.

  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open
dr2.gif

Step 3 :  Go to Default.aspx page and click on the [Design] option and drag control from Toolbox.

  • Drag Panel, ScriptManager, Label, TextBox, Image

Step 4 : Go to the Default.aspx page[Source]option and define the <style> for the creation of a form.

<style type="text/css">
        .pnlCSS
        {
            font-weight: bold;
            cursor: pointer;
            border: solid 1px #c0c0c0;
            width:30%;
            }
        .style2
        {
            height: 11px;
        }
    </style
>

Step 5 : Go to the Default.aspx page[Design] option; drag the image control from the Toolbox and define the URL property.

<asp:Image ID="Image1" runat="server" ImageUrl="~/DO.jpg" Height="50px" Width="50px" />

Step 6 : Go to Default.aspx[source]option and drag CollapsiblePanelExtender from Toolbox and define the AutoCollapsed and AutoExpand proerties.

co5.gif

Code :

<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="Panel1" Collapsed="true" ExpandControlID="Panel1" TextLabelID="Label1" CollapsedText="Show" ExpandedText="Hide" ImageControlID="Image1" CollapsedImage="~/DO.jpg"
ExpandedImage="~/UP.jpg" ExpandDirection="Vertical" TargetControlID="Panel2" ScrollContents="false">
</
asp:CollapsiblePanelExtender
>

Step 7 : Drag two panels from the standard toolbox and drop them on the page and define all the div properties.

Code :

<asp:Panel ID="Panel1" runat="server">
        <div style="background-image:url('green_bg.gif'); height:30px; vertical-align:middle">
        <div style="float:left; color:White;padding:5px 5px 0 0">
        Collapsible Panel
            <div style="float:right; color:White; padding:5px 5px 0 0">
            </div>
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/DO.jpg" Height="50px" Width="50px" />
        </div>
                <div style="clear:both"></div>
                </div>
                </asp:Panel>
        <asp:Panel ID="Panel2" runat="server">
        <table align="center" width="100%">
        <tr>
        <td class="style2"></td>
        <td class="style2">
        <b>Registration Form</b>
        </td>
        </tr>
        <tr>
        <td align= "right"
>

Step 8 : Go to Default.aspx[Source] file option and write a code.

Code :

<title> my ajax application</title>
    <style type="text/css">
        .pnlCSS
        {
            font-weight: bold;
            cursor: pointer;
            border: solid 1px #c0c0c0;
            width:30%;
            }
        .style2
        {
            height: 11px;
        }
    </style
>
</head>
<
body>
    <form id="form1" runat="server">
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="background-color: #2D4653">
        <asp:Panel ID="Panel1" runat="server">
        <div style="background-image:url('green_bg.gif'); height:30px; vertical-align:middle">
        <div style="float:left; color:White;padding:5px 5px 0 0">
        Collapsible Panel
            <div style="float:right; color:White; padding:5px 5px 0 0">
            </div>
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/DO.jpg" Height="50px" Width="50px" />
        </div>
                <div style="clear:both"></div>
                </div>
                </asp:Panel>
        <asp:Panel ID="Panel2" runat="server">
        <table align="center" width="100%">
        <tr>
        <td class="style2"></td>
        <td class="style2">
        <b>Registration Form</b>
        </td>
        </tr>
        <tr>
        <td align= "right" >
        UserName :
            &nbsp;</td>
        <td>
        <asp:TextBox ID="txtuser" runat="server"/>
        </td>
        </tr>
        <tr>
        <td align= "right">
        LastName:
        </td>
        <td>
        <asp:TextBox ID="TextBox1" runat="server"/>
        </td>
        </tr>
        <tr>
        <td align= "right" >
        Email:
        </td>
        <td>
        <asp:TextBox ID="TextBox2" runat="server"/>
        </td>
        </tr>
        <tr>
        <td align= "right" >
        Password:
        </td>
        <td>
        <asp:TextBox ID="TextBox3" runat="server"/>
        </td>
        </tr>
        <tr>
        <td align= "right" >
        </td>
        </tr>
        </table>
        </asp:Panel>
        <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="Panel1" Collapsed="true" ExpandControlID="Panel1" TextLabelID="Label1" CollapsedText="Show" ExpandedText="Hide" ImageControlID="Image1" CollapsedImage="~/DO.jpg"
ExpandedImage="~/UP.jpg" ExpandDirection="Vertical" TargetControlID="Panel2" ScrollContents="false">
        </asp:CollapsiblePanelExtender>
    </div
>

Step 9 :  Now run the application by Pressing F5.

co11.gif
Step 10 : Now click on Green image option, then following the information window all contained windows will be opened.

col8.gif

Step 11 : Now click on the yellow image option then all widow information will be collapse.

col9.gif

Resource

Web Paging Navigation Control

Up Next
    Ebook Download
    View all
    Learn
    View all