Yahoo の User Interface Libraryを支援する MVC 用のHTMLHelper クラスを作成した人はいますか?
たとえば、「メニュー モデル」をYahoo Menu Controlのサポートに必要な HTML マークアップに変換するヘルパー メソッドを作成しました。ここでは MVC パターンがうまく機能します。なぜなら、別のメニュー実装に切り替えることを選択した場合、モデルに触れずに新しいヘルパーを作成するだけでよいからです。
このコードは私にとっては機能しますが、完全にはテストされていないため、自由に使用してください。
まず、メニュー モデル自体の単純なデータ構造が必要です。通常の MVC 規則を使用して、これをページ モデルに追加します。たとえば、ビューから を介してメニュー項目のリストにアクセスしますViewData.Model.MainMenu.MenuOptions。
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<MenuItem> MenuItems { get; set; }
}
延長方法。ビューにアクセスできる名前空間に入れます。
public static class YUIExtensions
{
public static string RenderMenu(this HtmlHelper html, string id, List<MenuItem> menuItems)
{
// <div id="mnuTopNav" class="yuimenubar yuimenubarnav">
// <div class="bd">
// <ul class="first-of-type">
// <li class="yuimenubaritem first-of-type"><a class="yuimenubaritemlabel" href="#store">Store</a></li>
// <li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="#products">Products</a>
// <div id="communication" class="yuimenu">
// <div class="bd">
// <ul>
// <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.com">360°</a></li>
// <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mobile.yahoo.com">Mobile</a></li>
// <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr Photo Sharing</a></li>
// </ul>
// </div>
// </div>
// </li>
// </ul>
// </div>
//</div>
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<MenuItem> 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 && menuItem.MenuItems.Count > 0)
{
menuItem_li.Controls.Add(CreateControl(html, id + "_" + (menuId++), level + 1, ref menuId, menuItem.MenuItems));
}
i++;
}
return menu;
}
}
ビューでメニューを生成したい場所にこのコードを貼り付けます（マスターページにこれがあります）：
<%= Html.RenderMenu("mnuTopNav", ViewData.Model.MainMenu.MenuOptions) %>
あなたが怠け者だったり、YUI について知らない場合は、これも必要になるでしょう。<HEAD>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/menu/assets/skins/sam/menu.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/container/container_core-min.js&2.6.0/build/menu/menu-min.js"></script>
これは現在、トップ ナビゲーション スタイルのナビゲーション バーのマークアップを生成しますが、簡単に変更できます。
私は他の誰かが他のコントロールのいくつかについて同じことをしていることを望んでいました.
オープン ソース プロジェクトの有力候補のようですが、それを開始する時間がありません。
実装アドバイス大歓迎！