将 Web 部件嵌套在另一个 Web 部件中答案

【问题标题】：Nesting a webpart within another webpart将 Web 部件嵌套在另一个 Web 部件中
【发布时间】：2018-12-28 03:15:30
【问题描述】：

有谁知道在 Kentico CMS 中是否有办法将一个 Web 部件嵌套在另一个 Web 部件中？我做了一些研究，我没有看到很多关于这个主题的结果，所以看起来简短的答案是否定的，但也许有一个解决方法？在我正在处理的项目中，要求内容作者能够在页面上放置一个汉堡菜单，然后通过拖放在该汉堡菜单中添加其他内容。如何在 Kentico 中实现这一点？

谢谢。

【问题讨论】：

标签： c# asp.net nested web-parts kentico

【解决方案1】：

通常，Web 部件由用户控件组成，而不是嵌套的 Web 部件。以 CMSRepeater 为例。它设置由 Kentico 创建的用户控件的属性。

对于您所解释的内容，您似乎想要一个包含小部件区域的自定义 Web 部件。这些小部件区域将允许您将内容拖放到位（我不知道什么内容，因为您不能在 Kentico 中拖放内容，只能拖放区域/小部件）。

对于导航，您可能希望根据内容树来创建它，但在您的情况下，汉堡菜单可能不适用于导航。

【讨论】：

【解决方案2】：

解决方案是在 Web 部件中添加一个小部件区域。

【讨论】：

【解决方案3】：

回到这篇文章。尽管向页面添加<cms:CMSEditableRegion /> 标记确实允许我在Webpart 区域内嵌套一个小部件，但用户似乎没有必要在设计选项卡和页面选项卡之间切换以实现添加嵌套组件，更不用说必须将每个 webpart 注册为小部件；完全没有必要。我注意到 Kentico 的内置 Layout webpart 允许嵌套 webpart，所以我查看了代码，终于能够弄清楚如何在另一个 webpart 中实现嵌套 webpart！

确保您的 webpart 的代码隐藏继承自 CMSAbstractLayoutWebPart

将以下方法添加到您的代码隐藏中：

protected override void PrepareLayout()
{
    StartLayout();

    Append("<div");
    Append(" style=\"width: ", "100%", "\"");

    if (IsDesign)
    {
        Append(" id=\"", ShortClientID, "_env\">");

        Append("<table class=\"LayoutTable\" cellspacing=\"0\" style=\"width: 100%;\">");

        if (ViewModeIsDesign())
        {
            Append("<tr><td class=\"LayoutHeader\" colspan=\"2\">");

            // Add header container
            AddHeaderContainer();

            Append("</td></tr>");
        }

        Append("<tr><td id=\"", ShortClientID, "_info\" style=\"width: 100%;\">");
    }
    else
    {
        Append(">");
    }

    // Add the tabs
    var acc = new CMSAccordion();
    acc.ID = ID + "acc";
    AddControl(acc);

    if (IsDesign)
    {
        Append("</td>");

        if (AllowDesignMode)
        {
            // Width resizer
            Append("<td class=\"HorizontalResizer\" onmousedown=\"" + GetHorizontalResizerScript("env", "Width", false, "info") + " return false;\">&nbsp;</td>");
        }

        Append("</tr>");
    }

    // Pane headers
    string[] headers = TextHelper.EnsureLineEndings("HEADER", "\n").Split('\n');

    // Create new pane
    var pane = new CMSAccordionPane();
    pane.ID = ID + "pane";

    pane.Header = new TextTransformationTemplate(string.Empty);
    acc.Panes.Add(pane);

    pane.WebPartZone = AddZone(ID + "-ContentArea", ID + "-ContentArea", pane.ContentContainer);

    acc.SelectedIndex = 1;

    if (IsDesign)
    {
        if (AllowDesignMode)
        {
            Append("<tr><td class=\"LayoutFooter cms-bootstrap\" colspan=\"2\"><div class=\"LayoutFooterContent\">");

            // Pane actions
            Append("<div class=\"LayoutLeftActions\">");
            Append("</div></div></td></tr>");
        }

        Append("</table>");
    }
    Append("</div>");

    FinishLayout();
}

【讨论】：