Databases
StackOverflow2013
Postsdbo
POASP.NET MVC HtmlHelper extensions for YUI controls (Yahoo User Interfaces)?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POASP.NET MVC HtmlHelper extensions for YUI controls (Yahoo User Interfaces)?
    text
    copied!<p><strong>Has anyone written any <a href="http://blog.wekeroad.com/blog/aspnet-mvc-preview-using-the-mvc-ui-helpers/" rel="nofollow noreferrer">HTMLHelper classes</a> for MVC that help with <a href="http://developer.yahoo.com/yui/" rel="nofollow noreferrer">Yahoo's User Interface Library</a>?</strong></p> <p>For instance I have written a helper method to convert a 'menu model' into the HTML markup needed to support the <a href="http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup_source.html" rel="nofollow noreferrer">Yahoo Menu Control</a>. The MVC pattern works well here because obviously if I chose to switch to a different menu implementation I can just write a new helper and not touch the model.</p> <p>This code works for me but isn't fully tested and you're welcome to use it.</p> <p>First we need a simple data structure for the menu model itself. You would add this to your page model with the normal MVC conventions. For instance I access a list of menu items from my view via <code>ViewData.Model.MainMenu.MenuOptions</code>.</p> <pre><code>public class MenuItem { public string Text { get; set; } public string Description { get; set; } public string RouteURL { get; set; } public bool SeparatorBefore { get; set; } public List&lt;MenuItem&gt; MenuItems { get; set; } } </code></pre> <p>Extension method. Put in a namespace that is accessible to your view.</p> <pre><code>public static class YUIExtensions { public static string RenderMenu(this HtmlHelper html, string id, List&lt;MenuItem&gt; menuItems) { // &lt;div id="mnuTopNav" class="yuimenubar yuimenubarnav"&gt; // &lt;div class="bd"&gt; // &lt;ul class="first-of-type"&gt; // &lt;li class="yuimenubaritem first-of-type"&gt;&lt;a class="yuimenubaritemlabel" href="#store"&gt;Store&lt;/a&gt;&lt;/li&gt; // &lt;li class="yuimenubaritem"&gt;&lt;a class="yuimenubaritemlabel" href="#products"&gt;Products&lt;/a&gt; // &lt;div id="communication" class="yuimenu"&gt; // &lt;div class="bd"&gt; // &lt;ul&gt; // &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="http://360.yahoo.com"&gt;360&amp;#176;&lt;/a&gt;&lt;/li&gt; // &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="http://mobile.yahoo.com"&gt;Mobile&lt;/a&gt;&lt;/li&gt; // &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="http://www.flickr.com"&gt;Flickr Photo Sharing&lt;/a&gt;&lt;/li&gt; // &lt;/ul&gt; // &lt;/div&gt; // &lt;/div&gt; // &lt;/li&gt; // &lt;/ul&gt; // &lt;/div&gt; //&lt;/div&gt; int menuId = 0; HtmlGenericControl menuControl = CreateControl(html, id, 0, ref menuId, menuItems); // render to string StringWriter sw = new StringWriter(); HtmlTextWriter tw = new HtmlTextWriter(sw); tw.Indent = 1; menuControl.RenderControl(tw); return sw.ToString(); } private static HtmlGenericControl CreateControl(HtmlHelper html, string id, int level, ref int menuId, List&lt;MenuItem&gt; currentItems) { var menu = new HtmlGenericControl("div"); menu.Attributes["class"] = (level == 0) ? "yuimenubar yuimenubarnav" : "yuimenu"; menu.Attributes["id"] = id; var div_bd = new HtmlGenericControl("div"); menu.Controls.Add(div_bd); div_bd.Attributes["class"] = "bd"; HtmlGenericControl ul = null; int i = 0; foreach (var menuItem in currentItems) { if (ul == null || menuItem.SeparatorBefore) { ul = new HtmlGenericControl("ul"); div_bd.Controls.Add(ul); if (i == 0) { ul.Attributes["class"] = "first-of-type"; } } var menuItem_li = new HtmlGenericControl("li"); menuItem_li.Attributes["class"] = (level == 0) ? "yuimenubaritem" : "yuimenuitem"; if (i == 0) { menuItem_li.Attributes["class"] += " first-of-type"; } ul.Controls.Add(menuItem_li); var href = new HtmlGenericControl("a"); href.Attributes["class"] = (level == 0) ? "yuimenubaritemlabel" : "yuimenuitemlabel"; href.Attributes["href"] = menuItem.RouteURL; href.InnerHtml = menuItem.Text; menuItem_li.Controls.Add(href); if (menuItem.MenuItems != null &amp;&amp; menuItem.MenuItems.Count &gt; 0) { menuItem_li.Controls.Add(CreateControl(html, id + "_" + (menuId++), level + 1, ref menuId, menuItem.MenuItems)); } i++; } return menu; } } </code></pre> <p>Stick this code where you want to generate the menu in your view (I have this in a master page):</p> <pre><code>&lt;%= Html.RenderMenu("mnuTopNav", ViewData.Model.MainMenu.MenuOptions) %&gt; </code></pre> <p>If you're lazy, or don't know about YUI you'll need this too in your <code>&lt;HEAD&gt;</code></p> <pre><code>&lt;!-- Combo-handled YUI CSS files: --&gt; &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/menu/assets/skins/sam/menu.css"&gt; &lt;!-- Combo-handled YUI JS files: --&gt; &lt;script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&amp;2.6.0/build/container/container_core-min.js&amp;2.6.0/build/menu/menu-min.js"&gt;&lt;/script&gt; </code></pre> <p>This currently generates markup for <a href="http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup_source.html" rel="nofollow noreferrer">top nav style navigation bar</a> - but it could be easily modified.</p> <p>I was hoping somebody else was doing the same for some of the other controls.</p> <p>Seems like a good candidate for an open source project - but I dont have time to start that.</p> <p><em>Implementation advice welcomed!</em></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload