前言
這篇文章的原文來自Jon Galloway，想看原文的請猛戳鏈接。第一次接觸這個Juice UI是看到同事分享的郵件，當時只是粗略看看，不過感覺把jQuery UI整合到ASP.NET Web控件裏去確實是個不錯的主意。今天偶然在網上看到了這篇文章，就動手把它翻譯過來，和大家分享。以下是譯文：
今天早上的MVP峯會上，Scott Hunter剛剛從appendTo網站新發布了一個開源項目，名字叫Juice UI。Juice UI是一個Web窗體控件的集合，並整合了jQuery UI。你可以通過添加JuiceUI NuGet package到你自己的應用中，立即就可以使用它。同時源碼是提供下載的（go nuts with the source）, 他的版權協議是基於MIT和GPL的。
Juice UI，能做什麼？
jQuery UI 是一個構建在jQuery之上的UI庫。它為平常的場景提供了非常多且強大的部件，例如日期選擇期，對話框和選項卡等等；並且一些頂尖的js開發者（some of the sharpest Javascript developers in the field）參與開發提供了堅實的基礎。雖然你總是可以利用一些使用了jQuery和jQuery UI的庫，但是全新的Juice UI控件可以讓這些工作更簡單。
例如：
1: <asp:TextBox runat="server" ID="_Restrict" />2: <Juice:Datepicker3: runat="server"4: TargetControlID="_Restrict"5: MinDate="-20"6: MaxDate="+1M +10D" />執行這段代碼，就可以得到：
組件和行為
Juice UI 發佈的時候就已經包括了14個部件或行為。如果你想查看全部控件列表的話，請點擊http://juiceui.com/controls, 並且提供互動例子讓我們更深入瞭解控件。
下面也列出了所有控件，點擊可直接轉到相應文檔：
- Accordion
- Autocomplete
- Button
- Datepicker
- Dialog
- Draggable
- Droppable
- Position
- Progress Bar
- Resizable
- Selectable
- Slider
- Sortable
- Tabs
實戰
添加JuiceUI NuGet package
打開VS2010，創建項目前請確保VS2010已安裝了NuGet插件。創建一個ASP.NET 4 Web Forms項目。右擊項目中的References文件夾，選擇Manage NuGet Packages..., 然後找到 "juiceui"，點擊安裝。
JuiceUI 的名字空間
通過NuGet package添加JuiceUI時，NuGet會自動的把Juice UI的名字空間寫入到你的web.config文件裏, 比如:
1: <configuration>2: <system.web>3: <compilation debug="true" targetFramework="4.0" />4: <pages>5: <controls>6: <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />7: </controls>8: </pages>9: </system.web>10: </configuration>如果確實需要Juice UI名字空間的話，通常我會移除上面這段config，在頁面中使用<@Import Namespace="JuiceUI" />指令來添加名字空間。
使用Juice UI控件
首先，你需要一個<asp:ScriptManager> - 把它添加到一個頁面上或者你site的Master頁面上。
1: <asp:ScriptManager id="_Script" runat="server" />添加完成後，你就可以使用控件了。這些都是擴展控件，所以你需要使用TargetControlID屬性來指出哪個Web窗體控件將擴展Juice UI的行為。這兒有一個精簡了的例子，將DatePicker行為與一個TextBox掛鈎：
1: <asp:TextBox runat="server" ID="DateSample" />2: <Juice:Datepicker runat="server" TargetControlID="DateSample" />另外我把一個可拖拽（Draggable ）的行為指向一個Panel:
1: <asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;">2: Hi. You can drag me around.3: </asp:Panel>4: <Juice:Draggable runat="server" TargetControlID="DragBox" />需要注意的是，這只是非常簡單的例子並且沒有CSS。在Juice UI源碼裏有很多更復雜的Juice UI樣例。
運行這個頁面，我們將會看見我們所期待的：一個擁有日期選擇器的textbox和一個可以拖拽的panel。
下面是這個頁面的源代碼：
1: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"2: CodeBehind="Default.aspx.cs" Inherits="Juice_Sample._Default" %>3: <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">4: </asp:Content>5: <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">6:7: <asp:ScriptManager id="_Script" runat="server" />8:9: <asp:TextBox runat="server" ID="DateSample" />10: <Juice:Datepicker runat="server" TargetControlID="DateSample" />11:12: <asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;">13: Hi. You can drag me around.14: </asp:Panel>15: <Juice:Draggable runat="server" TargetControlID="DragBox" />16:17: </asp:Content>如果你有興趣的話，在瀏覽器中查看網頁的源代碼，你會發現web控件和JuiceUI行為已經整合了，使用的是HTML5的data-屬性:
1: <input name="ctl00$MainContent$DateSample" type="text"2: id="MainContent_DateSample"3: data-ui-widget="datepicker" />4: <div id="MainContent_DragBox"5: data-ui-widget="draggable"6: style="border:1px solid; width:100px;">7: Hi. You can drag me around.8: </div>似乎很熟悉...
確實，Juice UI用起來非常像Ajax Control Toolkit，但它的核心是jQuery UI。從另一方面説，它是為所有jQuery UI裏的部件（widgets）和效果（effects）創建了Web窗體擴展和腳本控制。
更多...
想要尋找更多關於Juice UI的資料？最好的地方是Juice UI site，裏面有提供互動的例子和文檔。
需要源代碼的，可以從GitHub repository下載，裏面包含了一個樣例項目。
最後，特別推薦的是StackOverflow (using the juiceui tag)和ASP.NET jQuery forum，經常逛逛可以獲得不少幫助。
後記
個人覺得，Juice UI要被廣泛接受還需要走很長的一段路，畢竟Ajax control Toolkit在不斷更新，其長期發展方向也是jQuery，所以競爭力很強。不管怎樣，Juice UI為我們提出了一個新的思路去整合現有的前端JS框架。Bonne idée, c'est parti!