Asp .Net Core Как повторно использовать Html

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

Вы можете использовать вложенный макет.Создайте новое представление бритвы в папке Shared, назвав его _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 уровня.Надеюсь, это поможет.