Структура проекта ASP.NET Core Blazor Server

В прошлой части мы настроили VS Code для комфортной работы с Blazor, а также создали наше первое приложения типа «Hello, world». Сегодня мы более подробно рассмотрим структуру проекта Blazor Server.

Если вы выполнили в точности все действия из прошлой части, то в VS Code была создана следующая структура папок и файлов:

Рассмотрим из чего состоит наш первый проект Blazor Server.

Структура проекта Blazor Server

Папка Data

Папка Data: содержит класс WeatherForecast и реализацию WeatherForecastService, которые предоставляют пример метеоданных для компонента FetchData приложения.

Сервис WeatherForecastService — это, по сути, «симулятор» сервиса по получению метеоданных, в котором используется LINQ для генерации данных:

namespace BlazorApp.Data;

public class WeatherForecastService
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
    {
        return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        }).ToArray());
    }
}

Папка Pages

Папка Pages: содержит маршрутизируемые компоненты и страницы (.razor), которые входят в приложение Blazor, а также корневую страницу Razor (_Host.cshtml) приложения Blazor Server. Маршрут для каждой страницы указывается с помощью директивы @page. Папка Pages включает в себя следующие файлы:

• • _Host.cshtml: Корневая страница приложения, реализованная как страница Razor.
    • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
    • На странице Host указывается место отрисовки корневого компонента App (App.razor).

Исходный код корневой страницы выглядит следующим образом:

@page "/"
@namespace BlazorApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />

Здесь мы видим разметку Razor, с помощью которой  указан в том числе шаблон нашего приложения (_Layout).  А также видим, что с помощью директивы component указан корневой компонент приложения (App), возвращаемый сервером при запросе страницы приложения.

• • Компонент Counter (Counter.razor) — реализует страницу счетчика.
  • Компонент Error (Error.razor) — отображается, когда в приложении происходит необработанное исключение.
  • Компонент FetchData (FetchData.razor) —  реализует страницу получения данных о метеопараметрах.
  • Компонент Index (Index.razor): реализует страницу Home.

Папка Properties

Эта папка содержит всего один файл — launchSettings.json в котором мы можем задать конфигурацию среды разработки:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:28038",
      "sslPort": 44396
    }
  },
  "profiles": {
    "BlazorApp": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7152;http://localhost:5209",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Например, мы можем указать адрес и порт по которому будет запускаться наше приложение при отладке, или эе указать настройки сервера IIS Express и так далее. С этим файлом мы ещё познакомимся более подробно в следующих частях руководства.

Папка Shared

Папка Shared содержит следующие компоненты и таблицы стилей:

• • Компонент MainLayout (MainLayout.razor) — компонент макета приложения.
  • MainLayout.razor.css — таблица стилей для основного макета приложения.
  • Компонент NavMenu(NavMenu.razor)  — реализует боковую панель навигации и включает в себя компонент NavLink, который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
  • NavMenu.razor.css -таблица стилей для меню навигации приложения.
  • Компонент SurveyPrompt (SurveyPrompt.razor) — компонент опроса Blazor.

Папка wwwroot

wwwroot — это папка корневого каталога документов для приложения, которая содержит общедоступные статические ресурсы. По умолчанию шаблон Blazor Server содержит в этой папке css-фреймворк bootstrap и другие статические файлы приложения, например, наборы иконок, шрифты и т.д.

Файлы в корневой директории

Файл _Imports.razor содержит стандартные директивы Razor, включаемые в компоненты приложения (.razor), например директивы @using для пространств имен. Так, по умолчанию в приложении уже подключены следующие пространства имен:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using BlazorApp
@using BlazorApp.Shared

Последние два пространства имен относятся к нашему приложению.

Файл App.razor — это корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью компонента Router. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

Файл appsettings.json — файлы параметров среды приложения.

ФайлProgram.cs - точка входа в приложение, в которой настраивается узел ASP.NET Core (host). В этом же файле мы можем подключать и настраивать различные сервисы, необходимые для нашего приложения. Например, подключать сервис, позволяющий отправлять http-запросы к сторонним API и так далее.

В .NET 5 и более ранних версиях также присутствовал файл Startup.cs который содержал логику запуска приложения. Однако в .NET 6 вся логика запуска и настройки приложения теперь содержится в Program.cs.

Итого

Сегодня мы рассмотрели из чего состоит шаблон приложения Blazor Server — какие папки и файлы располагаются в корневой директории приложения, за что они отвечают и что содержат. В следующей части мы попробуем создать свой собственный компонент Blazor и использовать его в нашем приложении.