JUICE UI - ASP.NET Web Forms with jQuery UI

Introduction

JUICE UI is open source ASP.NET Web Forms components for jQuery Widgets. We use all jQuery UI components like ASPX Server side control. Here we learn and use JUICE UI control in Aspx Web Form. JUICE UI Control also available for ASP.NET MVC Control also as helper method.

Description

Juice UI requires .NET 4.0. Please ensure the proper version of .NET is installed before attempting to integrate Juice UI Controls. Juice UI can be installed through the NuGet Package Manager:

PM> Install-Package Juice UI

Note: While use JUICE UI Control TargetControl attribute is required to set with ASPX Control ID. Before Use JUICE UI Control Add ScriptManager in Page.

All jQuery Widget and JUICE UI Control have same attribute

Date Picker Control

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

Juice UI Date Picker control support all attribute which is supported by JQuery UI Date Picker

Autocomplete 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" />

To implement auto complete control with JUICE UI Auto Complete, it requires source to bind data (Array data or key value pair) as auto complete. In this demo I have use both static as well as dynamic Ajax or Web API based source to bind with JUICE UI Autocomplete.

Dialog Control

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

To open dialog it requires adding JavaScript function to trigger 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>

Slider Control

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

Slider Control work same as jQuery UI Slider and all property also supported in JUICE UI Slider Control

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>

In this menu control I have provided nested menu example also

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>

Accordion Control

<juice:Accordion ID="_Accordion" runat="server">
    <juice:AccordionPanel Title="Panel 1">
        <PanelContent> First Panel 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> Second Panel content. </PanelContent>
    </juice:AccordionPanel>
</juice:Accordion>

This control create Accordion like jQuery UI

Reference

1.    https://github.com/appendto/juiceui
Note: I have use demo from JUICE UI Open Source GitHub Repository as above.

Conclusion

In this article we learned new way to use jQuery UI Control using Server Side Control JUICE UI Library. We have seen Most used JUICE UI control like Date Picker, Accordion, Auto complete etc. Hope you enjoy this article.