Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен

код метода, как показано ниже:

public IViewComponentResult Invoke()

{

  var makes = _makeRepo.GetAll().ToList();

  if (!makes.Any())

  {

    return new ContentViewComponentResult("Unable to get the makes");

  }

  return View("MenuView", makes);

}

Вспомогательный метод View() из базового класса ViewComponent похож на вспомогательный метод с тем же именем из класса Controller, но с парой ключевых отличий. Первое отличие заключается в том, что стандартным именем файла представления является Default.cshtml, а не имя метода. Однако подобно вспомогательному методу View() из класса Controller имя представления может быть любым, когда оно передается вызову метода (без расширения .cshtml). Второе отличие связано с тем, что представление обязано находиться в одном из следующих трех каталогов:

Views/< controller>/Components/<имя_компонента_представления>/<view_name>

Views/Shared/Components/<имя_компонента_представления>/<view_name>

Pages/Shared/Components/<имя_компонента_представления>/<view_name>

На заметку! В версии ASP.NET Core 2.x появился еще один механизм для создания веб-приложений, который называется Razor Pages, но в этой книге он не рассматривается.

Класс C# может находиться где угодно (даже в другой сборке), но файл <имя_представления>.cshtml должен храниться в одном из ранее перечисленных каталогов.

Построение частичного представления

Частичное представление, визуализируемое классом MenuViewComponent, будет проходить по записям Make, добавляя каждую в виде элемента списка, который предназначен для отображения в меню Bootstrap. Элемент меню All (Все) добавляется первым как жестко закодированное значение.

Создайте внутри каталога ViewsShared новый каталог по имени Components, а в нем — еще один каталог под названием Menu. Имя каталога должно совпадать с именем созданного ранее класса компонента представления минус суффикс ViewComponent. Добавьте в каталог Menu файл частичного представления по имени MenuView.cshtml.

Удалите существующий код и поместите в файл показанную ниже разметку:

@model IEnumerable<Make>

<div class="dropdown-menu">

<a class="dropdown-item text-dark" asp-area="" asp-controller="Cars" asp-

action="Index">All</a>

@foreach (var item in Model)

{

  <a class="dropdown-item text-dark" asp-controller="Cars"

    asp-action="ByMake"

    asp-route-makeId="@item.Id"

    asp-route-makeName="@item.Name">@item.Name</a>

}

</div>

Вызов компонентов представлений

Компоненты представлений обычно визуализируются из представления (хотя их можно визуализировать также из метода действия контроллера). Синтаксис довольно прямолинеен: Component.Invoke(<имя_компонента_представления>) или @await Component.InvokeAsync(<имя_компонента_представления>). Как и в случае с контроллерами, при вызове компонента представления суффикс ViewComponent не должен указываться:

@await Component.InvokeAsync("Menu") // асинхронная версия

@Component.Invoke("Menu")            // синхронная версия

Вызов компонентов представлений как специальных вспомогательных функций дескрипторов

Появившиеся в ASP.NET 1.1 компоненты представлений можно вызывать с использованием синтаксиса вспомогательных функций дескрипторов. Вместо применения Component.InvokeAsync()/Component.Invoke() просто вызывайте компонент представления следующим образом:

<vc:menu></vc:menu>

В приложении потребуется разрешить использование такого способа вызова компонентов представлений, что делается добавлением команды @addTagHelper с именем сборки, которая содержит нужный компонент представления. В файл _ViewImports.cshtml необходимо добавить показанную ниже строку, которая уже была добавлена для специальных вспомогательных функций дескрипторов:

@addTagHelper *, AutoLot.Mvc

Обновление меню

Откройте частичное представление _Menu.cshtml и перейдите в место сразу после блока <li>/<li>, который соответствует методу действия Home/Index. Поместите в частичное представление следующую разметку:

<li class="nav-item dropdown">

  <a class="nav-link dropdown-toggle text-dark"

    data-toggle="dropdown">Inventory <i class="fa fa-car"></i></a>

    <vc:menu />

</li>

Строка, выделенная полужирным, визуализирует MenuViewComponent внутри меню. Окружающая ее разметка реализует форматирование Bootstrap.

Запустив приложение, вы увидите меню Inventory (Реестр), содержащее производителей в качестве элементов подменю (рис. 31.10).

Пакетирование и минификация

При построении веб-приложений с применением библиотек клиентской стороны необходимо принять во внимание два дополнительных фактора, которые направлены на улучшение показателей производительности — пакетирование и минификацию.

Пакетирование

У веб-браузеров есть установленный предел на количество файлов, которые разрешено загружать параллельно из одной конечной точки. В случае использования с вашими файлами JavaScript и CSS приемов разработки SOLID, которые предусматривают разбиение связанного кода и стилей на более мелкие и управляемые файлы, могут возникать проблемы. Такой подход совершенствует процесс разработки, но становится причиной снижения производительности приложения из-за того, что файлы ожидают своей очереди на загрузку. Пакетирование — это просто объединение файлов с целью предотвращения их блокировки при достижении веб-браузером своего предела загрузки.

Минификация

Кроме того, для улучшения показателей производительности процесс минификации изменяет файлы CSS и JavaScript, уменьшая их размеры. Необязательные пробельные символы удаляются, а имена, не являющиеся ключевыми словами, делаются короче. Хотя файлы становятся практически нечитабельными для человека, функциональность не затрагивается, причем размеры файлов могут значительно сократиться. В свою очередь это ускоряет процесс загрузки, приводя к увеличению производительности приложения.

Решение WebOptimizer

Существует много инструментов разработки, которые позволяют пакетировать и минифицировать файлы как часть процесса сборки проекта. Безусловно, они эффективны, но могут стать проблематичными, если процессы перестают быть синхронизированными, поскольку на самом деле нет хорошего средства для сравнения исходных файлов с их пакетированными и минифицированными версиями.

WebOptimizer представляет собой пакет с открытым кодом, который обеспечивает пакетирование, минификацию и кеширование в качестве части конвейера ASP.NET Core. Он гарантирует, что пакетированные и минифицированные файлы соответствуют первоначальным файлам. Такие файлы не только точны, они еще и кешируются, значительно уменьшая количество операций дискового чтения для запросов страниц. Вы уже добавили пакет Libershark.WebOptimizer.Core при создании проектов в главе 29. Теперь пора им воспользоваться.

Обновление Startup.cs

Первый шаг предусматривает добавление WebOptimizer в конвейер. Откройте файл Startup.cs из проекта AutoLot.Mvc, отыщите в нем метод Configure() и добавьте в него следующую строку (сразу после вызова арр.UseStaticFiles()):

app.UseWebOptimizer();

Следующим шагом будет конфигурирование того, что должно минифицироваться и пакетироваться. Обычно при разработке своего приложения вы хотите видеть непакетированные/неминифицированные версии файлов, но в подготовительной и производственной средах желательно применять пакетирование и минификацию. Добавьте показанный ниже блок кода в метод ConfigureServices():

if (_env.IsDevelopment() || _env.IsEnvironment("Local"))

{

  services.AddWebOptimizer(false,false);

}

else

{

  services.AddWebOptimizer(options =>

  {

    options.MinifyCssFiles();  // Минифицировать все файлы CSS

    //options.MinifyJsFiles(); // Минифицировать все файлы JavaScript

    options.MinifyJsFiles("js/site.js");

    options.MinifyJsFiles("lib/**/*.js");

  });

}