Натягиваем дизайн на сайт .NET Core с помощью файла _Layout.cshtml и папки wwwroot

В этой статье мы поговорим о том, как создать красивый и функциональный веб-сайт на платформе .NET Core, используя шаблонную систему Razor Pages. В частности, мы рассмотрим, как натянуть дизайн на сайт с помощью файла _Layout.cshtml и папки wwwroot. Я буду показывать некоторый код своего сайта в качестве примера.

Файл _Layout.cshtml является ключевым элементом в структуре проекта .NET Core. Он используется для определения общей структуры страниц сайта, включая хедер (header), футер (footer) и другие общие элементы. Папка wwwroot содержит статические файлы, такие как CSS, JavaScript и изображения, которые используются для стилизации и функционализации сайта.

Давайте начнем с создания базового файла _Layout.cshtml. Для этого откройте Visual Studio Code или другую IDE, которую вы предпочитаете использовать для разработки на .NET Core. Создайте новый проект .NET Core с использованием Razor Pages. После того как проект будет создан, перейдите в папку Views и создайте там новую папку Shared. Внутри этой папки создайте файл с именем _Layout.cshtml.

Теперь давайте добавим базовую структуру HTML в файл _Layout.cshtml. Вместо азовой структуры Вы можете использовать свой HTML шаблон, но элементы Razor обязательно должны присутствовать, они добавляются вручную. Ваш код может выглядеть примерно так:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
</head>
<body>
    <div class="container">
        <header>
            <!-- Здесь будет ваш хедер -->
        </header>
        <main role="main">
            @RenderBody()
        </main>
        <footer>
            <!-- Здесь будет ваш футер -->
        </footer>
    </div>
    <script src="~/js/site.js" asp-append-version="true"></script>
</body>
</html>

В этом коде мы определили базовую структуру HTML страницы, включая тег "" для метаданных и ссылок на CSS и JavaScript файлы. Мы также использовали директиву "@RenderBody()", которая будет заменена содержимым каждой конкретной страницы.

В описание и заголовок также надо добавить директивы:
<title>@ViewData["Title"] - Ваш сайт</title>
<meta name="description" content="@ViewData["Description"]" />

Эти директивы получают содержание от следующего блока кода на странице Razor Pages.
@{
    ViewData["Title"] = "Название страницы";
    ViewData["Description"] = "Метаописание страницы, выводимое в поиск.";
}

Этот код является частью Razor View в ASP.NET MVC. Он устанавливает значения для провайдера ViewData, которые могут быть использованы в представлении.

Вот как все выглядит на боевом сайте.


«ViewData[»Title"]" устанавливает заголовок для текущей страницы. Это значение обычно используется в теге в верхней части HTML-документа.

«ViewData[»Description"]" устанавливает метаописание для текущей страницы. Метаописание — это текст, который описывает содержание страницы и отображается в результатах поиска.

Обратите внимание, что использование ViewData для передачи данных между контроллером и представлением считается устаревшей практикой в ASP.NET Core, где предпочтительнее использовать модель (Model) или ViewComponent.

Вот как все выглядит на боевом сайте.


Теперь давайте добавим CSS и JavaScript файлы в папку wwwroot. Для начала создадим папку «css» внутри папки «wwwroot». Затем создадим файл «site.css» и добавим туда базовый CSS для стилизации нашего сайта. Например, вы можете добавить следующие стили для контейнера ".container":
.container {
    width: 960px;
    margin: 0 auto;
}

Повторите этот процесс для создания файла «site.js» в папке «js» внутри «wwwroot». Этот файл будет содержать JavaScript код, который будет использоваться на вашем сайте.

Чтобы использовать эти файлы в вашем проекте, вам нужно будет добавить ссылки на них в файле _Layout.cshtml. Как видно из приведенного выше кода, мы используем директиву "@addTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.LinkTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers" для добавления версии к ссылкам на CSS и JavaScript файлы. Это помогает избежать проблем с кешированием браузера при обновлении файлов.

Таким образом, мы создали базовую структуру для нашего сайта на .NET Core с использованием файла _Layout.cshtml и папки wwwroot. Теперь вы можете добавлять свои собственные стили и скрипты, а также разрабатывать страницы, которые будут использовать эту общую структуру. Удачной разработки!
Поделиться:

Похожие публикации

Тут ничего нет

Нет комментариев