分享之Juice UI: 整合了jQuery UI的开源ASP.NET Web控件

前言 

这篇文章的原文来自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控件可以让这些工作更简单。

例如：

<asp:TextBox runat="server" ID="_Restrict" />
<Juice:Datepicker
     runat="server"
     TargetControlID="_Restrict"
     MinDate="-20"
     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文件里, 比如:

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

如果确实需要Juice UI名字空间的话，通常我会移除上面这段config，在页面中使用<@Import Namespace="JuiceUI" />指令来添加名字空间。

 

使用Juice UI控件

首先，你需要一个<asp:ScriptManager> - 把它添加到一个页面上或者你site的Master页面上。

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

添加完成后，你就可以使用控件了。这些都是扩展控件，所以你需要使用TargetControlID属性来指出哪个Web窗体控件将扩展Juice UI的行为。这儿有一个精简了的例子，将DatePicker行为与一个TextBox挂钩：

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

另外我把一个可拖拽（Draggable ）的行为指向一个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" />

需要注意的是，这只是非常简单的例子并且没有CSS。在Juice UI源码里有很多更复杂的Juice UI样例。

运行这个页面，我们将会看见我们所期待的：一个拥有日期选择器的textbox和一个可以拖拽的panel。

下面是这个页面的源代码：

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

如果你有兴趣的话，在浏览器中查看网页的源代码，你会发现web控件和JuiceUI行为已经整合了，使用的是HTML5的data-属性:

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

似乎很熟悉...

确实，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!