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

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

Используя компоненты представления, разработчики могут построить веб-приложение наподобие дома, в котором каждая предварительно построенная секция органично вписывается в более крупную структуру. Такой подход экономит время, снижает сложность и обеспечивает более эффективное обслуживание и обновления. Единственным недостатком View Components является их неиспользование.

Что делает компонент представления?
Компонент представления — это класс, отвечающий одному из следующих критериев: его имя заканчивается на "ViewComponent", он определяет метод "Invoke" или "InvokeAsync". , он наследуется от базового класса «ViewComponent» или к нему применяется атрибут «ViewComponent». Вы можете размещать файлы View Component в любом месте вашего проекта, но принято хранить их в папке с именем Components, расположенной в Solution/Components.

Давайте посмотрим на компонент представления в действии.

Вот краткое руководство по созданию компонента представления на самом фундаментальном уровне. Это всего 6 шагов, которые должны дать вам представление о том, как устроены структуры папок и как компоненты представления добавляются к представлениям.

Этот компонент представления отображает только простое строковое сообщение, чтобы мы могли упростить процесс установки.

  1. В Visual Studio создайте новое приложение ASP.NET Core Web App (Model-View-Controller) с именем ViewComponentExample. Я использую NET 6.0, но другие версии должны работать нормально.

2. Внутри основной папки проекта создайте папку с именем Components с новым классом внутри нее с именем MyViewComponents.cs, чтобы структура папок выглядела следующим образом:

3. Добавьте следующий код в свой класс MyViewComponents.cs.

4. В обозревателе решений создайте папку в папке Views\Shared с именем Components, а затем создайте папку внутри папки Components с именем MyViewComponent следующим образом:

5. Щелкните правой кнопкой мыши папку «MyViewComponent», выберите «Добавить» › «Вид», Razor View — Empty и назовите новое представление «Default.cshtml». Это соглашение об именах для всех компонентов Razor View. Замените все содержимое следующим кодом:

@model string

<div>
    @Model
</div>

6. Откройте файл Views/Home/Index.cshtml и замените все содержимое следующим кодом.

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

    @await.InvokeAsync(nameof(ViewComponentExample.Components.MyViewComponent))

</div>

7. Запустите приложение, чтобы увидеть результат этой строки:

Обратите внимание, что все, что мы добавили в Index.cshtml, было этой строкой кода.

@await.InvokeAsync(имя(ViewComponentExample.Components.MyViewComponent))

который мы теперь можем добавить к любому представлению в нашем приложении. Довольно круто, верно?

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

Отсюда нам нужно всего лишь внести три крошечных изменения в код, чтобы расширить его возможности.

  1. Создайте класс в папке Models с именем MyViewModel.cs со следующим содержимым:
public class MyViewModel
{
    public string Message { get; set; }
    public int Count { get; set; }
}

Структура ваших папок и нового класса должна выглядеть так.

2. Разверните папку Components, чтобы открыть и обновить код в классе MyViewComponent.cs следующим образом.

using Microsoft.AspNetCore.Mvc;
using ViewComponentExample.Models;

namespace ViewComponentExample.Components
{
    [ViewComponent(Name = "MyViewComponent")]
    public class MyViewComponent : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            var model = new MyViewModel
            {
                Message = "Hello, this is a View Component!",
                Count = 5 // Or whatever value you need
                // Initialize other properties here
            };
            return View("Default", model);
        }
    }
}

3. Наконец, обновите файл компонента представления Default.cshtml до этого содержимого.

@model MyViewModel

<div>
    <p>@Model.Message</p>
    <p>Count: @Model.Count</p>
    <!-- Display other properties here -->
</div>

После запуска приложения вы должны получить этот вывод.

При начальной настройке компонент представления возвращал простую строку, что ограничивало сложность данных, которые мы могли отображать в нашем представлении. Поскольку мы добавили класс MyViewModel, теперь мы можем передать сложный объект из компонента представления в представление. Это достигается с помощью метода Invoke MyViewComponent.cs, где экземпляр MyViewModel.cs создается и возвращается в представление. Это означает, что наше тестовое приложение теперь может обрабатывать более сложные структуры данных и пользоваться преимуществами проверки типов во время компиляции, что помогает предотвратить ошибки, связанные с типами.

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

Компоненты Blazor: Blazor также полностью посвящен компонентам, таким как Angular, React и Vue.js. Но вот что интересно: компоненты Blazor могут работать либо на сервере с обновлениями пользовательского интерфейса, отправляемыми через SignalR, либо прямо в веб-браузере клиента с помощью WebAssembly. Это дает вам преимущества программирования на стороне сервера, такие как полная отладка .NET и отсутствие необходимости выполнять вызовы API для данных, при этом предоставляя пользователям приятный интерактивный опыт. Обратная сторона? Blazor все еще довольно новый и не имеет такой широкой поддержки сообщества или такого количества сторонних библиотек, как другие.

Частичные представления и компоненты представления в ASP.NET Core. Эти два компонента позволяют создавать повторно используемые элементы пользовательского интерфейса в ASP.NET Core, но используются они по-разному. Частичные представления самые простые — они не могут выполнять логику или извлекать данные. Это просто фрагменты представлений Razor, которые можно вставлять в другие представления, вроде повторно используемых разделов для таких вещей, как верхние и нижние колонтитулы или меню навигации.

View Components, с другой стороны, являются тяжеловесными. Они могут иметь свои собственные действия, извлекать данные, выполнять операции и возвращать результат, отображаемый в представлении. Это делает их отличными для частей пользовательского интерфейса, которым требуется сложная логика или доступ к данным, например, корзина покупок, меню динамической навигации или виджеты, которые зависят от данных. Компромисс заключается в том, что их немного сложнее настроить и использовать, чем частичные представления.

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