ASP.NET: Using jQuery UI Widgets

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

Various jQuery plugins are available to add interactive features to ASP.NET web applications. A popular plugin is the jQuery UI, built on top of the jQuery library, and consisting of handy functionalities for creating rich content in web applications.

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

  • Using the datepicker control
  • Using the progress bar control
  • Using the slider control
  • Adding tooltips to controls

 

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: Creating Rich Content.

Using the datepicker control

The datepicker is a popular control for date fields in online submission forms. In this recipe, let's see how to use the jQuery UI to attach a datepicker to an ASP.NET TextBox control.

Getting Ready

  1. Create a new web form Recipe5.aspx in the current project.
  2. Add controls to create a simple search form that accepts an input date field as follows:

    <form id="form1" runat="server">
    <div align="center">
    <asp:Label ID="lblDate" runat="server">Search by
    registration date: </asp:Label>
    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
    <asp:Button ID="btnSubmit" Text="Search" runat="server" />
    </div>
    </form>

Thus, on page load, the web form appears as shown in the following screenshot:

ASP.NET jQuery Cookbook

We will now use jQuery UI to attach a datepicker to the TextBox control.

How to do it...

In the document.ready() function of the jQuery script block, apply the datepicker() method to the TextBox control:

$("#txtDate").datepicker();

Thus, the complete jQuery solution for the given problem is as follows:

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

How it works...

Run the web form. On mouseclick on the TextBox control, the datepicker is displayed as shown in the following screenshot:

ASP.NET jQuery Cookbook

The desired date can be picked from the displayed calendar as required.

There's more…

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

Using the progress bar control

jQuery UI provides a Progressbar widget to show the processing status during a wait time in an application. In this recipe, we will learn to create a Progressbar in ASP.NET.

Getting Ready

  1. Include an animated gif file pbar-ani.gif in the images folder in the project.
  2. Add a new web form Recipe6.aspx to the current project.
  3. Add an ASP.NET panel control for the progressbar as follows:
    <asp:Panel id="progressbar" runat="server"></asp:Panel> 
  4. Define some basic css style for the above as follows:

    #progressbar
    {
    width:300px;
    height:22px;
    }

  5. The jQuery UI progressbar uses the jQuery UI CSS Framework for styling. Hence, to set the background of the progressbar to the animated gif file, add the following css style:
    .ui-progressbar-value { background-image: url(images/pbar-
    ani.gif); }
  6. Create another content panel that is initially hidden and displayed only after the progressbar loads completely.
    <asp:Panel id="contentArea" runat="server">Page successfully 
    loaded</asp:Panel>
  7. We will use the following css class to hide this panel:

    .hide 21
    {
    display:none;
    }

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

<form id="form1" runat="server">
<div align="center">
<asp:Panel id="progressbar" runat="server"></asp:Panel>
<asp:Panel id="contentArea" runat="server">Page successfully
loaded</asp:Panel>
</div>
</form>

Now, we will look at the jQuery solution for applying the Progressbar widget to the ASP.NET panel.

How to do it...

  1. In the document.ready() function of the jQuery script block, hide the display message:
    $("#contentArea").addClass("hide"); 
  2. Initialise a counter:
    var cnt = 0;
  3. Define the maximum value of the counter:
    var maxCnt = 100; 
  4. Use the JavaScript timer function setInterval() to define the timeout interval and the callback function after each interval:
    var id = setInterval(showprogress, 10);
  5. Now, define the previous callback function:
    function showprogress() {
  6. Check if the current value of the counter is less than or equal to the maximum allowable value:
    if (cnt <= maxCnt) {
  7. If yes, then apply the progressbar() function with the current counter value:

    $("#progressbar").progressbar({
    value: cnt
    });

  8. Increment the counter:

    cnt++;
    }

  9. If the current value of the counter is greater than the maximum value, clear the timer using the respective ID:

    lse {
    clearInterval(id);

  10. Show the display message:
    $("#contentArea").removeClass("hide");
  11. Hide the progress bar:

    $("#progressbar").addClass("hide");
    }
    }

