DNN中为DDR菜单项添加动态窗格时服务端控件不渲染的解决方法

核心诉求 #

在DNN开发过程中，需要在DDR菜单模板中新增自定义动态窗格，最终实现效果为：每个菜单项对应一个以自身ID为标识的独立窗格。但目前尝试直接在模板中嵌入ASP服务端控件的实现方式失效，控件无法正常渲染，需要找到可行的落地方案。

已尝试的实现方式与失效原因 #

当前用户对原生DDR菜单模板做了修改，在每个顶级菜单项的结构内直接插入带runat="server"属性的空div作为自定义窗格占位，修改后的模板代码如下：

<ul class="navigation">
    [*>NODE-TOP]
</ul>

    [>NODE-TOP]
        <li class="[?NODE]hasDropdown [/?][?SELECTED]active[/?]">
        [?ENABLED]
            <a href="[=URL]" target="[=TARGET]">
                <span>[=TEXT]</span> [?NODE][/?] 
            </a>
        [?ELSE]
            <a href="#" target="[=TARGET]">
                <span>[=TEXT]</span> [?NODE][/?]
            </a>
        [/?]

 <div class="pane" id="menu[=ID]Pane" runat="server"></div>

        [?NODE]

            <ul class="sub">
                [*>NODE]
            </ul>
        [/?]

        </li>
    [/>]

这种实现失效的核心原因是DDR Menu本身的渲染机制为纯字符串模板替换：它不会像ASP.NET页面解析器那样识别模板中的服务端控件标记（比如runat="server"），所有模板内容都会被当成纯字符串拼接后直接输出到前端响应流中，嵌入的服务端控件标记不会被纳入页面的服务端控件树，自然无法正常执行服务端渲染逻辑。

可行的变通实现方案 #

根据窗格的交互复杂度和服务端逻辑需求，可以选择以下适配方案：

• 轻量场景：通过原生DOM占位+前端动态渲染实现
  直接移除模板中div标签的runat="server"属性，利用DDR模板自带的节点字段替换能力，输出绑定当前菜单项ID的前端占位元素，对应代码调整为：
  <div class="menu-dynamic-pane" data-menu-node-id="[=ID]"></div>
  这种方式可以100%保证DOM结构正常输出，后续可通过前端JS读取占位元素上的菜单项ID属性，拉取对应自定义内容并渲染到占位容器内。如果窗格内容是静态资源、接口返回的动态数据，这种方案开发成本最低，没有额外的渲染管线开销。
• 复杂服务端逻辑场景：自定义DDR控件渲染管线动态注入服务端控件
  如果窗格需要承载完整的服务端逻辑（比如接入DNN权限校验、动态加载DNN模块内容），就不能依赖纯文本模板做服务端控件挂载，需要自定义继承DDR Menu控件，重写其节点渲染逻辑：
  1. 在遍历渲染每个菜单节点的过程中，手动实例化需要的Pane服务端控件，将当前菜单项的ID赋值给控件的唯一标识，把控件添加到页面的服务端控件树中
  2. 保证这些动态注入的Pane控件可以走完整的ASP.NET页面生命周期，在对应生命周期阶段填充自定义内容、校验访问权限
     这种方式完全绕开了纯字符串模板的解析限制，服务端控件的运行状态和原生放置的Pane没有差异。
• 高稳定性场景：依托页面原生Pane布局做映射匹配
  如果不需要窗格严格跟随菜单的DOM节点位置渲染，可以直接在页面的皮肤布局文件中定义所有需要的服务端Pane，每个Pane的ID和对应菜单项ID建立固定映射关系；DDR菜单模板仅负责输出绑定对应菜单项ID的触发标记，前端通过CSS定位、JS交互将Pane的内容挂载到菜单触发区域即可。这种方案中的Pane是正规的服务端控件，可以直接在DNN管理界面中往Pane里配置模块，不需要额外开发自定义渲染逻辑，稳定性最高。

内容的提问来源于stack exchange，提问作者mheonyae