ASP.NET: Creating Rich Content

Exclusive offer: get 50% off this eBook here
ASP.NET jQuery Cookbook

ASP.NET jQuery Cookbook — Save 50%

Over 60 practical recipes for integrating jQuery with ASP.NET

$26.99    $13.50
by Sonal Aneel Allana | April 2011 | .NET

With Microsoft's contribution of Templates, DataLink, and Globalization plugins to the jQuery library and the distribution of jQuery with Visual Studio 2010 onwards, the library has gained popularity with ASP.NET developers. jQuery can be very easily interfaced with ASP.NET controls as well as custom user controls. It can be used to validate controls using client side scripts, thus giving us an alternative for server side Validation Controls. It can be used to incorporate cool animation effects as well as to create graphic-rich pages.

In this article by Sonal Aneel Allana, author of ASP.NET jQuery Cookbook, we will cover:

  • Creating an accordion control
  • Creating a tab control
  • Creating draggable controls
  • Creating dialog boxes

 

ASP.NET jQuery Cookbook

ASP.NET jQuery Cookbook

Over 60 practical recipes for integrating jQuery with ASP.NET

        Read more about this book      

(For more resources on ASP.NET, see here.)

The reader can benefit from the previous article on ASP.NET: Using jQuery UI Widgets.

Introduction

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

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

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:

    ASP.NET jQuery Cookbook

  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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/jquery-1.4.1.js" type="text/javascript"></script> 
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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:

ASP.NET jQuery Cookbook

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:

ASP.NET jQuery Cookbook

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

There's more…

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

 

 

ASP.NET jQuery Cookbook Over 60 practical recipes for integrating jQuery with ASP.NET
Published: April 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

 

        Read more about this book      

(For more resources on ASP.NET, see here.)

Creating draggable controls

With the help of jQuery UI, web controls can be enhanced and interactive properties such as draggable, droppable, resizable, sortable, and selectable can be added. In this recipe, let's create some draggable ASP.NET panels on the web form.

Getting Ready

  1. Create a new web form Recipe3.aspx in the current project.
  2. Add a container div area on the web form as follows:
    <div align="center" id="contentArea"> 
    </div>
  3. Add the following css style to the above div area:

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

  4. Within the container div area, add few panel controls. Create the following css class for these panel controls:

    .panel
    {
    border:1px solid;
    border-color:Gray;
    width:200px;
    height:100px;
    padding:5px;
    }

  5. Apply the above class to the panels, so that the complete aspx markup of the form is as shown next:

    <form id="form1" runat="server">
    <div align="center" id="contentArea">
    <asp:Panel ID="Panel1" runat="server" CssClass="panel">
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore mag
    aliqua.
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" CssClass="panel">
    Ut enim ad minim veniam, quis nostrud exercitation ull
    laboris nisi ut aliquip ex ea commodo consequat.
    </asp:Panel>
    <asp:Panel ID="Panel3" runat="server" CssClass="panel">
    Duis aute irure dolor in reprehenderit in voluptate ve
    esse cillum dolore eu fugiat nulla pariatur.
    </asp:Panel>
    <asp:Panel ID="Panel4" runat="server" CssClass="panel">
    Excepteur sint occaecat cupidatat non proident
    sunt in culpa qui officia deserunt mollit anim id est laborum
    </asp:Panel>
    </div>
    </form>

  6. The page will display the panels as captured in the following screenshot:

ASP.NET jQuery Cookbook

We will now add jQuery UI's draggable feature to these panels so that they can be dragged anywhere on the page on the mousedown event.

How to do it...

In the document.ready() function of the jQuery script block, apply the draggable() method to the panel controls. Use the css selector $(".panel") to retrieve all the panel controls on the page:

$(".panel").draggable();

Thus, the complete jQuery solution is as follows:

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".panel").draggable();
});
</script>

How it works...

Run the web form. Now click on any panel and drag on the screen. You will notice that the panels can be dragged and dropped as required, as shown in the following screenshot:

ASP.NET jQuery Cookbook

There's more...

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

Creating dialog boxes

Dialog boxes are an important mode of interaction with the end user. They are used to deliver information, error, warning, or confirmation messages to the end user.

jQuery UI provides a dialog widget as an alternative to the traditional JavaScript pop-up windows. In this recipe, let's see how to use jQuery UI dialog widget to display a basic confirmation dialog box.

