Custom module with possibility to add modules into module to create an expander module in DNN 9.2

问题

​I'm using DNN 9.2 and searching for a possibility to create an own module that will work like the Atlassian Confluence's Expander Macro where I could add additional content. In my case I want to add other modules, which will be visible if the parent is expanded and hidden if the parent is collapsed. I thought about to use a Pane control in my module to place several other modules into it. It is an approach that imitates the Evoq's Grid module functionality, but with the additional possibility to collapse and expand its content, because of no such (expander) module already exists.

I already tried to achieve it by adding a Pane control from DotNetNuke.UI.Skins namespace in Page_Load method and calling pane.ProcessPane(). As I can see in database a added module by moving it into our custom (expander) module is related to our pane which is located in our module. Actually I have some problems by loading and rendering the page, because the module is located under and not in our custom module like it is referenced in database.

Following is my actual code:

In *.ascx file:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="View.ascx.cs" Inherits="Prototype.View" %>

<div ID="TestModuleDiv" runat="server"></div>

In *.ascx.cs (code behind file):

using System;
using System.Web.UI.HtmlControls;
using DotNetNuke.Entities.Modules;
using DotNetNuke.UI.Skins;

protected void Page_Load(object sender, EventArgs e)
{
    var paneName = "MyTestPane" + ModuleContext.ModuleId;

    var paneControl = new HtmlGenericControl("div");
    paneControl.ID = paneName;

    TestModuleDiv.Controls.Add(paneControl);

    var paneId = paneControl.ClientID.Replace("dnn_", "");

    PortalSettings.ActiveTab.Panes.Add(paneId);

    var pane = new Pane(paneId, paneControl);
    pane.ProcessPane();
}

Does somebody have some more information how I could achieve my wanted behavior?

The aim is to create an expander module that could contain several other modules, but we are not sure how we could build it in a best practice way.

Edit
Sorry, I missed the fact that I'm searching for an approach with minimized JS magic. Therefore I think it has to happen in code behind.
Furthermore the page must remember which "expander" module was collapsed and which expanded.

回答1:

You might want to take a look at this open source project:

   https://github.com/redtempo/dnnstuff.aggregator

The work already has been done.

回答2:

Well we have reached an approach that will work like we have expected.

The whole adding/moving modules into the expander module works out of the box and automatically with DNN's own functionality side. We have nothing to implement additionally.

We created an own Panel control that inherits from HtmlContainerControl and has some logic to use the parent skin as container and furthermore the parent module to get the active Tab (page) from it. This will all happen in method OnInit. Also in OnInit method the OnInitComplete methods is registered. In this method we are moving all (previously added) modules into the pane. Otherwise the expander module added modules will not be placed inside the expander, but under it. After that we have to register our own pane control in active tab and have to call finally ProcessPane on the pane.

I hope it will help everybody who needs something similar. I'm very sorry for posting no code, but is an implementation for a customer which I'm not allowed to provide to third persons.

来源：https://stackoverflow.com/questions/51408712/custom-module-with-possibility-to-add-modules-into-module-to-create-an-expander