Übung: Erstellen und Ausführen einer Blazor Hybrid-App

  • 8 Minuten

Zunächst erstellen Sie Ihre erste Blazor-Web-App.

In diesem Modul wird Visual Studio 2022 für die lokale Entwicklung verwendet. Nach Abschluss dieses Moduls können Sie die Konzepte mit einer Entwicklungsumgebung wie Visual Studio Code anwenden.

Anforderungen für die .NET MAUI-Entwicklung

Um .NET MAUI-Anwendungen mit .NET 8 zu erstellen, müssen Sie Visual Studio Version 17.8 oder neuer mit der folgenden Workload installieren:

  • Entwicklung mit .NET Multi-Platform App UI

Wenn Sie .NET MAUI Blazor-Apps erstellen möchten, müssen Sie außerdem die Workload für ASP.NET- und Webentwicklung installieren.

Eine exemplarische Vorgehensweise für die Einrichtung finden Sie in der Dokumentation.

Entwicklung mit Visual Studio Code

Wenn Sie unter macOS oder Linux entwickeln, müssen Sie Visual Studio Code und die .NET MAUI-Erweiterung zusammen mit dem .NET SDK und .NET MAUI Workload installieren. Eine exemplarische Vorgehensweise für die Einrichtung finden Sie in der Dokumentation.

Erstellen einer neuen Blazor Hybrid-App

Sie verwenden Visual Studio 2022, um ein Blazor Hybrid-Projekt einzurichten.

  1. Wählen Sie in Visual Studio 2022 Datei>Neues Projekt aus oder wählen Sie im Startfeld Neues Projekt erstellen aus.

  2. Geben Sie oben im Suchfeld im Neues Projekt erstellen-Dialog .NET MAUI Blazor ein, wählen Sie .NET MAUI Blazor Hybrid App und dann Weiter aus.

    Screenshot: Bildschirm „Neues Projekt erstellen“ in Visual Studio 2022 und .NET MAUI Blazor-App-Vorlage

  3. Benennen Sie auf dem nachfolgenden Bildschirm Ihr Projekt BlazorHybridApp und geben Sie einen Speicherort auf Ihrem Computer an, um das Projekt zu speichern. Aktivieren Sie das Kontrollkästchen neben Lösung und Projekt im selben Verzeichnis ablegen und wählen Sie dann Weiter aus.

    Screenshot: Bildschirm „Projekt konfigurieren“ in Visual Studio 2022 und empfohlene Einstellungen aus Schritt 3

  4. Wählen Sie auf dem Bildschirm Zusätzliche Informationen die Option .NET 8.0 (Langfristiger Support) in der Dropdownliste Framework und dann Erstellen aus.

  5. Mit diesem Befehl wird ein einfaches Blazor Hybrid-Projekt auf Basis von .NET MAUI mit allen erforderlichen Dateien und Seiten erstellt.

    Sie sollten nun Zugriff auf diese Dateien haben, und Ihr Projektmappen-Explorer in Visual Studio 2022 sieht ähnlich wie das folgende Beispiel aus:

    Screenshot: Projektmappen-Explorer in Visual Studio 2022 mit einer Liste der Dateien in einem .NET MAUI Blazor-Standardprojekt

Sie verwenden Visual Studio Code, um ein Blazor Hybrid-Projekt einzurichten.

  1. Öffnen Sie in Visual Studio Code den Explorer, und wählen Sie .NET-Projekt erstellen aus.

  2. Wählen Sie die .NET MAUI Blazor Hybrid-App in der Dropdownliste aus.

    Screenshot: Bildschirm „Neues Projekt erstellen“ in Visual Studio Code und .NET MAUI Blazor-App-Vorlage

  3. Erstellen Sie einen neuen Ordner im Popup mit dem Namen BlazorHybridApp, und wählen Sie Ordner auswählen aus.

  4. Nennen Sie das Projekt BlazorHybridApp, und drücken Sie die EINGABETASTE, um dies zu bestätigen.

  5. Damit wird ein einfaches Blazor Hybrid-Projekt auf Basis von .NET MAUI mit allen erforderlichen Dateien und Seiten erstellt.

    Sie sollten nun Zugriff auf diese Dateien haben, und Ihr Projektmappen-Explorer in Visual Studio Code sieht etwa so aus:

    Screenshot: Projektmappen-Explorer in Visual Studio Code mit einer Liste der Dateien in einem .NET MAUI Blazor-Standardprojekt

Struktur und Start eines Blazor Hybrid-Projekts auf Basis von .NET MAUI

Das Projekt ist ein normales .NET MAUI-Projekt mit einigen zusätzlichen Blazor-bezogenen Inhalten.

