Tapping the Juice UI with ASP.NET

Introduction

jQuery and jQuery UI are quite popular JavaScript libraries amongst ASP.NET developers. jQuery UI provides several widgets and plugins that help you develop professional looking websites quickly and easily. Though ASP.NET developers have been using jQuery UI in their websites, one downside of the jQuery UI from an ASP.NET perspective is that it is purely a client side library. ASP.NET web forms often rely on server side processing, and configuring the jQuery UI widgets can become tedious in such cases. Juice UI attempts to provide a solution in such cases. Juice UI essentially acts as a wrapper over jQuery UI widgets so that they can be accessed in your server side script just like any other server control. This article gives you a quick overview of Juice UI components and shows how they can be used in ASP.NET Web Forms applications.

Juice UI Components

jQuery UI is a set of widgets and plugins that provide rich functionality to your web applications. It provides widgets such as Accordion, Autocomplete, DatePicker, Tab, Progressbar and Slider. It also offers complex UI behaviors such as drag and drop, resizing, sorting and selecting. Juice UI is an open-source collection of Web Forms components that wraps jQuery UI widgets so that you can use them in your ASP.NET Web Forms projects easily.

As of this writing the following Juice UI components are available:

Juice UI Component

Description

Accordion

An Accordion essentially displays content in collapsible panels. At a time only one panel is expanded while other panels are collapsed.

Autocomplete

An Autocomplete component enables you to quickly find and select from a predefined list of values as you type. Autocomplete is normally associated with a textbox.

Button

Button enhances standard form elements like button, submit button, reset button or a hyperlink to themable buttons with appropriate mouseover and active styles.

Datepicker

Datepicker allows you to pick date values from a popup calendar. It is highly configurable and you can customize the date format and date range easily.

Dialog

A dialog is a floating window that contains a title bar and content area. The dialog window is movable, resizable and can be closed with the 'x' icon by default.

Draggable

Draggable component makes selected elements draggable by the mouse.

Droppable

Droppable component makes selected elements droppable. Draggable and droppable components go hand in hand.

Position

Position widget allows you to position an element relative to the window, document, a particular element or mouse position.

ProgressBar

Progressbar is designed to display the current process completion value in %.

Resizable

Resizable plugin makes selected elements resizable.

Selectable

Selectable plugin allows you to select elements by dragging a box (also called a lasso) with the mouse over the elements.

Slider

Slider plugin displays a slider so that a value from a range can be selected.

Sortable

Sortable plugin allows you to sort elements by dragging them with the mouse.

Tabs

Tabs are generally used to organize content into multiple sections.

You can visit Juice UI documentation for a complete and latest list of components and their properties and events.

Installing and Using Juice UI

Before you use any of the Juice UI components you should install Juice UI NuGet package. To do so, open Visual Studio and select the "Manage NuGet Packages" menu option from Project menu. This will open a dialog as shown below:

Manage NuGet Packages
Manage NuGet Packages

Search for JuiceUI and you should see Juice UI NuGet package. Click on the install button.

Installing the Juice UI NuGet package will add a reference to the required assemblies and script files.

Reference to the required assembliesReference to the required assemblies
Reference to the required assemblies

You will also find a <pages> section added to your web.config file:

    <pages>
      <controls>
        <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />
      </controls>
    </pages>

The <pages> section refers JuiceUI assembly so that you need not import it in each and every web form.

Once you install Juice UI you can use any of its components on your web forms. As an example you will use a Datepicker on a web form. Open the default web form and place a ScriptManager control on it from the AJAX toolbox. Juice UI components require ScriptManager to function.

ScriptManager
ScriptManager

Also drag and drop a TextBox server control on the web form. Then switch to markup view and add the Datepicker Juice UI component as shown below:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:TextBox runat="server" ID="TextBox1" />
    <Juice:Datepicker ID="Datepicker1" runat="server" TargetControlID="TextBox1" />
</form>

As you can see Juice UI Datepicker has its TargetControlID property set to TextBox1. This means once TextBox1 gets focus, a popup date picker will be shown and upon selecting a date, TextBox1 will be populated with the selected date.

The following figure shows the Juice UI datepicker at run time:

Juice UI datepicker at run time
Juice UI datepicker at run time

You can set the properties of the Datepicker from your server side code as shown below:

