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

Comments

  • Eng

    Posted by CalebT on 03/25/2014 11:13am

    The Juice Ui is Great and I will user it

    Reply
  • That explains why people are dead wrong around shoes and as a consequence the reasons you need to check out this history.

    Posted by BobHotgloff on 05/22/2013 02:00am

    Basic principles of sneakers that one can really benefit from starting up today. [url=http://www.shoesjp.biz/new-balance【ニューバランス】-c-670.html]new balance[/url] Reason why all things that you've found out about shoes is actually false and what you must understand. [url=http://www.shoesjp.biz/nike【ナイキ】-c-634.html]ナイキスニーカー[/url] Quick report will show you most of the cogs and wheels linked with sneakers and consequently those actions you want to handle this afternoon. [url=http://www.kutujp.biz/]アディダス[/url] Hot sneakers Publication Unwraps Very Best Way To Rule The shoes Scene [url=http://www.kutujp.biz/アディダス-adidas-c-4.html]adidas[/url] Reasons almost anything you might have learned about sneakers is drastically wrong and what you must understand. [url=http://www.kutujp.biz/アシックス-asics-c-3.html]アシックス シューズ[/url] Ideal method for shoes you can find out more about right away. [url=http://www.kutujp.biz/ナイキ-nike-c-13.html]ナイキスニーカー[/url] Progressive website shows the critical info around sneakers and as a consequence reasons why should take action straight away. [url=http://www.kutujapan.org/]靴 通販[/url] New sneakers E book Will show Methods To Rule The shoes Arena [url=http://www.kutujapan.org/adidas-アディダス-c-74.html]アディダス シューズ[/url] Cutting edge sneakers Guide Discloses The Way You Can Rule The shoes Market [url=http://www.kutujapan.org/new-balance-ニューバランス-c-13.html]new balance[/url] What the pros normally are not reporting around shoes and in what way it can affect you actually. [url=http://www.kutujapan.org/nike-ナイキ-c-78.html]nike[/url] Reasons everyone is dead wrong when it comes to shoes and consequently reasons why you will have to check this out analysis.

    Reply
  • Carrie Lauth LadyPens lululemon pants

    Posted by abbqwqs on 05/11/2013 04:04pm

    ray ban glasses The industry says the game remains safe, but most participants havenrrrt heard of the potentially fatal danger of the co2 canisters. mia 2 Colette Contois was not the first person to perish from a paintball accident involving an ejected CO2 canister. The Consumer Product Safety Payment says it is investigating five more paintball gun incidents, such as death of a 15-year-old who had previously been struck in the head by an ejected canister. cheap sunglasses online cheap rayban outlet The CPSC instructed Good Morning America there is certainly cause for concern. The organization endorses that children should not be in a position to dismantle the pistols - adults ought to handle it, after familiarizing themselves with the instructions. clarisonic brush When Tag Contois took his kid Caleb and some friends to learn paintball to commemorate Caleb's 10th birthday, this individual never imagined anyone could possibly get hurt, specially after the game has been over. cheap rayban online cheap oakley sunglasses But as your children stood around deteriorating the guns as soon as the game, there was any loud bang, along with Contois felt his wife Colette's head hit his shoulder. face brush As one of the younger players was deteriorating his weapon, the carbon dioxide canister which powers it at any time separated from the firearm and hit Colette Contois in the back of your head. She died quickly. cheap oakley cheap oakley outlet "Seven days ago, we had arrived having a party. [We] buried her two days ago, and our whole existence air jordan 3 changed as we know it," Contois told Hello America this week. cheap oakley online

    Reply
  • Healthy Ideas For Any Bag Lunch under armour outlet

    Posted by mkuqwej on 05/08/2013 07:19pm

    clarisonic mia 2 ========================================== Gucci Bags Outlet We have beanbags in all sizes. Cut costs using our coupon codes on our site. We've a huge range in stock along with reliable delivery. Obtain Now at Beanbags UK face brush clarisonic brush ========================================== Burberry Bags Outlet If you are searching for a bean bag which is equally popular with boys along with girls, it won't come as a surprise that the red-colored bean bag leads the way. air jordan 3 air jordan 14 The actual red beanbag goes well with just about any kind of furniture you have and is also massively popular with Christmas time and Love. It is also proving to be very popular as a birthday present too. Gucci Tote Bag It goes well in any room for both man or woman and if you are planning on obtaining one in front in the tv then this red bean bag is the a single you want to get your hands on. Retro Jordan Shoes air jordan 7 Many customers have told us that it looks wonderful in an adult place where there isnt so much traffic sitting on this. Saying that though we realize of many familes with small children that have ordered this bean bag and are delighted with it. workout clothes Thank you for taking the time to visit our bean bag store where you can shop for every beanbag imaginable. Our aim is to provide you with the most outstanding customer satisfaction you have ever come across although shopping on the net. air jordan 11

    Reply
  • Abercrombie be forgotten past brood stores online,abercrombie selling uk online,abercrombie marketing lessen,recognized abercrombie works vamoose coin

    Posted by koltchpvh on 04/16/2013 12:47pm

    Pattern month, Chinese grammar uniforms made the news. Studies had shown [url=http://www.hollistercovfrance.fr]hollister france[/url] that perhaps as assorted as 25,000 children in Shanghai, China, were wearing mandated uniforms that were essentially poisoning them [url=http://www.abercrombiesfrancevparise.fr]abercrombie france[/url]. The construction contained toxic hot amines, meditating to be carcinogens and pioneer in plastics, dyes and pesticides. Ingesting, inhaling or agreeable the chemicals is considered dicey and some [url=http://www.airjordanfrpaschera.fr]air jordan pas cher[/url] countries take banned them. Students were told to terminus wearing the outfits made on means of Shanghai Ouxia Clothing Convoy until a unbroken enquiry had taken recall [url=http://www.abercrombieufrancersoldes.fr]abercrombie[/url]. Antiquated on, when women wanted to emulate that look, [url=http://www.airjordanspasuchera.fr]jordan[/url] they couldn’t even-handed hike into a asset salon and inspire the hairdresser to bother still their locks into that abrupt, just-below-the-ears style. Uncountable hairdressers [url=http://www.hollisterfrancevmagusin.fr]hollister[/url] levelled doused refused to do the sudden and decidedly unsettled petition And some didn’t know how to do it since they’d only continuously employed their shears on extensive plaits [url=http://www.abercrombiexandfitchuke.co.uk]abercrombie[/url]. As a substitute for of being deterred, the flapper waved off those rejections and headed to the barbershop for the sake of the do. The barbers complied [url=http://www.monclerfranceumagasinsfr.com]moncler[/url]. In these times that we’ve shared Dani + Dominic’s excellent date photos, [url=http://www.airjordanzchaussuren.com]air jordan[/url] it’s on an individual evoke to fragment their marrying! I inamorata that Dani + Dom made essentially all in amends their day. Dani is wearing a particular of my most favorite dresses from [url=http://www.michaelukorsua.com]michael kors outlet[/url] BHLDN and her bridesmaids all wore far-fetched dresses from Spare People. They did all things definitely untraditional including specialty all a week preceding the time when and changing the metre of their party! The two [url=http://www.hollisterucoboutiques.fr]hollister france[/url] of them fondness today on thoroughfare trips and because of their exuberant nights on the up in the wind roads, “Free” by way of Zach Brown Moor became their anthem and first prom at a chaffer expect price a fuss [url=http://patrimoine.agglo-troyes.fr/BAM/louboutinpascher.html]louboutin[/url].

    Reply
  • Juice UI not displaying controls properly in my machine

    Posted by Priya on 10/04/2012 01:13pm

    Hi, First of all, Great Post! I followed all the steps in this post and even from Juice UI official website. But I am not able to see the accordion control properly on any of my browsers(firefox/chrome/IE). I have Javascript Enabled in all my browsers. Still I am not able to see the controls. Accordion is just displaying the html content and no collapsible container around. Can you please help me with this?

    Reply
  • dynamic menu in JUICE UI

    Posted by oliver c apilado on 04/21/2012 02:29am

    hi, is there anyway to make dynamically that MENU JUICE UI? I check that MENU uses ul li tags, Please advice us. -oliver

    Reply
  • Great article

    Posted by Andrew Powell on 04/13/2012 07:32am

    Thanks for posting this great comprehensive article on JuiceUI, and for promoting the project. It's much appreciated!

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Agile methodologies give development and test teams the ability to build software at a faster rate than ever before. Combining DevOps with hybrid cloud architectures give teams not just the principles, but also the technology necessary to achieve their goals. By combining hybrid cloud and DevOps: IT departments maintain control, visibility, and security Dev/test teams remain agile and collaborative Organizational barriers are broken down Innovation and automation can thrive Download this white paper to …

  • On-demand Event Event Date: September 10, 2014 Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild." This loop of continuous delivery and continuous feedback is how the best mobile …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds