如何在ASP.NET Framework视图中动态渲染子内容并复用包装器？

根据你提供的代码（包含@Model和@RenderChildren()，推测是ASP.NET Razor技术栈），完全可以实现该包装器的复用，无需重复复制粘贴结构，以下是几种可行方案：

1. 使用Razor布局页（Layout Page） #

这是最适配你现有代码的方案，适合作为整个页面的通用框架：

• 新建布局文件（如~/Views/Shared/_ContentWrapperLayout.cshtml），写入通用包装结构：

<div class="content-wrapper">
  <div class="header-styles">@Model.HeaderText</div>
    @RenderBody() <!-- 替代@RenderChildren()，用于渲染子页面的核心内容 -->
  <div class="footer-styles">@Model.FooterText</div>
</div>

• 在需要使用该包装的子页面顶部指定布局，并传递参数：

@{
    Layout = "~/Views/Shared/_ContentWrapperLayout.cshtml";
    // 若使用强类型模型，可直接通过@Model传递；若用弱类型则用ViewBag
    ViewBag.HeaderText = "用户列表页头部";
    ViewBag.FooterText = "2024年版权所有";
}

<!-- 以下是子页面的专属内容，会自动嵌入到包装器的@RenderBody()位置 -->
<div class="user-list">
  <ul>
    <li>用户A</li>
    <li>用户B</li>
  </ul>
</div>

2. 使用Razor局部视图+模板委托（局部复用场景） #

如果只是需要在页面的局部区域复用该包装，而非整个页面布局：

• 新建局部视图（如~/Views/Shared/_ContentWrapperPartial.cshtml）：

@model WrapperViewModel

<div class="content-wrapper">
  <div class="header-styles">@Model.HeaderText</div>
    @Model.ChildContent() <!-- 渲染传入的子内容模板 -->
  <div class="footer-styles">@Model.FooterText</div>
</div>

• 定义对应的视图模型类：

public class WrapperViewModel
{
    public string HeaderText { get; set; }
    public string FooterText { get; set; }
    public Func<IHtmlContent> ChildContent { get; set; }
}

• 在父页面中调用局部视图并传递参数：

@{
    var wrapperModel = new WrapperViewModel
    {
        HeaderText = "统计模块头部",
        FooterText = "数据更新于今日",
        ChildContent = @<div>
                          <p>今日访问量：1234</p>
                          <p>用户新增：56</p>
                       </div>
    };
}

@Html.Partial("_ContentWrapperPartial", wrapperModel)

3. 纯前端场景复用方案（无后端Razor） #

如果是纯前端环境，可使用HTML模板标签或JavaScript实现：

• 使用HTML <template> 标签：

<!-- 定义复用模板 -->
<template id="contentWrapperTpl">
  <div class="content-wrapper">
    <div class="header-styles"></div>
    <div class="child-content-container"></div>
    <div class="footer-styles"></div>
  </div>
</template>

<!-- 调用模板生成内容 -->
<script>
function createContentWrapper(headerText, footerText, childHtml) {
    const template = document.getElementById('contentWrapperTpl');
    const wrapper = template.content.cloneNode(true);
    
    wrapper.querySelector('.header-styles').textContent = headerText;
    wrapper.querySelector('.footer-styles').textContent = footerText;
    wrapper.querySelector('.child-content-container').innerHTML = childHtml;
    
    return wrapper;
}

// 示例：生成一个带商品列表的包装器
const productWrapper = createContentWrapper(
    "热门商品",
    "点击查看更多",
    '<ul><li>商品1</li><li>商品2</li></ul>'
);
document.getElementById('main-container').appendChild(productWrapper);
</script>

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