Blazor-Projektdateien

  • wwwroot: Dieser Ordner enthält statische Webressourcen, die Blazor verwendet, einschließlich HTML-, CSS-, JavaScript- und Bilddateien.

  • Components: Dieser Ordner containert mehrere Unterordner und Razor-Komponenten für die App.

    • Layout: Dieser Ordner enthält freigegebene Razor-Komponenten, darunter das Hauptlayout und das Navigationsmenü der App.

    • Pages: Dieser Ordner enthält drei Razor-Komponenten – Counter.razor, Home.razor und Weather.razor. Sie definieren die drei Seiten, die die Blazor-Benutzeroberfläche bilden.

    • _Imports.razor: Diese Datei definiert Namespaces, die in jede Razor-Komponente importiert werden.

    • Routes.razor: Die Razor-Stammkomponente für die App, die den Blazor-Router einrichtet, um die Seitennavigation innerhalb der Webansicht zu verarbeiten.

.NET MAUI-Projektdateien

  • App.xaml: Diese Datei definiert die Anwendungsressourcen, die die App im XAML-Layout verwendet. Die Standardressourcen befinden sich im Ordner Resources und definieren App-weite Farben und Standardstile für jedes integrierte Steuerelement von .NET MAUI.

  • App.xaml.cs: Der CodeBehind der Datei „App.xaml“ Diese Datei definiert die App-Klasse. Diese Klasse stellt Ihre Anwendung zur Laufzeit dar. Der Konstruktor in dieser Klasse erstellt ein erstes Fenster und weist es der MainPage-Eigenschaft zu. Diese Eigenschaft bestimmt, welche Seite angezeigt wird, wenn die Anwendung gestartet wird. Darüber hinaus können Sie mit dieser Klasse gängige plattformneutrale Anwendungslebenszyklus-Ereignishandler außer Kraft setzen. Zu den Ereignissen gehören unter anderem OnStart, OnResume und OnSleep.

  • MainPage.xaml: Diese Datei enthält die Benutzeroberflächendefinition. Die Beispiel-App, die die .NET MAUI Blazor-App-Vorlage generiert, umfasst eine BlazorWebView, die die Components.Routes-Komponente in der angegebenen Host-HTML-Seite (wwwroot/index.html) an der vom CSS-Selektor (#app) angegebenen Stelle lädt.

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:BlazorHybridApp"
            x:Class="BlazorHybridApp.MainPage"
            BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

  • MainPage.xaml.cs: Dies ist die CodeBehind-Datei für die Seite In dieser Datei definieren Sie die Logik für die verschiedenen Ereignishandler und sonstige Aktionen, die von den .NET MAUI-Steuerelementen auf der Seite ausgelöst werden. Der Beispielcode in der Vorlage enthält nur den Standardkonstruktor, da sich die gesamte Benutzeroberfläche und die Ereignisse in den Blazor-Komponenten befinden.

    namespace BlazorHybridApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

  • MauiProgram.cs: Jede native Plattform hat einen anderen Ausgangspunkt, der die Anwendung erstellt und initialisiert. Sie finden diesen Code im Ordner Plattformen (Platforms) im Projekt. Dieser Code ist plattformspezifisch, ruft aber am Ende die CreateMauiApp-Methode der statischen MauiProgram-Klasse auf. Sie verwenden die CreateMauiApp-Methode zum Konfigurieren der Anwendung, indem Sie ein App-Generator-Objekt erstellen. Sie müssen mindestens angeben, welche Klasse Ihre Anwendung beschreibt. Sie tun dies mit der generischen UseMauiApp-Methode des App-Generator-Objekts. Der „type“-Parameter gibt die Anwendungsklasse an. Der App-Generator stellt auch Methoden für Aufgaben wie das Registrieren von Schriftarten, das Konfigurieren von Diensten für die Abhängigkeitsinjektion, das Registrieren benutzerdefinierter Handler für Steuerelemente und vieles mehr bereit. Der folgende Code zeigt ein Beispiel für die Verwendung des App-Generators zum Registrieren einer Schriftart, zum Registrieren des Wetterdienstes und zum Hinzufügen von Unterstützung für Blazor Hybrid mit der Methode AddMauiBlazorWebView:

    using Microsoft.AspNetCore.Components.WebView.Maui;
using BlazorHybridApp.Data;

namespace BlazorHybridApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        });

        builder.Services.AddMauiBlazorWebView();

        #if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
        #endif

        return builder.Build();
    }
}

Ausführen der App

Wählen Sie in Visual Studio Debuggen>Debuggen starten aus.

Wählen Sie in Visual Studio Code Ausführen>Debuggen starten aus. Wählen Sie den .NET MAUI-Debugger aus der Dropdownliste aus, um die Anwendung zu starten.

Dadurch wird die Anwendung unter Windows erstellt und gestartet und anschließend neu erstellt und neu gestartet, wenn Sie Codeänderungen vornehmen. Die App sollte automatisch unter Windows geöffnet werden. Sie können das Bereitstellungsziel auch über das Dropdownmenü zum Debuggen ändern, um eine Bereitstellung für Android oder andere Plattformen durchzuführen.

Screenshot: Ausführung der Blazor Hybrid-App unter Windows und Android

Sie verwenden diese Blazor Hybrid-App in den nächsten Übungen.