Введение в ASP.NET Core BlazorIntroduction to ASP.NET Core Blazor

Авторы: Дэниэл Рот (Daniel Roth) и Люк Лэтем (Luke Latham)By Daniel Roth and Luke Latham

Добро пожаловать в Blazor!Welcome to Blazor!

Платформа Blazor предназначена для создания интерактивного веб-интерфейса на стороне клиента для .NET и предлагает следующие возможности:Blazor is a framework for building interactive client-side web UI with .NET:

  • создание многофункциональных интерактивных пользовательских интерфейсов на C# вместо JavaScript;Create rich interactive UIs using C# instead of JavaScript.
  • совместное использование серверной и клиентской логик приложений, написанных с помощью .NET;Share server-side and client-side app logic written in .NET.
  • отображение пользовательского интерфейса в виде HTML-страницы с CSS для широкой поддержки браузеров, в том числе для мобильных устройств.Render the UI as HTML and CSS for wide browser support, including mobile browsers.
  • интеграция с современными платформами размещения, такими как Docker.Integrate with modern hosting platforms, such as Docker.

Использование .NET для разработки веб-приложений на стороне клиента предоставляет следующие преимущества:Using .NET for client-side web development offers the following advantages:

  • создавайте код на C#, а не на JavaScript.Write code in C# instead of JavaScript.
  • возможность использования существующей экосистемы .NET с библиотеками .NET;Leverage the existing .NET ecosystem of .NET libraries.
  • сохранение единой логики приложений для сервера и клиента;Share app logic across server and client.
  • высокая производительность, надежность и безопасность платформы .NET;Benefit from .NET's performance, reliability, and security.
  • сохраняйте высокий уровень продуктивности с помощью Visual Studio в Windows, Linux и macOS.Stay productive with Visual Studio on Windows, Linux, and macOS.
  • создавайте приложения на основе распространенных языков, платформ и инструментов, которые отличаются стабильностью, широким набором функций и простотой в использовании.Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

КомпонентыComponents

Приложения Blazor основаны на компонентах.Blazor apps are based on components. Компонентом Blazor называется любой элемент пользовательского интерфейса, например страница, диалоговое окно или форма ввода данных.A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Компоненты являются классами .NET, встроенными в сборки .NET, которые:Components are .NET classes built into .NET assemblies that:

  • определяют гибкую логику визуализации пользовательского интерфейса;Define flexible UI rendering logic.
  • обрабатывают действия пользователя;Handle user events.
  • можно вкладывать друг в друга и использовать повторно;Can be nested and reused.
  • можно совместно использовать и распространять в виде библиотек классов Razor или пакетов NuGet.Can be shared and distributed as Razor class libraries or NuGet packages.

Класс компонента обычно записывается в виде страницы разметки Razor с расширением файла .razor.The component class is usually written in the form of a Razor markup page with a .razor file extension. Обычно компоненты в Blazor называются компонентами Razor .Components in Blazor are formally referred to as Razor components. Синтаксис Razor сочетает разметку HTML с кодом C#, позволяя повысить производительность разработчиков.Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor позволяет переключаться между разметкой HTML и кодом C# в одном файле с поддержкой IntelliSense. allows you to switch between HTML markup and C# in the same file with IntelliSense support. Синтаксис Razor применяется также для Razor Pages и MVC.Razor Pages and MVC also use Razor. В отличие от Razor Pages и MVC, которые построены по модели "запрос-ответ", компоненты используются специально для логики пользовательского интерфейса на стороне клиента и для компоновки.Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Следующая разметка Razor определяет компонент Dialog.razor, который может быть вложен в другой компонент:The following Razor markup demonstrates a component (Dialog.razor), which can be nested within another component:

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
    }
}

Содержимое текста (ChildContent) и заголовка (Title) диалогового окна предоставляются компонентом, который использует этот компонент в пользовательском интерфейсе.The dialog's body content (ChildContent) and title (Title) are provided by the component that uses this component in its UI. Метод C# OnYes инициируется событием кнопки onclick.OnYes is a C# method triggered by the button's onclick event.

Blazor использует естественные теги HTML для компоновки пользовательского интерфейса. uses natural HTML tags for UI composition. Элементы HTML определяют компоненты, а атрибуты тегов передают значения для свойств компонентов.HTML elements specify components, and a tag's attributes pass values to a component's properties.

В следующем примере компонент Index использует компонент Dialog.In the following example, the Index component uses the Dialog component. Значения ChildContent и Title определяются атрибутами и содержимым элемента <Dialog>.ChildContent and Title are set by the attributes and content of the <Dialog> element.

Index.razor:Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

Диалоговое окно отображается, когда к родительскому компоненту (Index.razor) осуществляется доступ в браузере:The dialog is rendered when the parent (Index.razor) is accessed in a browser:

Компонент диалогового окна, отображаемый в браузере

Если этот компонент используется в приложении, технология IntelliSense в Visual Studio и Visual Studio Code ускоряет разработку благодаря завершению синтаксиса и параметров.When this component is used in the app, IntelliSense in Visual Studio and Visual Studio Code speeds development with syntax and parameter completion.

