Skip to main content Skip to footer

Juicing Up An ASP.NET WebForms Site with Wijmo Menu Extender

jUICE UI? Wijmo? What is going on here? Years ago, when Microsoft released ASP.NET Ajax, they created one of the most popular and enduring Codeplex projects, the ASP.NET Ajax Control Toolkit. More recently, after Microsoft deprecated ASP.NET Ajax in favor of jQuery, a new toolkit was needed. One part of that toolkit came in February, when .appendTo() release jUICE UI. jUICE is both a framework as well as a set of controls. With jUICE, .appendTo() turned a number of jQuery UI widgets into server side control extenders. Earlier this week, we were pleased to announce that we've used the same jUICE framework and released Wijmo Open for Juice UI. (In case you haven't used them before, control extenders are a type of ASP.NET WebForms control that add functionality to HTML elements or other server controls. Control extenders are added as inline code, and handle all the script references, element creation and so on for you. They greatly simplify the creation of rich client UI while still developing in a server side model.) The jUICE-ification of Wijmo Open brings 18 extenders to the ecosystem (the full list is http://www.componentone.com/SuperProducts/WijmoOpenJuiceUI/). And since they're built using the jUICE framework, there are no additional libraries to install if you have or want to add the jIUCE UI extenders--everything works together out of the box. There are a few Wijmo extenders which overlap with jUICE UI, and those are where we've taken the jQuery UI widget and added some features to it. Ready to get started? Let's go! Before we get started I'm often asked what makes Wijmo different from "the other guys". When you create a new ASP.NET project, jQuery and jQuery UI are part of that project. Wijmo is jQuery UI widgets--other than referencing the Wijmo libraries (a task handled for you by the control extenders), there is nothing else to add. The "other guys" ask you to install yet another JavaScript framework. Wijmo works with ThemeRoller, and uses jQuery for data access. If you know jQuery, you know Wijmo. Getting Started Wijmo for jUICE UI can be added to any new or existing WebForms application as long as it uses .NET 4.0 or better. In either case, you use NuGet to install the extenders and create the proper references:

PM> Install-Package WijmoOpenJuiceUI

At this version of jUICE, a Script Manager control is still required. If your site uses a master page, add the script manager to the master page; otherwise, add it to the page which will contain the control extenders. This is all the setup that's required. Menu Extender Let's take a look at perhaps my favorite and arguably one of the most useful and powerful extenders. In the past, there were a number of ways to turn unordered lists into dropdown and flyout menus, mostly done with CSS. The advantage to using unordered lists is they are great for SEO and the accessibility of a site, but the differing support for CSS in different browsers meant a lot of workarounds needed to be employed in the CSS. Tables were also another common way to generate menus, but nested tables manifested display issues in every browser. In a jQuery based menu, CSS is still used for the formatting, but greater conditional (and browser specific) logic and added functionality can be employed in the JavaScript, plus the ThemeRoller support. For this sample, we'll use a static unordered list, but the list could be generated dynamically based on a user's role membership. Start by creating a new ASP.NET project, and install Wijmo for jUICE UI as above. Open the master page, and reference the menu extender just below the page declaration:


<%@ Register Assembly="C1.Web.Wijmo.Open.Juice.4" Namespace="C1.Web.Wijmo.Juice.WijMenu" TagPrefix="Wijmo" %>  

We'll use the menu list from the icon menu sample. From the demo page, click the View Source button, copy Panel1, including the opening and closing panel tags, and replace the asp:Menu control (including the opening and closing menu tags) in Site.master. The code will look as below:


<div id="_mcePaste"><div class="clear hideSkiplink">  
<asp:Panel ID="Panel1" runat="server">  
<ul id="menu1">  
<li><a><span class="ui-icon ui-icon-arrowthick-1-w wijmo-wijmenu-icon-left"></span><span  
class="wijmo-wijmenu-text">Menu1</span></a></li>  
<li><a><span class="ui-icon ui-icon-arrowrefresh-1-s wijmo-wijmenu-icon-left"></span>  
<span class="wijmo-wijmenu-text">Menu2</span></a>  
<ul>  
<li><a>submenu1</a></li>  
<li><a>submenu2</a>  
<ul>  
<li><a>submenu21</a></li>  
<li><a>submenu22</a></li>  
<li><a>submenu23</a></li>  
<li><a>submenu24</a></li>  
<li><a>submenu25</a></li>  
</ul>  
</li>  
<li><a>submenu3</a></li>  
<li><a>submenu4</a>  
<ul>  
<li><a>submenu41</a></li>  
<li><a>submenu42</a></li>  
<li><a>submenu43</a></li>  
<li><a>submenu44</a></li>  
<li><a>submenu45</a></li>  
<li><a>submenu46</a></li>  
<li><a>submenu47</a></li>  
<li><a>submenu48</a></li>  
</ul>  
</li>  
<li><a>submenu5</a></li>  
<li><a>submenu6</a></li>  
<li><a>submenu7</a></li>  
<li><a>submenu8</a></li>  
</ul>  
</li>  
<li><a><span class="ui-icon ui-icon-comment wijmo-wijmenu-icon-left"></span><span  
class="wijmo-wijmenu-text">Menu3</span></a></li>  
<li><a><span class="ui-icon ui-icon-person wijmo-wijmenu-icon-left"></span><span  
class="wijmo-wijmenu-text">Menu4</span></a></li>  
<li><a><span class="ui-icon ui-icon-trash wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">  
Menu5</span></a></li>  
<li><a><span class="ui-icon ui-icon-bookmark wijmo-wijmenu-icon-left"></span><span  
class="wijmo-wijmenu-text">Menu6</span></a>  
<ul>  
<li><a>submenu61</a></li>  
<li><a>submenu62</a></li>  
<li><a>submenu63</a></li>  
<li><a>submenu64</a></li>  
<li><a>submenu65</a></li>  
<li><a>submenu66</a></li>  
<li><a>submenu67</a></li>  
<li><a>submenu68</a></li>  
<li><a>submenu69</a></li>  
</ul>  
</li>  
<li><a><span class="ui-icon ui-icon-clock wijmo-wijmenu-icon-left"></span><span class="wijmo-wijmenu-text">  
Menu7</span></a></li>  
<li><a><span class="ui-icon ui-icon-minusthick wijmo-wijmenu-icon-left"></span><span  
class="wijmo-wijmenu-text">Menu8</span></a></li>  
</ul>  
</asp:Panel>  
</div></div>  
<div></div>  

If we run our application now, we'll see only a long list of links, seen below. This is what search engine bots, assisted reading devices or people with JavaScript turned off will interact with. It's informative, but not the best UI. Just below the panel closing tag, add the following line of code to create the extender:


<Wijmo:WijMenu ID="WijMenu1" runat="server" TargetControlID="Panel1" />  

When we run the application now, we see a nicely formatted menu. With that one line of code, we've added an extremely powerful and compatible menu to our site. This menu is built with the latest web technologies, on top of the default ASP.NET stack. License - not usually the cool part, but this time it is Wijmo Open is MIT licensed, so use them in good health--if you like them, tell the world how awesome they are. If you work at a company which can't use open source software, we also have a commercial license. You can read all four sentences of the license at http://wijmo.com/widgets/license/wijmo-mit-license/. This is so cool it feels like the glaciers are coming back! Something like that, yes. There is a lot to like here--so easy to use, so much functionality added, the latest in web standards, supported by ComponentOne, the "leader and clear champion" of the control vendors.

MESCIUS inc.

comments powered by Disqus