Question

我的应用程序中的每个页面都涉及此基本布局

<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>

我曾经使用过部分视图和视图组件，但是我不知道如何在这种情况下实际使用它们，因为我需要在其中编写很多不同的东西，这意味着创建不同的部分或组件，这使我感到困惑关于它。

Answer 1

您可以使用嵌套布局。在“共享”文件夹中创建一个新的剃刀视图，将其命名为_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"在那里，因此使用此布局的视图可以指定内容在卡页眉或页脚上。当然，它是可选的，如果您需要多个嵌套级别（以下更多信息），则可以更改名称，甚至删除名称

以使用上述布局的视图为例：

@{
    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个嵌套布局或者如果需要超过1个级别，请避免使用RenderSection。希望对您有所帮助。

ASP .NET Core如何重用HTML

1 个答案: