Juice UI: ASP.Net Web Forms With jQuery UI

Introduction

Juice UI is an open-source ASP.NET Web Forms components for jQuery Widgets. We use all jQuery UI components like ASPX Server-side controls. Here we learn and use the Juice UI control in Aspx Web Forms. The Juice UI Control is also available for ASP.NET MVC Control as a helper method.

Description

The Juice UI requires .NET 4.0. Please ensure that the proper version of .NET is installed before attempting to integrate Juice UI Controls. The Juice UI can be installed using the NuGet Package Manager as in the following:

PM> Install-Package JuiceUI

Note: When using the Juice UI Control the TargetControl attribute is required to be set with the ASPX Control ID. Before using the Juice UI Control add a ScriptManager to the page.

All jQuery Widget and Juice UI Controls have the same attribue.

1. Date Picker Control
   

   <asp:TextBox runat="server" ID="txtDate" />
   
   <Juice:datepicker
               runat="server"
               targetcontrolid="txtDate"
               mindate="-20"
               maxdate="+1M +10D" />

   Note: the Juice UI DatePicker control supports all the attributes supported by jQuery UI DatePicker.
   
   
2. Auto Complete Control
   

   <asp:TextBox runat="server" ID="txtLanguage" placeholder="Type Word" />
   
   <asp:TextBox runat="server" ID="txtLanguagerFromWebAPI" placeholder="Type Word" />
   
   <Juice:Autocomplete ID="_Autocomplete" runat="server" TargetControlID="txtLanguage" Source="ActionScript, AppleScript, Asp, BASIC, C, C++, Clojure, COBOL, ColdFusion, Erlang, Fortran, Groovy, Haskell, Java, JavaScript, Lisp, Perl, PHP, Python, Ruby, Scala, Scheme" />
   
   <juice:Autocomplete ID="_Autocomplete1" runat="server" TargetControlID="txtLanguagerFromWebAPI" SourceUrl="/API/Service/GetLanguage" />

   Note: implementing an autocomplete control requires the source to bind the data as autocompleted. Here in this demo I have used both a static as well as a dynamic Ajax or Web API based source to bind with Juice UI AutoComplete.
   
3. Dialog Control
   

   <div id="_Default" title="Basic dialog" runat="server"></div>
   
   <juice:Dialog ID="_Dialog" Height="300px" TargetControlID="_Default" runat="server" Buttons="{ Ok: function() { $(this).dialog('close');}}" AutoOpen="false" />
   
   <a href="#" id="lnkDialog">Click to Open Dialog</a>

   Note: opening the dialog requires adding a JavaScript function to trigger the dialog to open.
   

   <script type="text/javascript">
           // Click Link to open Dialog
           $("#lnkDialog").click(function (e) {
               e.preventDefault();
               // Open the dialog
               $("#_Default").dialog("open");
           });
   </script>

4. Slider Control
   

   <p>Single Slider</p>
   
   <div><asp:Literal runat="server" ID="currentValue" /></div>
   
        <Juice:Slider ID="slider2" runat="server" Max="150" />
   
         <p>Two Value Slider</p>
   
         <div><span id="slider2Value"></span></div>
   
         <juice:Slider ID="_Range" runat="server" Range="true" Min="0" Max="500" Values="75, 300" />

5. Menu Control
   

   <Juice:Menu ID="_Menu" runat="server">
            <juice:MenuItem ID="Menuitem1" runat="server">
                <Content><a href="#">Item 1</a></Content>
            </Juice:MenuItem>
            <juice:MenuItem ID="Menuitem2" runat="server">
                <Content><a href="#">Item 2</a></Content>
            </Juice:MenuItem>
            <juice:MenuItem ID="Menuitem3" runat="server">
                <Content><a href="#">Item 3</a></Content>
                <Items>
                    <Juice:MenuItem ID="Menuitem4" runat="server">
                        <Content><a href="#">Item 3-1</a></Content>
                    </juice:MenuItem>
                    <Juice:MenuItem ID="Menuitem5" runat="server">
                        <Content><a href="#">Item 3-2</a></Content>
                    </juice:MenuItem>
                    <Juice:MenuItem ID="Menuitem6" runat="server">
                        <Content><a href="#">Item 3-3</a></Content>
                    </juice:MenuItem>
                    <Juice:MenuItem ID="Menuitem7" runat="server">
                        <Content><a href="#">Item 3-4</a></Content>
                    </juice:MenuItem>
                    <Juice:MenuItem ID="Menuitem8" runat="server">
                        <Content><a href="#">Item 3-5</a></Content>
                    </juice:MenuItem>
                </Items>
            </Juice:MenuItem>
            <juice:MenuItem ID="Menuitem9" runat="server">
                <Content><a href="#">Item 4</a></Content>
            </Juice:MenuItem>
            <juice:MenuItem ID="Menuitem10" runat="server">
                <Content><a href="#">Item 5</a></Content>
            </Juice:MenuItem>
   
   </juice:Menu>

   Note: Here in this menu control I have provided a nested menu example also.
   
6. Tab Control
   

   <Juice:Tabs ID="_Tabs" runat="server" PanelTemplate="<div>!</div>" AutoPostBack="true">
        <juice:TabPage Title="Tab 1" ID="Tab1">
            <TabContent>
                <p>This should display on tab 1.</p>
                <asp:TextBox ID="_Textbox" runat="server" />
            </TabContent>
        </Juice:TabPage>
   
        <juice:TabPage Title="Tab 2" ID="Tab2">
            <TabContent>
                <p>This should display on tab 2.</p>
            </TabContent>
        </Juice:TabPage>
   </juice:Tabs>

7. Accordion Control
   

   <Juice:Accordion ID="_Accordion" runat="server">
       <juice:AccordionPanel Title="Panel 1">
           <PanelContent>
               Panel 1's content.
               <asp:TextBox runat="server" ID="dob1" ClientIDMode="Static" />
               <Juice:Datepicker ID="Datepicker1" runat="server" TargetControlID="dob1" />
            </PanelContent>
        </juice:AccordionPanel>
   
        <Juice:AccordionPanel Title="Panel 2">
             <PanelContent>
                Panel 2's content.
             </PanelContent>
        </juice:AccordionPanel>
   </Juice:Accordion>

Reference

1. Github: appendto/juiceui

Note: I have use the demo from the Juice UI Open-source GitHub Repository as above.

Conclusion

In this article we learned a new way to use jQuery UI Control using Server-side Control Juice UI Library. We have seen the most used Juice UI controls like Date Picker, Accordion, Auto complete and so on. I hope you enjoy this article.