Wprowadzenie do ASP.NET Core BlazorIntroduction to ASP.NET Core Blazor

Autorzy Daniel Roth i Luke LathamBy Daniel Roth and Luke Latham

Witamy Blazor !Welcome to Blazor!

Blazor to platforma służąca do tworzenia interakcyjnego interfejsu użytkownika sieci Web po stronie klienta przy użyciu platformy .NET:Blazor is a framework for building interactive client-side web UI with .NET:

  • Twórz rozbudowane interaktywne interfejsów użytkownika przy użyciu języka C# zamiast języka JavaScript.Create rich interactive UIs using C# instead of JavaScript.
  • Udostępnianie logiki aplikacji po stronie serwera i klienta zapisaną w środowisku .NET.Share server-side and client-side app logic written in .NET.
  • Renderuj interfejs użytkownika jako HTML i CSS, aby obsługiwał szeroką przeglądarkę, w tym przeglądarki dla urządzeń przenośnych.Render the UI as HTML and CSS for wide browser support, including mobile browsers.
  • Integruj z nowoczesnymi platformami hostingu, takimi jak Docker.Integrate with modern hosting platforms, such as Docker.

Korzystanie z programu .NET do tworzenia aplikacji sieci Web po stronie klienta zapewnia następujące korzyści:Using .NET for client-side web development offers the following advantages:

  • Napisz kod w języku C# zamiast języka JavaScript.Write code in C# instead of JavaScript.
  • Skorzystaj z istniejącego ekosystemu .NET bibliotek platformy .NET.Leverage the existing .NET ecosystem of .NET libraries.
  • Udostępnianie logiki aplikacji między serwerem i klientem.Share app logic across server and client.
  • Skorzystaj z programu. Wydajność, niezawodność i bezpieczeństwo sieci.Benefit from .NET's performance, reliability, and security.
  • Bądź na bieżąco z programem Visual Studio w systemach Windows, Linux i macOS.Stay productive with Visual Studio on Windows, Linux, and macOS.
  • Twórz w oparciu o wspólny zestaw języków, struktur i narzędzi, które są stabilne, bogate w funkcje i łatwe w użyciu.Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

SkładnikiComponents

Blazor aplikacje są oparte na składnikach.Blazor apps are based on components. Składnik w programie Blazor to element interfejsu użytkownika, taki jak strona, okno dialogowe lub formularz wprowadzania danych.A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Składniki to klasy .NET C# wbudowane w zestawy .NET , które:Components are .NET C# classes built into .NET assemblies that:

  • Definiowanie elastycznej logiki renderowania interfejsu użytkownika.Define flexible UI rendering logic.
  • Obsługa zdarzeń użytkownika.Handle user events.
  • Mogą być zagnieżdżane i ponownie używane.Can be nested and reused.
  • Mogą być udostępniane i dystrybuowane jako Razor biblioteki klas lub pakiety NuGet.Can be shared and distributed as Razor class libraries or NuGet packages.

Klasa składnika jest zwykle zapisywana w formie Razor strony znaczników z .razor rozszerzeniem pliku.The component class is usually written in the form of a Razor markup page with a .razor file extension. Składniki w programie Blazor są formalnie określane jako Razor składniki.Components in Blazor are formally referred to as Razor components. Razor jest składnią służącą do łączenia znaczników HTML z kodem C# zaprojektowanym pod kątem produktywności dla deweloperów.Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor umożliwia przełączanie między znacznikami HTML i C# w tym samym pliku z obsługą programowania IntelliSense w programie Visual Studio.Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. Razor Używane są również strony i MVC Razor .Razor Pages and MVC also use Razor. W przeciwieństwie do Razor stron i MVC, które są zbudowane wokół modelu żądania/odpowiedzi, składniki są używane specjalnie dla logiki interfejsu użytkownika po stronie klienta.Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Blazor używa naturalnych tagów HTML dla kompozycji interfejsu użytkownika.Blazor uses natural HTML tags for UI composition. Poniższy Razor znacznik ilustruje składnik ( Dialog.razor ), który wyświetla okno dialogowe i przetwarza zdarzenie, gdy użytkownik wybierze przycisk:The following Razor markup demonstrates a component (Dialog.razor) that displays a dialog and processes an event when the user selects a button:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

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

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

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