Getting Ready

  1. Create a new web form Recipe4.aspx in the current project.
  2. Add an ASP.NET panel on the form with the required confirmation message as follows:

    <asp:Panel ID="dialogbox" ToolTip="Confirmation" runat="server">
    Are you sure you want to continue?
    </asp:Panel>

  3. At runtime, the ASP.NET panel control is rendered as a div element and the ToolTip property is rendered as title property of the div element. Hence, we can use the ToolTip property to set the title of the dialog box as done in the code snippet mentioned earlier.

  4. Add a button control to the form to trigger the dialog box on the click event.

Thus, the complete aspx markup of the web form is as follows:

<form id="form1" runat="server">
<div align="center">
<asp:Panel ID="dialogbox" ToolTip="Confirmation"
runat="server">
Are you sure you want to continue?
</asp:Panel>
<asp:Button ID="btnOpen" runat="server" Text="Click to open
the dialog box" />
</div>
</form>

Thus, on page load, the page will display as shown in the following screenshot:

ASP.NET jQuery Cookbook

Now, let's use jQuery UI to set the properties of the dialog box.

How to do it...

  1. In the document.ready() function of the jQuery script block, apply the dialog() method on the panel control:
    ( "#dialogbox" ).dialog({
  2. Set the autoOpen property to false, so that the dialog box is hidden until the dialog("open") method is called:
    autoOpen: false,
  3. Set the modal property to true, so that the web form is disabled as long as the dialog box is open:
    modal:true, 
  4. Set the resizableproperty to false, so that the dialog window cannot be resized at runtime:
    resizable:false,
  5. Set the buttons property to an array containing OK and Cancel buttons. Also define the desired action on the click event of the respective buttons. For the purpose of this demo, we have defined .dialog("Close") as the custom action for both the buttons:

    buttons: {
    "OK" : function(){
    $(this).dialog("close");
    },
    "Cancel" : function(){
    $(this).dialog("close");
    }
    }
    });

  6. Define an event handler for the click event of the btnOpen button control:
    $( "#btnOpen" ).click(function() { 
  7. Open the dialog box:
    $( "#dialogbox" ).dialog( "open" );
  8. Return false so that the dialog box remains active on the page until further user action:

    return false;
    });

Thus, the complete jQuery solution is as follows:

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$( "#dialogbox" ).dialog({
autoOpen: false,
modal:true,
resizable:false,
buttons: {
"OK" : function(){
$(this).dialog("close");
},
"Cancel" : function(){
$(this).dialog("close");
}
}
});

$( "#btnOpen" ).click(function() {
$( "#dialogbox" ).dialog( "open" );
return false;
});
});
</script>

Note that, at runtime, the dialog box is rendered as the following div element:

<div id="dialogbox" title="Confirmation">
Are you sure you want to continue?
</div>

How it works...

Run the web form. Click on the button to launch the confirmation box as follows:

ASP.NET jQuery Cookbook

On clicking either of the OK or Cancel buttons, the dialog box disappears and the page is enabled again. Note that the dialog box can also be dragged on the page as required.

There's more…

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

Summary

In this article we saw how to create rich content in ASP.NET.


Further resources on this subject:


ASP.NET jQuery Cookbook Over 60 practical recipes for integrating jQuery with ASP.NET
Published: April 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Sonal Aneel Allana

Sonal Aneel Allana is a Senior Technical Consultant with Accentiv' SurfGold, Singapore. She has over a decade of experience in building web and desktop solutions in Microsoft technologies. She has worked with government agencies, credit bureaus, banks, financial institutions, and multinationals, delivering high-end customized solutions to meet their needs. She has worked on applications ranging from core banking software and B2B links to content management, workflow, and loyalty engines.

From time to time, she has also taken up the role of project lead and has carried numerous projects from conceptualization through implementation successfully. In addition to her experience in Microsoft technologies, she is well versed in the J2EE and LAMP platforms.

She holds a Master's degree in Computer Science from the National University of Singapore and a Bachelor's degree in Computer Engineering from Mumbai University. She is also passionate about network and data security and has a certificate in Security Technology and Management from the Institute of Systems Science, National University of Singapore.

Books From Packt


ASP.NET 4 Social Networking
ASP.NET 4 Social Networking

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

ASP.NET Site Performance Secrets
ASP.NET Site Performance Secrets

jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

ASP.NET MVC 2 Cookbook
ASP.NET MVC 2 Cookbook

Spring Roo 1.1 Cookbook: RAW
Spring Roo 1.1 Cookbook: RAW

JasperReports 3.6 Development Cookbook
JasperReports 3.6 Development Cookbook

Learning jQuery 1.3
Learning jQuery 1.3


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software