Thus, the complete jQuery solution is a follows:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#contentArea").addClass("hide");
var cnt = 0;
var maxCnt = 100;

var id = setInterval(showprogress, 10);

function showprogress() {
if (cnt <= maxCnt) {
$("#progressbar").progressbar({
value: cnt
});
cnt++;
}
else {
clearInterval(id);
$("#contentArea").removeClass("hide");
$("#progressbar").addClass("hide");
}
}
});
</script>

In this solution, we have used the JavaScript timer setInterval(customFunction, timeout) to call a custom function after the timeout (in milliseconds). Important points to note are:

  • The setInterval method returns a numeric number,id to track the timeout. This ID can be later used to clear the timer.
  • The timer calls the custom function showprogress() repeatedly after every timeout interval until the clearInterval(id) is called.
  • After every timeout, we will increment the variable cnt by 1 and apply it to the progressbar.
  • When cnt reaches maxCnt, the progressbar loads completely.

How it works...

Run the web form. You will see that the progressbar loads in steps, as shown in the following screenshot:

ASP.NET jQuery Cookbook

After the load is complete, the progressbar is hidden and the content panel is displayed instead, as follows:

ASP.NET jQuery Cookbook

There's more…

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

 

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.)

Using the slider control

The slider control is useful in various applications requiring user interaction such as volume control, color pickers, etc. In this recipe, we will apply the jQuery UI slider widget to create a scrollable div.

Getting Ready

  1. Create a new web form Recipe7.aspx in the current project.
  2. Create nested div areas on the page as follows:

    <div id="outerContent">
    <div id="innerContent">
    </div>
    </div>

  3. Since we want to scroll the inner content area, we will set the width of the innerContent to be longer than that of the outerContent. Hence, define the following styles on the respective div areas:

    #outerContent
    {
    width:300px;
    height:100px;
    overflow:hidden;
    border: 1px solid;
    }
    #innerContent
    {
    width:500px;
    position:relative;
    left: 5px;
    overflow:auto;
    }

  4. Now create a div element to which we can apply the slider as follows:
    <div id ="slider"></div> 

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

<form id="form1" runat="server">
<div align="center" >
<div id ="slider"></div>
<div id="outerContent">
<div id="innerContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut
enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
</form>

Let's take a look at the adopted approach for scrolling the inner div based on the position of the slider:

  1. First determine the amount of scrollable area available:
    Scrollable Area = (Width of Inner Div) - (Width of Outer Div)
  2. Now, apply the Slider value to this Scrollable area to get the left scroll position:
    Left Scroll Position= (Slider Value * Scrollable Area)/100

    Since, the slider value is a percentage, in the above formula we divide by 100.

  3. Now, set the scrollLeft property of the outer div to the above value to scroll the inner div as per the slider.

Next, let's use jQuery UI to implement the slider using the earlier mentioned approach.

How to do it...

  1. In the document.ready() function of the jQuery script block, apply the slider() function on the slider panel:
    $("#slider").slider({ 
  2. Define the minimum value of the slider:
    min: 0,
  3. Define the maximum value of the slider:
    max: 100, 
  4. Set animate to true to slide smoothly on mouse click:
    animate: true,
  5. Define the callback function on the slide event. This event is triggered on every mouse move during the slide:
    slide: function(e, ui) { 
  6. As explained earlier, get the scrollable width as follows:
    var iScrollWidth = $("#innerContent").width() - 
    $("#outerContent").width();
  7. Set the scrollLeft property by computing the left scroll position:

    $("#outerContent").attr({ scrollLeft: (ui.value * 0.01 *
    iScrollWidth) });
    },

  8. Define the callback function on the change event. This event is triggered on slide stop or if the value is changed programmatically:
    change: function(e, ui) { 
  9. Similar to the slide event, calculate the scrollable width:
    var iScrollWidth = $("#innerContent").width() - 
    $("#outerContent").width();
  10. Animate the scrollLeft property of the outer panel:

    ("#outerContent").animate({ scrollLeft: (ui.value * 0.01 *
    iScrollWidth) }, "slow");
    }
    });

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

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#slider").slider({
min: 0,
max: 100,
animate: true,
slide: function(e, ui) {
var iScrollWidth = $("#innerContent").width() -
$("#outerContent").width();
$("#outerContent").attr({ scrollLeft: (ui.value *
0.01 * iScrollWidth) });
},
change: function(e, ui) {
var iScrollWidth = $("#innerContent").width() -
$("#outerContent").width();
$("#outerContent").animate({ scrollLeft:
(ui.value * 0.01 * iScrollWidth) }, "slow");
}
});
});
</script>