W poprzednim przykładzie jest to OnYes Metoda języka C# wyzwalana przez onclick zdarzenie przycisku.In the preceding example, OnYes is a C# method triggered by the button's onclick event. Tekst ( ChildContent ) i tytuł () okna dialogowego Title są dostarczane przez Poniższy składnik, który używa tego składnika w interfejsie użytkownika.The dialog's text (ChildContent) and title (Title) are provided by the following component that uses this component in its UI.

DialogSkładnik jest zagnieżdżony w innym składniku przy użyciu tagu HTML.The Dialog component is nested within another component using an HTML tag. W poniższym przykładzie Index składnik ( Pages/Index.razor ) używa poprzedniego Dialog składnika.In the following example, the Index component (Pages/Index.razor) uses the preceding Dialog component. TitleAtrybut tagu przekazuje wartość tytułu do Dialog Title właściwości składnika.The tag's Title attribute passes a value for the title to the Dialog component's Title property. DialogTekst składnika ( ChildContent ) jest ustawiany przez zawartość <Dialog> elementu.The Dialog component's text (ChildContent) are set by the content of the <Dialog> element. Po Dialog dodaniu składnika do składnika funkcja Index IntelliSense w programie Visual Studio przyspiesza Programowanie przy użyciu składni i uzupełniania parametrów.When the Dialog component is added to the Index component, IntelliSense in Visual Studio speeds development with syntax and parameter completion.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

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

To okno dialogowe jest renderowane, gdy Index dostęp do składnika zostanie uzyskany w przeglądarce.The dialog is rendered when the Index component is accessed in a browser. Po wybraniu przycisku przez użytkownika konsola narzędzia deweloperskie w przeglądarce pokazuje komunikat zapisany przez OnYes metodę:When the button is selected by the user, the browser's developer tools console shows the message written by the OnYes method:

Składnik okna dialogowego renderowany w przeglądarce zagnieżdżony wewnątrz składnika indeksu.

Składniki są renderowane w pamięci podręcznej Document Object Model (dom) przeglądarki o nazwie drzewo renderowania, która jest używana do aktualizowania interfejsu użytkownika w elastyczny i wydajny sposób.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

Blazor WebAssembly to Struktura aplikacji jednostronicowej (Spa) do tworzenia interaktywnych aplikacji sieci Web po stronie klienta przy użyciu platformy .NET.Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps with .NET. Blazor WebAssembly używa otwartych standardów sieci Web bez wtyczek lub ponownego kompilowania kodu w innych językach.Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly działa we wszystkich nowoczesnych przeglądarkach sieci Web, w tym w przeglądarkach dla urządzeń przenośnych.Blazor WebAssembly works in all modern web browsers, including mobile browsers.

Uruchamianie kodu platformy .NET wewnątrz przeglądarek sieci Web jest możliwe przez zestaw webassembly (skrócony wasm ).Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). Webassembly to kompaktowy format kodu bajtowego zoptymalizowany pod kątem szybkiego pobierania i maksymalnej szybkości wykonywania.WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. Webassembly to otwarty standard sieci Web, który jest obsługiwany w przeglądarkach sieci Web bez wtyczek.WebAssembly is an open web standard and supported in web browsers without plugins.

Kod webassembly może uzyskać dostęp do pełnej funkcjonalności przeglądarki za pośrednictwem języka JavaScript, nazywanego współdziałaniem języka JavaScript, często skracana do międzyoperacyjności JavaScript Interop lub js.WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability, often shortened to JavaScript interop or JS interop. Kod .NET wykonywany za pośrednictwem webassembly w przeglądarce jest uruchamiany w piaskownicy języka JavaScript przeglądarki z ochroną, którą piaskownica zapewnia przed złośliwymi działaniami na komputerze klienckim..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.

::: No-Loc (Blazor webassembly)::: uruchamia kod .NET w przeglądarce z zestawem webassembly.

Gdy Blazor WebAssembly aplikacja zostanie skompilowana i uruchomiona w przeglądarce:When a Blazor WebAssembly app is built and run in a browser:

  • Pliki kodu C# i Razor pliki są kompilowane do zestawów .NET.C# code files and Razor files are compiled into .NET assemblies.
  • Zestawy i środowisko uruchomieniowe platformy .NET są pobierane do przeglądarki.The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor WebAssembly ładuje uruchomienia środowiska uruchomieniowego .NET i konfiguruje środowisko uruchomieniowe w celu załadowania zestawów dla aplikacji.Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. Blazor WebAssemblyŚrodowisko uruchomieniowe używa międzyoperacyjnego języka JavaScript do obsługi operacji manipulowania Dom i interfejsu API przeglądarki.The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

