В этой серии статей я буду постепенно разрабатывать приложение Blazor WebAssembly под названием «Open Ecology». Это приложение будет предоставлять нам информацию из открытых источников о загрязнении окружающей среды в тех или иных районах нашей необъятной Родины. Весь процесс разработки я буду описывать здесь от «А» до «Я». Для работы над проектом нам потребуются все полученные ранее знания как по языку C# в общем, так и по работе с Blazor в частности. Разработка будет вестись в Visual Studio 2022 с использованием .NET 6.0
Создаем проект
Запускаем Visual Studio 2022 и выбираем пункт «Create a new project» («Создать новый проект»)
Выбираем проект «Blazor WebAssembly App»
Задаем название проекта и его расположение на жестком диске:
В дополнительной информации о проекте отметим следующие пункты:
В дальнейшем, если нам потребуется включить авторизацию пользователей, мы это сделаем, а пока нам будет достаточно выбранных настроек проекта. Жмем «Create» и получаем новый шаблонный проект Blazor WebAssembly. Про то, что входит в состав проекта, можно прочитать здесь.
Меняем главный макет приложения
В большинстве случаев, когда мы слышим слова «Экология», «окружающая среда» и прочие, то сразу представляется, что-то зеленоё 🙂 Стандартный макет Blazor хоть и хорош, но к теме экологии он мало имеет отношения:
Для начала попробуем изменить внешний вид бокового меню. Blazor поддерживает раздельное указание CSS для различных частей приложения. Например, для компонента главного меню (NavMenu.blazor) файл CSS называется NavMenu.blazor.css и его можно увидеть в списке файлов проекта:
Аналогичный файл CSS мы можем найти и для компонента главного макета приложения MainLayout.razor. Посмотрим, что из себя представляет главный макет приложения с точки зрения его визуальной части:
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
Как можно видеть, компонент NavMenu выводится внутри <div> у которого установлен класс sidebar. В этом элементе css и применяется градиентная заливка сайдбара нашего приложения. Открываем файл MainLayout.razor.css и находим в нем необходимый нам элемент:
.sidebar {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
Попробуем поменять цвета следующим образом:
.sidebar {
background-image: linear-gradient(180deg, rgb(5, 149, 39) 0%, #006400 70%);
}
Теперь запустим приложение и убедимся. что цветовая палитра нашего приложения теперь более соответствует теме «Экология»
Далее, поменяем верхнее меню, а именно ссылку «About». По умолчанию эта ссылка ведет нас на сайт Microsoft. Создадим новую страницу, которая будет открываться при переходе по ссылке «About».
Делаем страницу с описанием проекта
Так как страница с описанием проекта будет доступна из любой части приложения, то разместим её в папке «Shared». Жмем на папке правой кнопкой мыши и выбираем «Добавить —> Компонент Razor»
Назовем наш компонент «About.razor»
Пишем следующий код компонента:
@page "/about"
<h3>О проекте</h3>
<p>Проект "Open ecology" использует открытые официальные данные о воздействии на окружающую среду промышленности</p>
<p>Для разработки проекта используются:</p>
<ul>
<li>NET 6.0</li>
<li>Фремворк Blazor</li>
<li>Фремворк Bootstrap</li>
</ul>
@code {
}
Теперь можно запустить приложение и перейти по адресу http://localhost:[port]/about и посмотреть на результат:
Теперь вернемся в главный макет приложения (MainLayout.razor) и изменим код ссылки «About»:
@inherits LayoutComponentBase
<div class="page">
<--Код сокращен-->
<main>
<div class="top-row px-4">
<a href="/about">О проекте</a>
</div>
<--Код сокращен-->
</main>
</div>
Теперь наша ссылка будет выглядеть следующим образом:
а клик по ссылке будет открывать нашу страничку «About».
Итого
Сейчас мы подготовили шаблон приложения Blazor WebAssembly для дальнейшей работы: настроили стиль сайдбара и добавили страницу описания проекта. В следующей части мы напишем свой сервис по загрузке данных из JSON и отображении полученных данных на отдельной странице приложения.