As I’m going though all of the Ajax Control Toolkit Controls and demonstrating ways to replace the behaviors with client side technology (JavaScript / jQuery) I can’t help but wonder if some of them are too simple to bother with but since I committed to blogging one example for each control in the ACT, I will continue and then move on to more “Ajax and UI Patterns” content.

I did a previous post on implementing an Accordion style Content Container using jQueryUI and thereby replacing the Accordion Control in the Ajax Control Toolkit.

I suppose you could use the Accurdion method that I demonstrated in that post and only use one accordion section but there is an even easier jQueryUI plugin that you can use. Check put the Simple Collapsible Panel plugin HERE.

If you have tried a number of jQuery UI Plugins using the default ASP.NET Web Site Template and ASP.NET Server controls you have probably discovered that it’s possible to discover conflicts.

Lets try it with ths Collapsible Panel Plugin.

We’re going to need jQuery and jQueryUI which I will include as follows.


<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
<link href='Styles/diQuery-collapsiblePanel.css' rel='stylesheet' 
            type='text/css' />
<link href='Styles/jquery-ui-1.8.11.custom.css' rel='stylesheet' 
            type='text/css' />
<script src='Scripts/jquery-1.4.1-vsdoc.js' type='text/javascript'>
</script>
<script src='Scripts/ui/jquery-ui-1.8.11.custom.js' type='text/javascript'>
</script>
<script src='Scripts/diQuery-collapsiblePanel.js' type='text/javascript'>
</script>
    <script type='text/javascript'>
            $(document).ready(function() {
                  $('.collapsibleContainer').collapsiblePanel();
              });
    </script>
</asp:Content>

Now, for demo simplicity there are a few things above that you probbaly do not want to do in a production application.

  1. I used the default version of jQuery that is part of the default ASP.NET project template. You should use the LATEST version of jQuery.
  2. You probably want to load jQuery from the Microsoft CDN
  3. You also probbaly want to load jQueryUI from the Microsoft CDN
  4. It’s good practive to put all your JavaScript code in a .js file
  5. Whenever possible you want to reference your JavaScript files from the bottom of your page markup. [ Read HERE ]

The whole page markup looks like this.


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
<link href='Styles/diQuery-collapsiblePanel.css' rel='stylesheet' 
      type='text/css' />
<link href='Styles/jquery-ui-1.8.11.custom.css' rel='stylesheet' 
      type='text/css' />
<script src='Scripts/jquery-1.4.1-vsdoc.js' type='text/javascript'>
</script>
<script src='Scripts/ui/jquery-ui-1.8.11.custom.js' type='text/javascript'>
</script>
<script src='Scripts/diQuery-collapsiblePanel.js' type='text/javascript'>
</script>
    <script type='text/javascript'>
            $(document).ready(function() {
                  $('.collapsibleContainer').collapsiblePanel();
              });
    </script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <p>
	You can also find
	<a href='http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409'
	   title='MSDN ASP.NET Docs'>documentation on ASP.NET at MSDN</a>.
    </p>
    <div class='collapsibleContainer' 
	     title='Here is some stuff you can hide.'>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius
	ullamcorper lacus, ac pharetra libero commodo eu. Aenean auctor imperdiet
	libero, sit amet scelerisque lorem placerat quis. Phasellus pretium, lacus
	eget euismod cursus, nunc nibh semper urna, at blandit elit nisl non dui.
	Sed blandit dignissim tellus, in egestas orci facilisis vel. Curabitur
	consequat ante vel mauris accumsan rutrum. Aliquam lorem est, ornare eget
	mollis sit amet, vestibulum et diam. Phasellus cursus massa sodales metus
	luctus sed blandit quam rhoncus. Proin nunc risus, scelerisque eu sagittis
	in, gravida vitae lectus. Maecenas et ipsum ac mauris condimentum accumsan
	ac et ligula. Phasellus mattis, tortor quis rutrum mollis, ante eros 
	leo, ac venenatis augue nisl sit amet mauris. Maecenas cursus, arcu nec
	egestas molestie, leo lectus pellentesque sapien, eu sollicitudin urna
	dolor vitae nisl. Proin lobortis, tortor quis congue lacinia, arcu elit
	consequat erat, vestibulum aliquet lorem massa sed leo. Suspendisse
	volutpat odio in mauris cursus aliquam. Nullam sed sapien sit amet mi
	laoreet sagittis. Integer rutrum lacus quis felis venenatis porta. 
	<br /><br />
	<asp:TextBox ID='SomeTextBox' runat='server'></asp:TextBox>
	</p>
    </div>
    <div>
        <br />
        <asp:Button ID='SubmitButton' runat='server' Text='Submit'
                    onclick='SubmitButton_Click' /><br /><br />
        <asp:Label ID='LabelResults' runat='server' Text=''></asp:Label>
    </div>

</asp:Content>

Notice the ASP.NET TextBox Sever Contol INSIDE the collapsible content.

We’ll use that text box when the user clicks the Subit button and simply echo the cotent back to the ASP.NET Label control at the bottom of the page.



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void SubmitButton_Click(object sender, EventArgs e)
    {
        LabelResults.Text = &quot;You entered : &quot; +
                             SomeTextBox.Text + &quot; @ : &quot; +
                             DateTime.Now.ToString();
    }
}

When we run the page we see this.

Note the TextBox inside the panel.

If I enter text and then click on the Panel Header….

Then, if I click on the Submit Button we see that the value is recieved and returned from the code behind.

You can download the working sample [ HERE ].