Rozmiar opublikowanej aplikacji, jej rozmiaru ładunku, stanowi krytyczny współczynnik wydajności dla użyteczności aplikacji.The size of the published app, its payload size, is a critical performance factor for an app's usability. Pobieranie dużej aplikacji do przeglądarki zajmuje stosunkowo dużo czasu, co zmniejsza środowisko użytkownika.A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optymalizuje rozmiar ładunku, aby skrócić czas pobierania:Blazor WebAssembly optimizes payload size to reduce download times:

  • Nieużywany kod jest usuwany z aplikacji, gdy jest publikowany za pomocą elementu dostosowującego języka pośredniego (IL).Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Trimmer.
  • Odpowiedzi HTTP są kompresowane.HTTP responses are compressed.
  • Środowisko uruchomieniowe platformy .NET i zestawy są buforowane w przeglądarce.The .NET runtime and assemblies are cached in the browser.
  • Nieużywany kod jest usuwany z aplikacji, gdy jest publikowany przez konsolidator języka pośredniego (IL).Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • Odpowiedzi HTTP są kompresowane.HTTP responses are compressed.
  • Środowisko uruchomieniowe platformy .NET i zestawy są buforowane w przeglądarce.The .NET runtime and assemblies are cached in the browser.

Blazor Server

Blazor oddziela logikę renderowania składników od sposobu stosowania aktualizacji interfejsu użytkownika.Blazor decouples component rendering logic from how UI updates are applied. Blazor Server zapewnia obsługę składników hostingu Razor na serwerze w aplikacji ASP.NET Core.Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. Aktualizacje interfejsu użytkownika są obsługiwane przez SignalR połączenie.UI updates are handled over a SignalR connection.

Obsługa środowiska uruchomieniowego:The runtime handles:

  • Wysyłanie zdarzeń interfejsu użytkownika z przeglądarki do serwera programu.Sending UI events from the browser to the server.
  • Stosowanie aktualizacji interfejsu użytkownika do renderowanego składnika, który jest wysyłany z powrotem przez serwer.Applying UI updates to the rendered component that are sent back by the server.

Połączenie używane przez Blazor Server program do komunikacji z przeglądarką jest również używane do obsługi wywołań międzyoperacyjnych języka JavaScript.The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

::: No-Loc (Blazor Server)::: uruchamia kod platformy .NET na serwerze i współdziała z Document Object Model na kliencie za pośrednictwem::: No-Loc (Sygnalizującer)::: Connection

Międzyoperacyjność w języku JavaScriptJavaScript interop

W przypadku aplikacji, które wymagają bibliotek JavaScript innych firm i dostępu do interfejsów API przeglądarki, składniki współdziałają z JavaScript.For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Składniki mogą korzystać z dowolnej biblioteki lub interfejsu API, który może być używany przez język JavaScript.Components are capable of using any library or API that JavaScript is able to use. Kod c# może wywołać kod JavaScript, a kod JavaScript może wywołać kod C#.C# code can call into JavaScript code, and JavaScript code can call into C# code.

Udostępnianie kodu i .NET StandardCode sharing and .NET Standard

Blazor implementuje .NET Standard, dzięki czemu Blazor projekty mogą odwoływać się do bibliotek, które są zgodne ze specyfikacjami .NET Standard.Blazor implements the .NET Standard, which enables Blazor projects to reference libraries that conform to .NET Standard specifications. .NET Standard jest formalną specyfikacją interfejsów API platformy .NET, które są wspólne dla implementacji platformy .NET..NET Standard is a formal specification of .NET APIs that are common across .NET implementations. Biblioteki klas .NET Standard mogą być współużytkowane przez różne platformy .NET, takie jak Blazor .NET Framework, .NET Core, Xamarin, mono i Unity..NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

Interfejsy API, które nie są stosowane w przeglądarce sieci Web (na przykład dostęp do systemu plików, otwieranie gniazda i wątkowość) throw 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.

Dodatkowe zasobyAdditional resources