Juice UI: Open source ASP.NET Web Forms components for jQuery UI widgets

This morning at MVP Summit, Scott Hunter just announced a new open source project from appendTo called Juice UI. Juice UI is a collection of Web Forms components which make it incredibly easy to leverage jQuery UI widgets in ASP.NET Web Forms applications. You can start using it right away by adding the JuiceUI NuGet package to your app, and you're welcome to go nuts with the source, which is dual licensed under MIT and GPL.

What Juice UI does

jQuery UI is a library that's built on top of jQuery. It's got a lot of great widgets for common scenarios - things like date pickers, dialogs, and tabs - and they're all built on a really solid widget platform from some of the sharpest Javascript developers in the field. You've always been able to make use of these libraries using jQuery and jQuery UI, but the new Juice UI controls make it that much easier.


<asp:TextBox runat="server" ID="_Restrict" />
    MaxDate="+1M +10D" />

Gives you this:

2012-02-28 09h16_03

Included controls and behaviors

Juice UI is launching with 14 widgets and behaviors. You can see the whole list of controls at http://juiceui.com/controls, and they've all got interactive examples.

2012-02-28 09h17_29

Here's the full list, linked to the documentation:


Add the JuiceUI NuGet package

I'm going to start with a new ASP.NET 4 Web Forms project. I'll right click on the References folder, select Manage NuGet Packages..., and search for "juiceui"

2012-02-28 08h10_11

The JuiceUI namespace

The NuGet package adds the JuiceUI namespace to my web.config, like this:

    <compilation debug="true" targetFramework="4.0" />
        <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />

If needed, I remove that and use the <@Import Namespace="JuiceUI" /> directive to bring that namespace at the page level.

Using the Juice UI controls

You'll first need an <asp:ScriptManager> - you can add one to a page, or you can add one to your site's Master page.

<asp:ScriptManager id="_Script" runat="server" />

Now I can just start using the controls. These are extender controls, so you use the TargetControlID property to point the Juice UI behavior at an Web Forms server control. Here's a stripped down example that hooks up a DatePicker behavior to a TextBox:

<asp:TextBox runat="server" ID="DateSample" />
<Juice:Datepicker runat="server" TargetControlID="DateSample" />

And just because it's fun, I'll add a Draggable behavior that's pointed at a Panel:

<asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;">
        Hi. You can drag me around.
<Juice:Draggable runat="server" TargetControlID="DragBox" />

Note: I'm keeping this really simple for illustration here - of course the style would go in CSS, etc. There are more sophisticated examples in the Juice UI samples included with the source code.

Running this page shows I've got just what you'd expect - a date picker on the textbox, and a draggable panel.

2012-02-28 10h34_32

Here's the complete markup for that page:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="Juice_Sample._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <asp:ScriptManager id="_Script" runat="server" />

    <asp:TextBox runat="server" ID="DateSample" />
    <Juice:Datepicker runat="server" TargetControlID="DateSample" />

    <asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;">
        Hi. You can drag me around.
    <Juice:Draggable runat="server" TargetControlID="DragBox" />


And, in case you're interested, the widgets are hooked up using HTML5 data- attributes:

<input name="ctl00$MainContent$DateSample" type="text" 
        data-ui-widget="datepicker" />

<div id="MainContent_DragBox" 
        style="border:1px solid; width:100px;">
    Hi. You can drag me around.

This seems familiar...

It's a very similar experience to the Ajax Control Toolkit, but using jQuery UI as an underpinning. That is, create Web Forms extender and script controls for all the widgets and effects in jQuery UI. Don't read anything into this - work is still continuing on Ajax Control Toolkit (in fact, there have been quite a few updates lately). The ASP.NET team's long term direction for client side scripting is jQuery, though, and Juice UI helps you to integrate with that really easily.

Finding out more

The best place to find out more about Juice UI is on the Juice UI site, which has interactive examples and documentation.

The source (including a sample project) is in the GitHub repository.

