Кто-нибудь написал классы HTMLHelper для MVC, которые помогают с библиотекой пользовательского интерфейса Yahoo ?
Например, я написал вспомогательный метод для преобразования «модели меню» в HTML-разметку, необходимую для поддержки управления меню Yahoo . Шаблон 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>
В настоящее время генерируется разметка для верхней навигационной панели в стиле nav , но ее можно легко изменить.
Я надеялся, что кто-то другой делал то же самое для некоторых других элементов управления.
Похоже, хороший кандидат на проект с открытым исходным кодом - но у меня нет времени, чтобы начать это.
Рекомендации по внедрению приветствуются!