ASP.NET and jQuery: how to create rich content

In a nutshell, the jQuery UI library provides the following:

• Completely configurable widgets like accordion, tabs, progressbar, datepicker, slider, autocomplete, dialog, and button
• Interactive features like draggable, droppable, resizable, selectable, and sortable
• Advanced animation effects like show, hide, toggle, blind, bounce, explode, fade, highlight, pulsate, puff, scale, slide, etc
• Customisable themes to suit the look and feel of your website

Using jQuery and ASP.NET together

In this article, we will primarily take a look at integration of jQuery UI with ASP.NET to build rich content quickly and easily.

Read more: ASP.NET: Using jQuery UI Widgets

Getting started

1. Let’s start by creating a new ASP.NET website Chapter9 in Visual Studio.
   Go to the download page of jQuery UI at http://jqueryui.com/download, which allows customizable downloads based on the features required in the web application. For the purpose of this article, we will download the default build as shown next:

   

   (Move the mouse over the image to enlarge.)

2. jQuery UI allows various custom themes. We will select the Sunny theme for our project:

   
3. Save the downloaded file. The download basically consists of the following:
   • css folder consisting of the the theme files
   • development-bundle folder consisting of demos, documents, raw script files, etc.
   • js folder consisting of the minified version of jQuery library and jQuery UI
4. Save the earlier mentioned css folder in the current project. Save the minified version of jQuery UI and jQuery library in a script folder js in the project.
5. In addition to including the jQuery library on ASP.NET pages, also include the UI library as shown:

   <script src="js/jquery-1.4.1.js" type="text/javascript"></script> 
   <script src="js/jquery-ui-1.8.9.custom.min.js"  
   type="text/javascript"></script>

6. Include the downloaded theme on the aspx pages as follows:

   <link href="css/sunny/jquery-ui-1.8.9.custom.css" rel="stylesheet" 
   type="text/css" />

Now let’s move on to the recipes and explore some of the powerful functionalities of jQuery UI.

Creating an accordion control

The jQuery accordion widget allows the creation of collapsible panels on the page without the need for page refresh. Using an accordion control, a single panel is displayed at a time while the remaining panels are hidden.

Getting Ready

1. Create a new web form Recipe1.aspx in the current project.
2. Add a main content panel to the page. Within the main panel, add pairs of headers and subpanels as shown next:

   <asp:Panel id="contentArea" runat="server"> 
   <h3><a href="#">Section 1</a></h3> 
   <asp:Panel ID="Panel1" runat="server"> 
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
   eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   </asp:Panel> 
   <h3><a href="#">Section 2</a></h3> 
   <asp:Panel ID="Panel2" runat="server"> 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
   nisi ut aliquip ex ea commodo consequat.  
   </asp:Panel> 
   <h3><a href="#">Section 3</a></h3> 
   <asp:Panel ID="Panel3" runat="server"> 
   Duis aute irure dolor in reprehenderit in voluptate velit esse 
   cillum dolore eu fugiat nulla pariatur. 
   </asp:Panel> 
   <h3><a href="#">Section 4</a></h3> 
   <asp:Panel ID="Panel4" runat="server"> 
   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
   officia deserunt mollit anim id est laborum 
   </asp:Panel> 
   </asp:Panel>

3. Add some styling to the main content panel as required:

   #contentArea
   {
   width: 300px;
   height: 100%;
   }

Our accordion markup is now ready. We will now transform this markup into an accordion control using the functionalities of jQuery UI.

How to do it…

In the document.ready() function of the jQuery script block, apply the accordion() method to the main content panel:

$("#contentArea").accordion();

Thus, the complete jQuery UI solution for the problem at hand is as follows:

<script language=”javascript” type=”text/javascript”>
$(document).ready(function(){
$(“#contentArea”).accordion();
});
</script>

How it works…

Run the web page. The accordion control is displayed as shown in the following screenshot:

Click on the respective panel headers to display the required panels. Note that the accordion control only displays the active panel at a time. The remaining panels are hidden from the user.

There’s more…

For detailed documentation on the jQuery UI accordion widget, please visit http://jqueryui.com/demos/accordion/.

Creating a tab control

The jQuery UI tab widget helps to create tab controls quickly and easily on ASP.NET web pages. The tab control helps in organizing content on a page thus improving the presentation of bulky content. With the help of jQuery UI tab widget, the content can also be retrieved dynamically using AJAX.

In this recipe, we will see a simple example of applying this powerful widget to ASP.NET forms.

Getting Ready

1. Create a new web form Recipe2.aspx in the current project.
2. Add an ASP.NET container panel to the page.
3. Within this container panel, add subpanels corresponding to the tab contents. Also add hyperlinks to each of the subpanels.

Thus the complete aspx markup of the web form is as shown next:

<form id=”form1″ runat=”server”>
<asp:panel id=”contentArea” runat=”server”>
<ul>
<li><a href=”#tab1″>Tab 1</a></li>
<li><a href=”#tab2″>Tab 2</a></li>
<li><a href=”#tab3″>Tab 3</a></li>
<li><a href=”#tab4″>Tab 4</a></li>
</ul>
<asp:panel ID=”tab1″ runat=”server”>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
</asp:panel>
<asp:panel ID=”tab2″ runat=”server”>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</asp:panel>
<asp:panel ID=”tab3″ runat=”server”>
<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. </p>
</asp:panel>
<asp:panel ID=”tab4″ runat=”server”>
<p>Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum</p>
</asp:panel>
</asp:panel>
</form>

Next, we will see how we can transform this markup into a tab control using jQuery UI.

How to do it…

In the document.ready() function of the jQuery script block, apply the tabs() method to the container panel as follows:

$("#contentArea").tabs();

Thus, the complete jQuery UI solution for creating the tab control is as follows:

<script language=”javascript” type=”text/javascript”
$(document).ready(function(){
$(“#contentArea”).tabs();
});
</script>

How it works…

Run the web form. The page displays the tabbed content as follows:

Click on the respective tab headers to view the required content.

There’s more…

For detailed documentation on the jQuery UI tabs widget, visit the jQuery website.