How it works...

Run the page. Drag the slider handle to display the scrolling content as shown next:

ASP.NET jQuery Cookbook

There's more…

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

Adding tooltips to controls

jQuery UI version 1.8 does not have inbuilt support for tooltips. The widget will only be released as part of jQuery UI version 1.9.

In this recipe, we will explore an alternative tooltip plugin for creating tooltips in ASP.NET pages.

Getting Ready

  1. Create a new web form Recipe8.aspx in the current project.
  2. Download the jQuery tooltip plugin from http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/.
  3. Save the above plugin file in the script folder js in the project.
  4. On the web form, include the stylesheet as well as the plugin as follows:

    <link href="css/jquery.tooltip.css" rel="stylesheet"
    type="text/css" />
    <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.tooltip.js"
    type="text/javascript"></script>

  5. Add a simple login form to the page.
  6. Add span areas containing the tooltip text as follows:

    <span class="tooltip" title="Please use your registered email
    address">?</span>

    <span class="tooltip" title="Please enter your pin number
    here">?</span>
    where, the tooltip css class is defined as follows:
    .tooltip
    {
    border: 1px solid;
    background-color:Silver;
    cursor:pointer;
    width:15px;
    }

Thus, the complete aspx markup of the page is as follows:

<form id="form1" runat="server">
<div align="center" id="contentArea">
<fieldset style="width:350px;height:140px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr><td colspan="2" class="header">LOGIN USERS</td></tr>
<tr>
<td align="right">
<asp:Label ID="lblUserName" runat="server"
Text="UserName: "></asp:Label>
</td>
<td align="left">
<asp:TextBox ID="txtUserName"
runat="server"></asp:TextBox>
<span class="tooltip" title="Please use your
registered email address">&nbsp;?&nbsp;</span>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="lblPassword" runat="server"
Text="Password: "></asp:Label>
</td>
<td align="left">
<asp:TextBox ID="txtPassword" runat="server"
TextMode="Password"></asp:TextBox>
<span class="tooltip" title="Please enter your pin
number here">&nbsp;?&nbsp;</span>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="btnSubmit" runat="server"
Text="Submit"/>&nbsp;
<asp:Button ID="btnReset" runat="server"
Text="Reset"/>
</td>
</tr>
</table>
</fieldset>
</div>
</form>

On page load, the web form appears as displayed in the following screenshot:

ASP.NET jQuery Cookbook

Let's see how to use the tooltip plugin for displaying the tooltip text on hover.

How to do it...

In the document.ready() function of the jQuery script block, apply the tooltip() method to all the span elements:

$("span").tooltip();

Thus, the complete jQuery solution is as follows:

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

Note that be applying the .tooltip() method on the span areas, we can create the required tooltips. The title text is displayed as the tooltip text.

How it works...

Run the web page. Mouseover on the ? icon. You will notice that the tooltip is displayed as shown in the following screenshot:

ASP.NET jQuery Cookbook

There's more…

For detailed documentation on the jQuery Tooltip plugin, please visit http://docs.jquery.com/Plugins/Tooltip.

Summary

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


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