将一个 Web 部件嵌套在另一个 Web 部件中
Nesting a webpart within another webpart
有谁知道 Kentico CMS 中是否有办法将一个 Web 部件嵌套在另一个 Web 部件中?我做了一些研究,但没有看到关于该主题的很多结果,所以简短的回答似乎是否定的,但也许有解决方法?在我正在进行的项目中,要求内容作者能够在页面上放置一个汉堡菜单,然后通过拖放在该汉堡菜单中添加其他内容。如何在 Kentico 内实现这一目标?
谢谢。
Web 部件通常由用户控件组成,而不是嵌套的 Web 部件。以 CMSRepeater 为例。它设置由 Kentico 创建的用户控件的属性。
对于您所解释的内容,您似乎想要一个包含小部件区域的自定义 Web 部件。这些小部件区域将允许您将内容拖放到适当的位置(我真的不知道是什么内容,因为您不能在 Kentico 中拖放内容,只有 areas/widgets)。
对于导航,您可能希望考虑基于内容树创建它,但在您的情况下,汉堡包菜单可能不适用于导航。
解决方案是在 Web 部件中添加一个小部件区域。
回到这个post。虽然向页面添加 <cms:CMSEditableRegion />
标签确实允许我在 Webpart 区域中嵌套 Widget,但用户似乎没有必要在设计选项卡和页面选项卡之间切换以实现添加嵌套组件,更不用说必须将每个 Web 部件注册为小部件;完全没有必要。我注意到 Kentico 的内置布局 webpart 允许嵌套 webpart,所以我查看了代码并最终弄清楚如何在另一个 webpart 中实现嵌套 webpart!
确保您的 Web 部件的代码隐藏继承自 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;\"> </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();
}
有谁知道 Kentico CMS 中是否有办法将一个 Web 部件嵌套在另一个 Web 部件中?我做了一些研究,但没有看到关于该主题的很多结果,所以简短的回答似乎是否定的,但也许有解决方法?在我正在进行的项目中,要求内容作者能够在页面上放置一个汉堡菜单,然后通过拖放在该汉堡菜单中添加其他内容。如何在 Kentico 内实现这一目标?
谢谢。
Web 部件通常由用户控件组成,而不是嵌套的 Web 部件。以 CMSRepeater 为例。它设置由 Kentico 创建的用户控件的属性。
对于您所解释的内容,您似乎想要一个包含小部件区域的自定义 Web 部件。这些小部件区域将允许您将内容拖放到适当的位置(我真的不知道是什么内容,因为您不能在 Kentico 中拖放内容,只有 areas/widgets)。
对于导航,您可能希望考虑基于内容树创建它,但在您的情况下,汉堡包菜单可能不适用于导航。
解决方案是在 Web 部件中添加一个小部件区域。
回到这个post。虽然向页面添加 <cms:CMSEditableRegion />
标签确实允许我在 Webpart 区域中嵌套 Widget,但用户似乎没有必要在设计选项卡和页面选项卡之间切换以实现添加嵌套组件,更不用说必须将每个 Web 部件注册为小部件;完全没有必要。我注意到 Kentico 的内置布局 webpart 允许嵌套 webpart,所以我查看了代码并最终弄清楚如何在另一个 webpart 中实现嵌套 webpart!
确保您的 Web 部件的代码隐藏继承自 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;\"> </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();
}