Wijmo Open for Juice UI Beta

Recently we announced that appendTo released a Beta version of Juice UI. Juice UI brings the power of jQuery UI to ASP.NET as easy-to-use Controls. If you used the Ajax Control Toolkit then you are going to love Juice UI. Now we are announcing our contribution to the ASP.NET community called: Wijmo Open for Juice UI. We are shipping our 18 open source widgets from Wijmo as a free set of ASP.NET Extender Controls! The Juice UI project has been a collaborative effort between appendTo, Microsoft and ComponentOne. We are happy to contribute Wijmo Open for Juice UI to the project.

Get Started with Wijmo Open for Juice UI

The first thing you need to do is install Wijmo Open for Juice UI to your project from NuGet. You can search for it in the NuGet Package Manager or use the following command in the Package Manager Console to install it:

PM> Install-Package WijmoOpenJuiceUI

These are Extender Controls just like what the Ajax Control Toolkit offered, so you hook them up to other controls to extend their functionality. Lets use FormDecorator to fancy up a data entry WebForm. Let's use these basic form controls as an example: A TextBox, Multiline TextBox, DropDown, CheckBox, RadioButtons and Button

<asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>  
<asp:TextBox runat="server" ID="TextBox2" TextMode="MultiLine"></asp:TextBox>  
<asp:DropDownList runat="server" ID="DropDownList1">  
   <asp:ListItem Text="A"></asp:ListItem>  
   <asp:ListItem Text="B"></asp:ListItem>  
   <asp:ListItem Text="C"></asp:ListItem>  
</asp:DropDownList>  
 <asp:CheckBox runat="server" ID="CheckBox1" Text="checkbox1" />  
<asp:RadioButton ID="RadioButton1" GroupName="radiobutton1" runat="server" Text="radio1" />  
<asp:RadioButton ID="RadioButton2" GroupName="radiobutton1" runat="server" Text="radio2" />  
<asp:Button runat="server" ID="Button1" Text="Submit1" />  

These are pretty bland when rendered normally. So lets apply Wijmo Open Extender to them. When doing so we will be turning them into Wijmo Widgets and they will be themed with the current jQuery UI theme in the page. Before adding the Extenders we need a ScriptManager control on the page like so.

<asp:ScriptManager ID="ScriptManager1" runat="server">  
</asp:ScriptManager>   

Note: the important code here is to match the TargetControlID property to the original Control we want to Extend!

<wijmo:WijTextbox ID="WijTextBox1" runat="server" TargetControlID="TextBox1"></wijmo:WijTextbox>  
<wijmo:WijTextbox ID="WijTextbox2" runat="server" TargetControlID="TextBox2"></wijmo:WijTextbox>  
<wijmo:WijDropdown ID="WijDropdown1" runat="server" TargetControlID="DropDownList1" />  
<wijmo:WijCheckbox ID="WijCheckbox1" runat="server" TargetControlID="CheckBox1" />  
<wijmo:WijRadio ID="WijRadio1" runat="server" TargetControlID="RadioButton1" />  
<wijmo:WijRadio ID="WijRadio2" runat="server" TargetControlID="RadioButton2" />  
<wijmo:WijButton runat="server" ID="WijButton1" TargetControlID="Button1">  
</wijmo:WijButton>  

Wow, what a difference the Wijmo Extenders made. Now my plain old form elements have been turned into beautiful Wijmo Widgets. You can view the source of each sample for help with code. If you want the project to run for yourself, you can download it here. For help using the Controls please use our online documentation or submit a question in our community forum. Well, waiting for? Stop reading and start coding. I hope you enjoy our contribution to the ASP.NET community!