ASP.NET jQuery Cookbook

Over 60 practical recipes for integrating jQuery with ASP.NET

    

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:

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:

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:

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

There’s more…

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