如何在 Monorail 和 NVelocity 中创建嵌套 ViewComponent？

Question

我被要求更新我们维护的网站上的菜单。该网站使用 Castle Windors Monorail 和 NVelocity 作为模板。该菜单当前使用 ViewComponent 的自定义子类来呈现，该子类呈现 li 元素。目前只有一级（水平），所以目前的机制很好。

我被要求向一些现有菜单添加下拉菜单。因为这是我第一次看到单轨铁路和NVelocity，所以我有点迷失。

目前存在的内容：

<ul>
    #component(MenuComponent with "title=Home" "hover=autoselect" "link=/")
    #component(MenuComponent with "title=Videos" "hover=autoselect")
    #component(MenuComponent with "title=VPS" "hover=autoselect" "link=/vps")                                   
    #component(MenuComponent with "title=Add-Ons" "hover=autoselect" "link=/addons")                    
    #component(MenuComponent with "title=Hosting" "hover=autoselect" "link=/hosting")                           
    #component(MenuComponent with "title=Support" "hover=autoselect" "link=/support")                           
    #component(MenuComponent with "title=News" "hover=autoselect" "link=/news")
    #component(MenuComponent with "title=Contact Us" "hover=autoselect" "link=/contact-us") 
</ul>

是否可能有嵌套的 MenuComponents（或新的 SubMenuComponent），例如：

<ul>
    #component(MenuComponent with "title=Home" "hover=autoselect" "link=/")
    #component(MenuComponent with "title=Videos" "hover=autoselect")
    #blockcomponent(MenuComponent with "title=VPS" "hover=autoselect" "link=/vps")                                  
        #component(SubMenuComponent with "title="Plans" "hover=autoselect" "link=/vps/plans")
        #component(SubMenuComponent with "title="Operating Systems" "hover=autoselect" "link=/vps/os")
        #component(SubMenuComponent with "title="Supported Applications" "hover=autoselect" "link=/vps/apps")
    #end
    #component(MenuComponent with "title=Add-Ons" "hover=autoselect" "link=/addons")                    
    #component(MenuComponent with "title=Hosting" "hover=autoselect" "link=/hosting")                           
    #component(MenuComponent with "title=Support" "hover=autoselect" "link=/support")                           
    #component(MenuComponent with "title=News" "hover=autoselect" "link=/news")
    #component(MenuComponent with "title=Contact Us" "hover=autoselect" "link=/contact-us") 
</ul>

我需要在 MenuComponent 上重写的 Render 方法内绘制子菜单（ul 和 li 元素），因此使用嵌套的 ViewComponent 衍生物可能不起作用。如果可能的话，我希望有一种方法保留创建菜单的基本声明性方法。

编辑：我可以使用 Context.RenderBody() 渲染嵌套的 ViewComponent 衍生物，但它们是在父级之前渲染的。我猜子菜单的渲染需要以某种方式连接到与父菜单相同的输出？

Answer 1

我原来的渲染方法看起来像

public override void Render()
{
    var buffer = new StringBuilder();           
    var extraClass = _hoverState == MenuHoverState.Selected ? "class=\"Selected\"" : "";

    // Menu Item Start
    buffer.Append("<li><a href=\"" + ComponentParams["link"] + "\"" + extraClass + ">");

    // Menu Text
    buffer.Append(ComponentParams["title"]);

    // Menu Item End
    buffer.Append("</a></li>");                     
    RenderText(buffer.ToString());
}

我需要挂接到 Context.Writer：

public override void Render()
{
    var buffer = new StringBuilder();           
    var extraClass = _hoverState == MenuHoverState.Selected ? "class=\"Selected\"" : "";

    // Menu Item Start
    buffer.Append("<li><a href=\"" + ComponentParams["link"] + "\"" + extraClass + ">");

    // Menu Text
    buffer.Append(ComponentParams["title"]);

    // Menu Item End
    buffer.Append("</a><ul class=\"subMenu\" style=\"display:none;\">");                        
    Context.Writer(buffer.ToString());
    Context.RenderBody(Context.Writer);
    Contet.Writer("</ul></li>");    
}

Answer 2

我可以使用 Context.RenderBody() 渲染嵌套的 ViewComponent 派生

我可以使用 Context.RenderBody()在 Render 方法重写中

RenderView("header");
RenderBody();
RenderView("footer");

，您可以使用类似的东西，也许使用 RenderSection 可能会很有用，能够覆盖您使用组件的模板中的某些部分，

if(HasSection("header")){
    RenderSection("header");
} else {
    RenderView("header");
}

这也是可能的迭代和更改上下文：

for(var item in this.SubItems){
    PropertyBag["item"] = item;
    if(HasSection("item")){
        RenderSection("item");
    } else {
        RenderView("item");
    }
}

所有这些解决方案都很奇特，但我通常更喜欢有一个视图组件，它采用特定目的视图模型（例如 HierarchicalMenuViewModel）作为参数，并保持模板逻辑简单，更易于使用，并且可以进行输出自定义

至少对于简单的控件（有时只需要一个宏或部分取决于视图引擎）。

最后，在进行需要更多自定义的控制时，上面说明的视图组件概念仍然很好。建议注意记录渲染逻辑或保持简单（渲染方法中 <= 10 行）