كيفية إنشاء مشهد متداخل في monorail و nvelocity؟

Question

لقد طُلب مني تحديث القائمة على موقع ويب نحافظ عليه. يستخدم موقع الويب Castle Windors Monorail و Nvelocity كقالب. يتم تقديم القائمة حاليًا باستخدام فئات فرعية مخصصة من ViewComponent ، والتي تجعل عناصر LI. في الوقت الحالي ، لا يوجد سوى مستوى واحد (أفقي) ، وبالتالي فإن الآلية الحالية جيدة.

لقد طُلب مني إضافة القوائم المنسدلة إلى بعض القوائم الحالية. نظرًا لأن هذه هي المرة الأولى التي رأيت فيها monorail و 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>

هل من الممكن أن يكون لديك مكونات متداخلة (أو مكون جديد) مثل:

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

أحتاج إلى رسم القائمة الفرعية (عناصر UL و LI) داخل طريقة العرض المتجاوز على MenuComponent ، لذلك قد لا يعمل استخدام مشتقات 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());
}

كنت بحاجة إلى ربط السياق. 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 المتداخلة

في طريقة العرض الخاصة بك ، يمكنك استخدام شيء مثل

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

وربما يمكن أن يكون استخدام الإحضار مفيدًا لتكون قادرًا على تجاوز بعض الأجزاء من القالب الذي تستخدمه المكون

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

كل هذه الحلول خيالية ، لكني أفضل أن يكون لديك مكون ViewComponent الذي يأخذ غرضًا محددًا ViewModel (على سبيل المثال hierarchicalmenuviewmodel) كمعلمة والحفاظ على منطق templating بسيطًا ، يكون أكثر سهولة في الاستخدام ، وتخصيص الإخراج يحدث

على الأقل لعناصر التحكم البسيطة (والتي من شأنها في وقت ما فقط يستحق فقط ماكرو أو جزئي اعتمادًا على ViewEngine).

في النهاية ، لا تزال مفاهيم ViewComponent الموضحة أعلاه لطيفة عند القيام بالسيطرة التي تحتاج إلى مزيد من التخصيص. النصيحة هي الاهتمام بتوثيق منطق التقديم أو الحفاظ عليه بسيطًا (<= 10 خطوط في طريقة العرض)