protected void Page_Load(object sender, EventArgs e)
{
    Datepicker1.MinDate = "-20";
    Datepicker1.MaxDate = "+1M +10D";
}

Here you are defining a date range from which the user can pick a date value. The MinDate property specifies the minimum date and MaxDate property defines the maximum date. Notice how the minimum and maximum date values are specified. The value of -20 means previous 20 days and +1M +10D means next one month and ten days. You can, of course, set these properties on <Juice:Datepicker />markup tag instead of the code.

Using Accordion Control from Juice UI

In this section you will use Accordion Juice UI control. Add another web form and place a ScriptManager control as before. Then add a Juice UI Accordion as shown below:

<Juice:Accordion runat="server" Collapsible="true" ID="Accordion1" >
    <Juice:AccordionPanel Title="Nancy Davolio">
        <PanelContent>
            ...
        </PanelContent>
    </Juice:AccordionPanel>
    <Juice:AccordionPanel Title="Andrew Fuller">
        <PanelContent>
        ...
        </PanelContent>
    </Juice:AccordionPanel>
    <Juice:AccordionPanel Title="Janet Leverling">
        <PanelContent>
        ...
        </PanelContent>
    </Juice:AccordionPanel>
</Juice:Accordion>

As you can see the Accordion control consists of three AccordionPanel elements. The Title property specifies the heading for that section. Each AccordionPanel contains a PanelContent element. The actual content of that panel are placed inside the PanelContent section (not shown above to reduce clutter). If you run the web form you should see something like this:

Run the web form
Run the web form

Creating Accordion from Server Side Code

The real advantage of Juice UI is that it allows you to programmatically access the components. In the preceding section you placed AccordionPanel elements statically at design time. You can also add then via code. Consider, for example, that you have an Employee table containing employee information. You want to display employee name in the AccordionPanel title and notes about the employee as the PanelContent. In this case you can't add AccordionPanel elements at design time. You will have to fetch employee records from the database and then render AccordionPanel elements depending on the available number of records. Let's see how that can be accomplished.

First of all, create an Entity Framework data model for the Employees table of Northwind database.

Employees table
Employees table

Now open the code behind for the web form and add the following code in the Page_Load event handler:

protected void Page_Load(object sender, EventArgs e)
{
    NorthwindEntities db = new NorthwindEntities();
    var data = from item in db.Employees
                select item;
    foreach (var obj in data)
    {
        AccordionPanel panel = new AccordionPanel();
        panel.Title = obj.FirstName + " " + obj.LastName;
        AccordionPanelTemplate c = new AccordionPanelTemplate(obj.Notes);
        panel.PanelContent = c;
        Accordion1.AccordionPanels.Add(panel);
    }
 
}

Here, you fetch Employee data from the Employees table. You then iterate through the Employee objects and with each iteration add an AccordionPanel dynamically. Notice how AccordionPanel class has been instantiated and its properties are set. The Title property is a simple one but setting PanelContent requires some additional work. In the above code AccordionPanelTemplate class has been instantiated and employee Notes are passed to its constructor. From where does it come? The AccordionPanelTemplate is actually our custom class that looks like this:

public class AccordionPanelTemplate : ITemplate
{
    private string _text;
 
    public AccordionPanelTemplate(string text)
    {
        _text= text;
    }
 
    public void InstantiateIn(Control container)
    {
        LiteralControl l = new LiteralControl(_text);
        container.Controls.Add(l);
    }
 
}

The AccordionPanelTemplate represents a template for an AccordionPanel and implements ITemplate interface. The InstantiateIn() method creates a LiteralControl and adds it to the container's Controls collection. In our example, the template consists of just text data but you could have added any other kind of markup here.

Once an AccordionPanel is created dynamically it is added to the AccordionPanels collection of the Accordion. The following figure shows a sample of the above web form:

Web Form Sample
Web Form Sample

Notice how AccordionPanel elements have been created dynamically.

Summary

Juice UI provides a wrapper for jQuery UI widgets and plugins. It allows you to configure and access various widgets via server side code. Juice UI comes as a NuGet package that needs to be installed in your ASP.NET Web Forms projects. Juice UI provides widgets such as Accordion, Tabs, Autocomplete and Datepicker that help you create professional web applications quickly. This article gave you an overview of Juice UI and illustrated how Juice UI components can be accessed from web form server side code. For a complete list of Juice UI components, documentation and community support you can go here.

Download the code for this article.



Related Articles

Downloads