YUI 控件（雅虎用户界面）的 ASP.NET MVC HtmlHelper 扩展？

Question

有没有人写过 HTMLHelper 类 的 MVC 有助于 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&#176;</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，则您在 中也需要此代码;

<!-- 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>

目前，这会生成 顶部导航样式导航栏 - 但它可以很容易地修改。

我希望其他人也能对其他一些控件做同样的事情。

似乎是开源项目的良好候选者 - 但我没有时间开始。

欢迎实施建议！

Answer 1

Simon，

我不确定这对于 MVC 问题是否有帮助，但是有一个很好的开源项目，旨在简化 .NET 中 YUI 的使用：

http://www.yuiasp.net/

菜单是它们包含的控件之一。

至少，如果您的工作为现有项目添加了新的维度，那么这可能是您可以回馈的项目。

-埃里克

Answer 2

昨晚我对此做了一些思考，想知道这里是否有更多机会使用 YUI 或您想要的任何其他 Javascript/HTML 小部件来制作通用 HTMLHelpers。

例如，如果有一个用于 IMenu 的接口，一个用于 ITextBox、ICheckBox、IRichTextEditor、ICarousel 等的接口，就像您的 MenuItem 类一样，那么您可以为每个接口提供一个 YUI 实现，一个用于 JQuery，一个用于MooTools 或仅用于直接 HTML/CSS 的工具。

引发此问题的部分原因是以下文章的概括：http://designingwebinterfaces.com/essential_controls丰富的 Web 应用程序的 Web UI 控件。

这些界面将包含乍一看显而易见的所有基本内容：Id、Name、Value、List、Style、OnChange、OnClick 等，以及不太明显的内容，如 ValidationRegex、HelpText 等

。将模型对象或模型属性转换为 ITextBox 的层，而不用担心接口的哪个实现将实际处理它。 如果出现更好/更快/更酷的新实现，您还可以轻松切换到新的实现。

如果您将 ValidationRegex 之类的东西提供给准系统 HTML 实现，并且它没有办法处理它，您就必须处理应该发生的情况，但我认为这是一条值得考虑的路径。 我还认为通过继承或重新实现它来将其与现有的 HTMLHelper 命名空间分开实现可能更有意义，但在提出解决方案的这种早期想法阶段我经常犯错。

YUIAsp.NET 的东西很有趣，但它比 ASP.NET MVC 甚至 Fubu MVC 最近的发展方向更面向 WebForms 和用户控件。

我对这个想法做了一些修改，并对它的可能性非常感兴趣。