ASP.NET MVC的HtmlHelper扩展YUI控件（雅虎用户界面）？ [英] ASP.NET MVC HtmlHelper extensions for YUI controls (Yahoo User Interfaces)?

问题描述

有没有人写任何的的HtmlHelper类了解MVC与雅虎的用户界面库帮助？

Has anyone written any HTMLHelper classes for MVC that help with Yahoo's User Interface Library?

比如说我写了一个辅助方法来转换一个菜单模式为支持的雅虎菜单控制。 MVC模式以及在这里工作，因为很明显，如果我选择切换到不同的菜单实现，我可以只写一个新的帮手，而不是触摸模式。

For instance I have written a helper method to convert a 'menu model' into the HTML markup needed to support the Yahoo Menu Control. 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.

这code对我的作品，但并不全面测试和欢迎您使用它。

This code works for me but isn't fully tested and you're welcome to use it.

首先，我们需要为菜单模型本身的简单数据结构。你想补充一点与正常的MVC公约的页面模型。比如我访问的从我的观点菜单项列表通过 ViewData.Model.MainMenu.MenuOptions 。

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 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; }
}

扩展方法。放在一个命名空间就是你的视图访问。

Extension method. Put in a namespace that is accessible to your view.

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;
        }
    }

坚持要生成您的视图菜单此code（我有这样的母版页）：

Stick this code where you want to generate the menu in your view (I have this in a master page):

<%= Html.RenderMenu("mnuTopNav", ViewData.Model.MainMenu.MenuOptions) %>

如果你懒，或者不知道YUI你需要这也是在你的＆LT; HEAD＆GT;

If you're lazy, or don't know about YUI you'll need this too in your <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>

这目​​前生成顶部导航风格的导航栏标记 - 但它可以很容易地修改。

This currently generates markup for top nav style navigation bar - but it could be easily modified.

我希望其他人在做同样的一些其他控件的。

I was hoping somebody else was doing the same for some of the other controls.

似乎是一个很好的候选人的开源项目 - 但我没有时间来启动

Seems like a good candidate for an open source project - but I dont have time to start that.

的实施意见欢迎！的

推荐答案

昨天晚上我做了这个一些思考，我想知道，如果有更多的机会在这里使用YUI或任何你想要的其他JavaScript / HTML小部件，使通用HTMLHelpers 。

Last night I did some thinking about this and am wondering if there's even more opportunity here to make general purpose HTMLHelpers using YUI or whatever other Javascript/HTML widgets you want.

有关例如，如果有是IMenu和ITextBox，ICheckBox，IRichTextEditor，ICarousel等很像类的菜单项的接口之一，那么你可以有各自的接口的YUI的实现，人们的jQuery ，一个用于MooTools的还是一个刚刚直HTML / CSS。

For instance, if there was an interface for IMenu and one for ITextBox, ICheckBox, IRichTextEditor, ICarousel, etc. much like your class for a MenuItem, then you could have a YUI implementation of each of those interfaces, one for JQuery, one for MooTools or one for just straight HTML/CSS.

什么引发了这部分是泛化，像这样的文章： http://designingwebinterfaces.com/essential_controls 正在采取的UI控件的网页丰富的Web应用程序上。

Part of what sparked this is the generalization that articles like this: http://designingwebinterfaces.com/essential_controls are taking to UI controls on the web for rich web apps.

这些接口将包含所有的基本的东西，是很明显乍一看：ID，名称，价值，列表，风格，的OnChange，的OnClick等，以及不太明显的东西一样ValidationRegex，帮助文件等

Those interfaces would contain all of the basic stuff that is obvious at first glance: Id, Name, Value, List, Style, OnChange, OnClick, etc. as well as less obvious stuff like ValidationRegex, HelpText, etc.

这会让你有一个模型对象或模型属性转换成ITextBox，而不是担心该接口的实现之一实际上是它处理了一层。你也可以轻松地切换到一个新的实现如果一个人走过来，这是更好的/快/凉爽。

That would let you have a layer that converts a model object or model property into an ITextBox and not worry about which one of the implementations of the interface will actually be handling it. You could also easily switch to a new implementation if one came along that was better/faster/cooler.

您不得不处理，如果你给像ValidationRegex到准系统HTML实现，它已经没有办法对付它应该发生什么，但我认为这是值得思考的路径。我也认为这可能会更有意义通过继承或只是重新实现它来实现这从现有的HtmlHelper命名空间分开的，但我经常出错在这种想出一个解决方案的早期阶段的想法的。

You'd have to deal with what should happen if you give something like ValidationRegex to a barebones HTML implementation and it has no way to deal with it, but I think it's a path worth thinking about. I also think it might make more sense to implement this as separate from the existing HTMLHelper namespace by inheriting it or just reimplementing it, but I am often wrong at this kind of early idea stage of coming up with a solution.

该YUIAsp.NET东西很有趣，但更面向WebForms和用户控件比方向的ASP.NET MVC甚至moreso与福布MVC最近去了。

The YUIAsp.NET stuff is interesting, but is more oriented to WebForms and user controls than the direction that ASP.NET MVC and even moreso with Fubu MVC recently are going.

我修修补补这个想法一点点，真的很的可能性很感兴趣。

I tinkered with this idea a little bit and am really intrigued with the possibilities.

这篇关于ASP.NET MVC的HtmlHelper扩展YUI控件（雅虎用户界面）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！