时间戳

首页 > 解决方案 > Asp .Net Core 如何重用Html

html - Asp .Net Core 如何重用Html

问题描述

我的应用程序中的每一页都涉及到这个基本布局

<div class="card custom-card">

<div class="card-header">
    <div class="card-title">
        // icon
        // title
    </div>
</div>

<div class="card-body">

// content here

</div>

<div class="card-footer">

</div>

我使用了局部视图和视图组件，但我不知道如何在这种情况下实际使用它们，因为我需要在它们内部编写很多不同的东西，这意味着创建不同的局部视图或组件，这让我对此感到困惑。

标签： htmlasp.net-core

解决方案

您可以使用嵌套布局。在 Shared 文件夹中创建一个新的 razor 视图，将其命名_LayoutCard.cshtml（或您喜欢的任何名称）及其内容（例如）：

@{
    ViewData["Title"] = "_LayoutCard";
    Layout = "_Layout";
}

<h1>Layout Card</h1>
<div class="container">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    @RenderSection("CardHeader", false)
                </div>
                <div class="card-body">
                    @RenderBody()
                </div>
                <div class="card-footer">
                    @RenderSection("CardFooter", false)
                </div>
            </div>
        </div>
    </div>
</div>

上例中的注释：

  • 确保将 设置Layout = "_Layout";为重用主布局中的标题和脚本
  • 调用@RenderBody()是使此布局成为嵌套布局的原因
  • "CardHeader"是否存在以便使用此布局的"CardFooter"视图可以指定卡页眉或页脚上的内容。当然，它是可选的，如果您需要超过 1 个嵌套级别，您可以更改名称甚至删除它（下面的更多信息）

至于使用上述布局的视图示例：

@{
    ViewData["Title"] = "Home Page";
    Layout = "_LayoutCard";
}


@section CardHeader { 
    This is card header
}

this is card body

@section CardFooter { 
    This is card footer
}

虽然RenderBody可以再次调用以创建更多嵌套级别，RenderSection但如果在子布局中未调用则需要忽略。我不确定为什么会这样，如果多级嵌套布局包含RenderSection（例如使用IgnoreSection或条件渲染），我建议限制为 1 个嵌套布局，或者RenderSection在需要超过 1 个级别时避免使用。希望能帮助到你。

推荐阅读