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

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.

Example:

<asp:TextBox runat="server" ID="_Restrict" />
<Juice:Datepicker 
    runat="server" 
    TargetControlID="_Restrict" 
    MinDate="-20" 
    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:

Walkthrough

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:

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <pages>
      <controls>
        <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />
      </controls>
    </pages>
  </system.web>
</configuration>

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.
</asp:Panel>
<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>
<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.
    </asp:Panel>
    <Juice:Draggable runat="server" TargetControlID="DragBox" />

</asp:Content>

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

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

<div id="MainContent_DragBox" 
        data-ui-widget="draggable" 
        style="border:1px solid; width:100px;">
    Hi. You can drag me around.
</div>

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.

Published Tuesday, February 28, 2012 11:21 AM by Jon Galloway

Comments

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

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.

Tuesday, February 28, 2012 3:15 PM by no

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

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

Tuesday, February 28, 2012 3:54 PM by Todd

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

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?

Tuesday, February 28, 2012 7:00 PM by ItsAWrap

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

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

Wednesday, February 29, 2012 1:01 AM by rickj1

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

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

Wednesday, February 29, 2012 2:42 AM by blomman

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

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

Wednesday, February 29, 2012 11:09 AM by Jon Galloway

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

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,

Thursday, March 1, 2012 4:12 PM by Shah

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

What about the html output? how is that ?

Saturday, March 3, 2012 4:19 PM by matiaskorn

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

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.

Monday, October 22, 2012 5:53 PM by seo资源

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

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.

Sunday, March 3, 2013 4:06 PM by Harwood

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

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.

Friday, March 15, 2013 8:18 AM by Stamper

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

Hi friends, fastidious piece of writing and fastidious arguments commented at this

place, I am truly enjoying by these.

Monday, March 18, 2013 1:23 PM by Branson

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

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.

Monday, March 18, 2013 8:42 PM by SawVariavak

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

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.

Sunday, March 24, 2013 1:57 AM by Sperry

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

If you want to grow your experience simply keep visiting this web site

and be updated with the hottest information posted here.

Friday, March 29, 2013 9:53 AM by Avery

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

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!

Sunday, April 7, 2013 3:10 AM by Broadway

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

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

Friday, April 12, 2013 3:23 PM by Uribe

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

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

Tuesday, April 16, 2013 11:07 PM by Christian

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

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

Wednesday, May 1, 2013 7:53 PM by Sweet

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

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

genuinely excellent.

Friday, May 10, 2013 2:40 AM by Flanigan

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

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

Tuesday, May 14, 2013 6:43 AM by redBubble coupons

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

oh Great, thought so

Wednesday, May 15, 2013 12:42 PM by Beardsley

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

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.

Friday, May 17, 2013 3:15 AM by Worrell

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

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?

Sunday, May 19, 2013 7:36 AM by Moten

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

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

toes.

Sunday, May 19, 2013 8:21 AM by Bandy

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

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.

Tuesday, May 21, 2013 2:29 AM by dress karen millen

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

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!

Friday, May 24, 2013 2:34 PM by Hartman