I'd recommend getting help either on StackOverflow (using the juiceui tag) or in the ASP.NET jQuery forum.


  • A wrapper (Juice) of a wrapper (jQuery UI) of a wrapper (jQuery) of a wrapper (JavaScript). That's what ASP.NET WebForms needs, more abstractions.

  • Cool idea - how about something for MVC in the form of HTML Helpers...

  • So, tell me again why I should pile Juice on top of jQuery UI which in turn is piled on top of jQuery which in turn is piled on top of javascript and make all of this work effortlessly on IE, Firefox, Safari, Chrome and Opera.

    It's 1980 all over again as one Case tool vendor after another tries to convince me to pile their tool on top of COBOL.

    This just sounds waaaaaaaaay to familiar. Did you per chance ever do any coding in Ada?

  • I keep getting this error Error: ASP.NET Ajax client-side framework failed to load.

  • Since youre refering to HTML5 attributes, shouldnt the input type be "date"?

  • @bloman Good point, and that's a feature that'll be in ASP.NET 4.5 - HTML5 form data type settings for datetime, e-mail, etc. I think that seems outside the scope of what a jQuery UI control should do, but since it is setting data- attributes it's worth asking. I'll check.

  • Microsoft has excellent widgets for ASP,NET web forms that has all these and then some. What I find amazing is how few libraries are available for MVC. It is very strange,

  • What about the html output? how is that ?

  • Routing using the computer keyboard in addition to computer mouse seems awkward inside Windows eight. Only if many people found gone the regular pc and their data file manager just isn't by any means feel im.

  • Phen375 truly does do what it really says. It does the
    job. Manufacturers of phen375 scam can be extremely confident that you're going to be satisfied with the consequences you achieve, in order that they provide total, money-back guarantee if for some reason anyone with delighted by the product.

  • Its like you read my mind! You seem to know so
    much about this, like you wrote the book in it or something.

    I think that you could do with some pics to
    drive the message home a bit, but other than that, this is fantastic blog.
    A great read. I will certainly be back.

  • Hi friends, fastidious piece of writing and fastidious arguments commented at this
    place, I am truly enjoying by these.

  • Coal-black Rhinoceros - a eleemosynary and resilient animal. he did not as large as the white rhinoceros, but but stimulating - reaches the majority 2-2, 2 m, lengths of up to 3, 15 m in level shoulders of 150-160 cm.

  • It's actually a great and useful piece of information. I am glad that you simply shared this useful info with us. Please stay us informed like this. Thanks for sharing.

  • If you want to grow your experience simply keep visiting this web site
    and be updated with the hottest information posted here.

  • Hi there! I could have sworn I've visited this website before but after looking at some of the posts I realized it's new to me.
    Anyhow, I'm certainly pleased I stumbled upon it and I'll be
    book-marking it and checking back frequently!

  • stopforumspam<<<<< buy our services now or we will continue spamming you

  • Undeniably consider that which you stated. Your
    favorite reason seemed to be at the net the simplest factor to bear in mind of.
    I say to you, I certainly get annoyed while other people think
    about worries that they just don't realize about. You managed to hit the nail upon the top and also outlined out the entire thing without having side effect , people can take a signal. Will likely be back to get more. Thanks

  • Very shortly this web page will be famous among all blogging people, due to it's nice posts

  • I visited many blogs except the audio quality for audio songs current at this web page is
    genuinely excellent.

  • Thanks again for the blog article.Much thanks again. Really Cool.

  • oh Great, thought so

  • Hmm it seems like your site ate my first comment (it was extremely long) so I
    guess I'll just sum it up what I wrote and say, I'm
    thoroughly enjoying your blog. I too am an aspiring
    blog blogger but I'm still new to the whole thing. Do you have any tips and hints for first-time blog writers? I'd really appreciate it.

  • I leave a response each time I like a post
    on a blog or I have something to add to the discussion.
    It is caused by the fire displayed in the post I read.
    And after this article Juice UI: Open source ASP.
    NET Web Forms components for jQuery UI widgets - Jon Galloway.
    I was actually excited enough to drop a thought :
    -) I do have a few questions for you if it's allright. Could it be simply me or does it give the impression like some of these responses come across like coming from brain dead individuals? :-P And, if you are writing on other places, I'd like to keep up
    with you. Would you make a list all of your public pages like your
    Facebook page, twitter feed, or linkedin profile?

  • You can suit about hypnotised by these games, but they
    host a Thanksgiving dinner party every year. Some bizs -- Monopoly and Clue,
    for illustration -- feature had dissimilar opus through named scripts,
    in that location are many things to observe for at one time, guardianship all players on their

  • Fantastic goods from you, man. I've understand your stuff previous to and you are just extremely great. I actually like what you have acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still take care of to keep it sensible. I can't wait to read far more from you. This is really a tremendous site.

  • Amazing! This blog looks just like my old
    one! It's on a entirely different topic but it has pretty much the same layout and design. Superb choice of colors!

Comments have been disabled for this content.