Компоненты преобразуются в хранящееся в памяти представление модели DOM для браузера, которое называется деревом отображения, позволяя гибко и эффективно обновлять пользовательский интерфейс.Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

Blazor WebAssembly WebAssembly

Blazor WebAssembly — это платформа для одностраничных приложений, которая позволяет создавать интерактивные клиентские веб-приложения с помощью .NET. WebAssembly is a single-page app framework for building interactive client-side web apps with .NET. Blazor WebAssembly использует открытые веб-стандарты без подключаемых модулей или транскомпиляции кода. Эта платформа работает во всех современных веб-браузерах, в том числе на мобильных устройствах. WebAssembly uses open web standards without plugins or code transpilation and works in all modern web browsers, including mobile browsers.

Выполнение кода .NET в веб-браузерах становится возможным благодаря технологии WebAssembly (сокращенно wasm).Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly — это компактный формат байт-кода, оптимизированный для быстрой загрузки и максимального быстродействия.WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly — это открытый веб-стандарт, который поддерживается в веб-браузерах без подключаемых модулей.WebAssembly is an open web standard and supported in web browsers without plugins.

Код WebAssembly может обращаться к любым функциям браузера через JavaScript благодаря поддержке взаимодействия с JavaScript .WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability (or JavaScript interop). Код .NET, который обрабатывается через WebAssembly в браузере, выполняется в песочнице для JavaScript этого браузера, которая включает средства защиты от вредоносных действий на клиентском компьютере..NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

Blazor WebAssembly выполняет код .NET в браузере с WebAssembly.Blazor WebAssembly runs .NET code in the browser with WebAssembly.

Когда приложение Blazor WebAssembly создается и запускается в браузере:When a Blazor WebAssembly app is built and run in a browser:

  • Файлы кода C# и файлы Razor компилируются в сборки .NET.C# code files and Razor files are compiled into .NET assemblies.
  • Сборки и среда выполнения .NET загружаются в браузер.The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor WebAssembly осуществляет начальную загрузку среды выполнения .NET и настраивает ее для загрузки сборок для приложения. WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. Среда выполнения Blazor WebAssembly использует взаимодействие с JavaScript для обработки операций с моделью DOM и вызовов API браузера.The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

Размер опубликованного приложения, известный как размер полезных данных, является критически важным фактором производительности для удобства работы с приложением.The size of the published app, its payload size, is a critical performance factor for an app's useability. Крупное приложение скачивается в браузере довольно долго, что ухудшает взаимодействие с пользователем.A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly оптимизирует размер полезных данных, чтобы сократить время скачивания: WebAssembly optimizes payload size to reduce download times:

  • При публикации неиспользуемый код исключается из приложения компоновщиком промежуточного языка.Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • HTTP-ответы сжимаются;HTTP responses are compressed.
  • среда выполнения и сборки .NET кэшируются в браузере.The .NET runtime and assemblies are cached in the browser.

Blazor Server Server

Blazor отделяет логику отображения компонентов от того, как применяются обновления пользовательского интерфейса. decouples component rendering logic from how UI updates are applied. Сервер Blazor предоставляет поддержку размещения компонентов Razor на сервере в приложении ASP.NET Core.Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. Обновления пользовательского интерфейса передаются через подключение SignalR.UI updates are handled over a SignalR connection.

Среда выполнения обрабатывает отправку событий пользовательского интерфейса из браузера на сервер и применяет полученные от сервера обновления пользовательского интерфейса в браузере после выполнения компонентов.The runtime handles sending UI events from the browser to the server and applies UI updates sent by the server back to the browser after running the components.

Подключение, используемое Blazor Server для обмена данными с браузером, также применяется для обработки вызовов взаимодействия JavaScript.The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

Blazor Server выполняет код .NET на сервере и взаимодействует с моделью DOM на стороне клиента через подключение SignalRBlazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection

Взаимодействие с JavaScriptJavaScript interop

Для приложений, которым требуются сторонние библиотеки JavaScript и доступ к API браузера, компоненты взаимодействуют с JavaScript.For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Компоненты могут использовать любую библиотеку или API, которые может использовать JavaScript.Components are capable of using any library or API that JavaScript is able to use. Код C# может вызывать код JavaScript, а код JavaScript — код C#.C# code can call into JavaScript code, and JavaScript code can call into C# code. Дополнительные сведения см. в следующих статьях:For more information, see the following articles:

Совместное использование кода и .NET StandardCode sharing and .NET Standard

Blazor реализует .NET Standard 2.0. implements .NET Standard 2.0. .NET Standard — это формальная спецификация API-интерфейсов .NET, которые доступны во всех реализациях .NET..NET Standard is a formal specification of .NET APIs that are common across .NET implementations. Библиотеки классов .NET Standard можно использовать на разных платформах .NET, таких как Blazor, .NET Framework, .NET Core, Xamarin, Mono и Unity..NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

API, которые не используются в веб-браузере (например, для доступа к файловой системе, открытия сокетов и работы с потоками), создают исключение PlatformNotSupportedException.APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

Дополнительные ресурсыAdditional resources