Juice UI: integrates jQuery UI's open-source ASP. NET Web control

Preface 

The original Article of this article is from Jon Galloway. If you want to see the original article, click the link. The first time I came into contact with this Juice UI, I saw an email shared by my colleagues. It was just a rough look, but it was a good idea to integrate jQuery UI into ASP. NET Web controls. I accidentally saw this article on the Internet today, And I translated it to share it with you. The following is a translation:

 

At the MVP summit this morning, Scott Hunter just released a new open-source project named Juice UI from the appendTo website. Juice UI is a collection of Web forms controls and integrates jQuery UI. You can add the JuiceUI NuGet package to your application and use it immediately. At the same time, the source code is provided for download (go nuts with the source). His copyright protocol is based on MIT and GPL.

 

 

Juice UI, what can I do?

JQuery UI is a UI library built on jQuery. It provides many and powerful components for common scenarios, such as the date selection period, dialog box and tabs, and some top js developers (some of the sharpest Javascript developers in the field) participating in development provides a solid foundation. Although you can always use libraries that use jQuery and jQuery UI, the brand-new Juice UI control makes the work easier.

For example:

   1:  <asp:TextBox runat="server" ID="_Restrict" />

   2:  <Juice:Datepicker

   3:       runat="server"

   4:       TargetControlID="_Restrict"

   5:       MinDate="-20"

   6:       MaxDate="+1M +10D" /> 

Run this code to get the following information:

 

Components and actions

When Juice UI is released, 14 parts or actions are included. If you want to view the list of all controls, click the http://juiceui.com/controls and provide interactive examples for us to gain a deeper understanding of controls.

All the controls are listed below. Click to go to the relevant document:

• Accordion
• Autocomplete
• Button
• Datepicker
• Dialog
• Draggable
• Droppable
• Position
• Progress Bar
• Resizable
• Selectable
• Slider
• Sortable
• Tabs

 

Practice

• Add JuiceUI NuGet package

Open VS2010. Before creating a project, make sure that the NuGet plug-in is installed in VS2010. Create an ASP. NET 4 Web Forms project. Right-click the References folder in the project, select Manage NuGet Packages..., find "juiceui", and click Install.

 

• JuiceUI namespace

When JuiceUI is added through NuGet package, NuGet automatically writes the Juice UI namespace to your web. config file, for example:

   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> 

If you need Juice UI Namespace, I usually remove the above config and use the <@ Import Namespace = "JuiceUI"/> command on the page to add the Namespace.

 

Use Juice UI control

First, you need a <asp: ScriptManager>-add it to a page or your site's Master page.

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

After adding the widget, you can use the widget. These are all extension controls, so you need to use the TargetControlID attribute to indicate which Web form control will expand the Juice UI behavior. Here is a simplified example to hook the DatePicker behavior with a TextBox:

   1:  <asp:TextBox runat="server" ID="DateSample" /> 

   2:  <Juice:Datepicker runat="server" TargetControlID="DateSample" /> 

In addition, I direct a Draggable behavior to a 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" /> 

Note that this is a very simple example without CSS. There are many more complex Juice UI examples in the Juice UI source code.

Run this page and we will see what we expect: A textbox with a date selector and a drag-and-drop panel.

The source code of this page is as follows:

   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> 

If you are interested, check the source code of the web page in the browser. You will find that the web Control and JuiceUI behavior have been integrated, using the data-attribute of HTML5:

   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> 

Seems familiar...

Indeed, Juice UI is very similar to Ajax Control Toolkit, but its core is jQuery UI. On the other hand, it creates Web form extensions and script control for all components (widgets) and effects (effects) in jQuery UI.

More...

Want to find more information about Juice UI? The best part is Juice UI site, which provides interactive examples and documents.

You can download the source code from GitHub repository, which contains a sample project.

Finally, StackOverflow (using the juiceui tag) and ASP. NET jQuery forum are recommended. You can get a lot of help when you visit them.

 

Postscript

I personally think it takes a long time for Juice UI to be widely accepted. After all, Ajax control Toolkit is constantly updated, and its long-term development direction is jQuery, so it is highly competitive. In any case, Juice UI provides us with a new idea to integrate the existing front-end JS framework.Bonne id é e, C' est parti!