Nutzen von ASP.NET Core Razor-Komponenten über eine Razor-Klassenbibliothek (RCL)

  • Artikel

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Warnung

Diese Version von ASP.NET Core wird nicht mehr unterstützt. Weitere Informationen finden Sie in der Supportrichtlinie für .NET und .NET Core. Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.

Wichtig

Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.

Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Komponenten können in einer Razor-Klassenbibliothek (RCL) projektübergreifend gemeinsam genutzt werden. Einschließen von Komponenten und statischen Ressourcen in eine App über:

  • Ein anderes Projekt in der Projektmappe.
  • Über eine referenzierte .NET-Bibliothek.
  • Über ein NuGet-Paket.

Genauso wie Komponenten normale .NET-Typen sind, sind von der RCL bereitgestellte Komponenten normale .NET-Assemblys.

Erstellen einer RCL

  1. Erstellen Sie ein neues Projekt.
  2. Wählen Sie im Dialogfeld Neues Projekt erstellen die Option Razor Klassenbibliothek aus der Liste der ASP.NET Core-Projektvorlagen aus. Wählen Sie Weiter aus.
  3. Geben Sie im Dialogfeld Neues Projekt konfigurieren einen Projektnamen in das Feld Projektname ein. Die Beispiele in diesem Thema verwenden den Projektnamen ComponentLibrary. Wählen Sie Weiter aus.
  4. Wählen Sie im Dialogfeld Zusätzliche Informationen nicht Seiten und Ansichten unterstützen aus. Klicken Sie auf Erstellen.
  5. Fügen Sie die RCL zu einer Projektmappe hinzu:
    1. Öffnen Sie die Projektmappe.
    2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe. Wählen Sie Hinzufügen>Vorhandenes Projekt aus.
    3. Navigieren Sie zur Projektdatei der RCL.
    4. Wählen Sie die Projektdatei (.csproj) der RCL aus.
  6. Fügen Sie in der App einen Verweis auf die RCL hinzu:
    1. Klicken Sie mit der rechten Maustaste auf das App-Projekt. Wählen Sie Hinzufügen>Projektverweis aus.
    2. Wählen Sie das RCL-Projekt aus. Klicken Sie auf OK.

Nutzen einer Razor-Komponente aus einer RCL

Um Komponenten aus einer RCL in einem anderen Projekt zu nutzen, verwenden Sie einen der folgenden Ansätze:

  • Verwenden Sie den vollständigen Komponententypnamen, der den RCL-Namespace enthält.
  • Einzelne Komponenten können ohne den Namespace der RCL anhand des Namens hinzugefügt werden, wenn die @using-Anweisung von Razor den RCL-Namespace deklariert. Verwenden Sie die folgenden Ansätze:
    • Fügen Sie die @using-Anweisung einzelnen Komponenten hinzu.
    • Fügen Sie die @using-Anweisung in die _Imports.razor-Datei auf oberster Ebene ein, um die Komponenten der Bibliothek für ein ganzes Projekt verfügbar zu machen. Fügen Sie die Anweisung auf beliebiger Ebene zu einer _Imports.razor-Datei hinzu, um den Namespace auf eine einzelne Komponente oder eine Reihe von Komponenten innerhalb eines Ordners anzuwenden. Wenn eine _Imports.razor-Datei verwendet wird, benötigen einzelne Komponenten keine @using-Anweisung für den Namespace der RCL.

In den folgenden Beispielen ist ComponentLibrary eine RCL, die die Component1-Komponente enthält. Die Komponente Component1 ist eine Beispielkomponente, die automatisch zu einer RCL hinzugefügt wird, die aus der RCL-Projektvorlage erstellt wurde, die nicht zur Unterstützung von Seiten und Ansichten erstellt wurde.

Component1.razor in der ComponentLibrary-RCL:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

Verweisen Sie in der App, die die RCL nutzt, auf die Component1-Komponente über ihren Namenspace, wie im folgenden Beispiel gezeigt.

ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

Alternativ können Sie eine @using-Anweisung hinzufügen und die Komponente ohne ihren Namenspace verwenden. Die folgende @using-Anweisung kann auch in einer beliebigen _Imports.razor-Datei in oder über dem aktuellen Ordner verwendet werden.

ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

Für Bibliothekskomponenten, die CSS-Isolierung verwenden, werden die Komponentenstile automatisch für die konsumierende App zur Verfügung gestellt. Es ist nicht erforderlich, die Stylesheets einzelner Komponenten oder die gebündelte CSS-Datei der Bibliothek in der App, die die Bibliothek nutzt, manuell zu verknüpfen oder zu importieren. Die App verwendet CSS-Importe, um auf die gebündelten Stile der RCL zu verweisen. Die gebündelten Stile werden nicht als statische Webressource der App veröffentlicht, die die Bibliothek verwendet. Das Stylesheet der RCL wird für eine Klassenbibliothek mit dem Namen ClassLib und eine Blazor-App mit einem BlazorSample.styles.css-Stylesheet automatisch zur Buildzeit an den Anfang des Stylesheets der App importiert:

@import '_content/ClassLib/ClassLib.bundle.scp.css';

In den vorangehenden Beispielen wird das Stylesheet (Component1.razor.css) von Component1 automatisch eingebunden.

Component1.razor.css in der ComponentLibrary-RCL:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Das Hintergrundbild wird ebenfalls aus der RCL-Projektvorlage eingebunden und befindet sich im Ordner wwwroot der RCL.

wwwroot/background.png in der ComponentLibrary-RCL:

Diagonal gestreiftes Hintergrundbild aus der RCL-Projektvorlage

Um zusätzliche Bibliothekskomponentenstile aus den Stylesheets im Ordner wwwroot der Bibliothek bereitzustellen, fügen Sie dem RCL-Consumer wie im folgenden Beispiel veranschaulicht die Stylesheettags <link> hinzu.

Wichtig

Im Allgemeinen verwenden Bibliothekskomponenten die CSS-Isolation, um Komponentenstile zu bündeln und bereitzustellen. Komponentenstile, die von der CSS-Isolation abhängig sind, werden automatisch für die App verfügbar gemacht, die die RCL verwendet. Es ist nicht erforderlich, die Stylesheets einzelner Komponenten oder die gebündelte CSS-Datei der Bibliothek in der App, die die Bibliothek nutzt, manuell zu verknüpfen oder zu importieren. Das folgende Beispiel gilt für die Bereitstellung von globalen Stylesheets außerhalb der CSS-Isolation, was keine Anforderung für typische Apps ist, die RCLs verwenden.

Im nächsten Beispiel wird das folgende Hintergrundbild verwendet. Wenn Sie das in diesem Abschnitt gezeigte Beispiel implementieren, klicken Sie mit der rechten Maustaste auf das Bild, um es lokal zu speichern.

wwwroot/extra-background.png in der ComponentLibrary-RCL:

Diagonal gestreiftes Hintergrundbild, das der Bibliothek vom Entwickler hinzugefügt wurde

Fügen Sie der RCL ein neues Stylesheet mit einer extra-style-Klasse hinzu.

wwwroot/additionalStyles.css in der ComponentLibrary-RCL:

.extra-style {
    border: 2px dashed blue;
    padding: 1em;
    margin: 1em 0;
    background-image: url('extra-background.png');
}

Fügen Sie der RCL eine Komponente hinzu, die die extra-style-Klasse verwendet.

ExtraStyles.razor in der ComponentLibrary-RCL:

<div class="extra-style">
    <p>
        This component is defined in the <strong>ComponentLibrary</strong> package.
    </p>
</div>

Fügen Sie der App eine Seite hinzu, von der die ExtraStyles-Komponente aus der RCL verwendet.

ConsumeComponent3.razor:

@page "/consume-component-3"
@using ComponentLibrary

<h1>Consume component (<code>additionalStyles.css</code> example)</h1>

<ExtraStyles />

Stellen Sie im <head>-Markup der App eine Verknüpfung mit dem Stylesheet der Bibliothek her (Speicherort des <head>-Inhalts):

Blazor Web Apps:

<link href="@Assets["_content/ComponentLibrary/additionalStyles.css"]" rel="stylesheet">

Eigenständige Blazor WebAssembly-Apps:

<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet">

<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet">

Für Bibliothekskomponenten, die CSS-Isolierung verwenden, werden die Komponentenstile automatisch für die konsumierende App zur Verfügung gestellt. Es ist nicht erforderlich, die Stylesheets einzelner Komponenten oder die gebündelte CSS-Datei der Bibliothek in der App, die die Bibliothek nutzt, manuell zu verknüpfen oder zu importieren. Die App verwendet CSS-Importe, um auf die gebündelten Stile der RCL zu verweisen. Die gebündelten Stile werden nicht als statische Webressource der App veröffentlicht, die die Bibliothek verwendet. Das Stylesheet der RCL wird für eine Klassenbibliothek mit dem Namen ClassLib und eine Blazor-App mit einem BlazorSample.styles.css-Stylesheet automatisch zur Buildzeit an den Anfang des Stylesheets der App importiert:

@import '_content/ClassLib/ClassLib.bundle.scp.css';

In den vorangehenden Beispielen wird das Stylesheet (Component1.razor.css) von Component1 automatisch eingebunden.

Component1.razor.css in der ComponentLibrary-RCL:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Das Hintergrundbild wird ebenfalls aus der RCL-Projektvorlage eingebunden und befindet sich im Ordner wwwroot der RCL.

wwwroot/background.png in der ComponentLibrary-RCL:

Diagonal gestreiftes Hintergrundbild aus der RCL-Projektvorlage

Das folgende Hintergrundbild und Stylesheet wird von der Component1-Beispielkomponente der RCL verwendet. Es ist nicht notwendig, diese statischen Ressourcen einer neuen RCL hinzuzufügen, die mit der RCL-Projektvorlage erstellt wurde, da sie automatisch von der Projektvorlage hinzugefügt werden.

wwwroot/background.png in der ComponentLibrary-RCL:

Diagonal gestreiftes Hintergrundbild, das der Bibliothek von der RCL-Projektvorlage hinzugefügt wurde

wwwroot/styles.css in der ComponentLibrary-RCL:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Um die my-component-CSS-Klasse von Component1 bereitzustellen, stellen Sie eine Verknüpfung mit dem Stylesheet der Bibliothek im <head>-Markup der App (Speicherort des <head>-Inhalts) her:

<link href="_content/ComponentLibrary/styles.css" rel="stylesheet" />

Routingfähige Komponenten aus der RCL verfügbar machen

Um routingfähige Komponenten in der RCL für direkte Anforderungen verfügbar zu machen, muss die Assembly der RCL an den Router der App weitergegeben werden.

Öffnen Sie die App-Komponente der Anwendung (App.razor). Weisen Sie dem AdditionalAssemblies Parameter der Router Komponente eine Assembly Auflistung zu, um die RCL-Assembly einzuschließen. Im folgenden Beispiel wird die ComponentLibrary.Component1-Komponente verwendet, um die RCL-Assembly zu ermitteln.

AdditionalAssemblies="new[] { typeof(ComponentLibrary.Component1).Assembly }"

Weitere Informationen finden Sie unter ASP.NET Core: Routing und Navigation in Blazor.

Erstellen einer RCL mit statischen Objekten im wwwroot-Ordner

Die statischen Ressourcen einer RCL sind für jede App verfügbar, die die Bibliothek nutzt.

Platzieren Sie statische Ressourcen im Ordner wwwroot der RCL und verweisen Sie in der App mit dem folgenden Pfad auf die statischen Ressourcen: _content/{PACKAGE ID}/{PATH AND FILE NAME}. Der Platzhalter {PACKAGE ID} ist diePaket-IDder Bibliothek. Die Paket-ID wird standardmäßig auf den Assemblynamen des Projekts festgelegt, wenn <PackageId> nicht in der Projektdatei angegeben ist. Der Platzhalter {PATH AND FILE NAME} entspricht dem Pfad und Dateinamen unter wwwroot. Dieses Pfadformat wird in der App auch für statische Ressourcen verwendet, die von der RCL hinzugefügten NuGet-Paketen bereitgestellt werden.

Das folgende Beispiel zeigt die Verwendung von statischen RCL-Ressourcen mit einer RCL namens ComponentLibrary und einer App Blazor, die die RCL nutzt. Die App verfügt über einen Projektverweis für die ComponentLibrary-RCL.

Das folgende Jeep®-Bild wird im Beispiel dieses Abschnitts verwendet. Wenn Sie das in diesem Abschnitt gezeigte Beispiel implementieren, klicken Sie mit der rechten Maustaste auf das Bild, um es lokal zu speichern.

wwwroot/jeep-yj.png in der ComponentLibrary-RCL:

Jeep YJ®

Fügen Sie der RCL die folgende JeepYJ-Komponente hinzu.

JeepYJ.razor in der ComponentLibrary-RCL:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

Fügen Sie der App, die die ComponentLibrary-RCL nutzt, die folgende Jeep-Komponente hinzu. Die Jeep-Komponente verwendet:

  • Das Jeep YJ®-Bild aus dem Ordnerwwwroot der ComponentLibrary-RCL.
  • Die JeepYJ-Komponente aus der RCL.

Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Gerenderte Jeep-Komponente:

Jeep-Komponente

Weitere Informationen finden Sie unter Wiederverwendbare Razor-Benutzeroberfläche in Klassenbibliotheken mit ASP.NET Core.

Erstellen einer RCL mit JavaScript-Dateien, die mit Komponenten angeordnet sind

Die Kombination von JavaScript-Dateien (JS) für Razor-Komponenten ist praktisch, um Skripts in einer App zu organisieren.

Razor-Komponenten von Blazor-Apps kombinieren JS-Dateien mithilfe der .razor.js-Erweiterung und können öffentlich mithilfe des Pfads zur Datei im Projekt adressiert werden:

{PATH}/{COMPONENT}.razor.js

  • Der Platzhalter {PATH} ist der Pfad zur Komponente.
  • Der Platzhalter {COMPONENT} ist die Komponente.

Wenn die App veröffentlicht wird, verschiebt das Framework das Skript automatisch in den Webstamm. Skripts werden in bin/Release/{TARGET FRAMEWORK MONIKER}/publish/wwwroot/{PATH}/{COMPONENT}.razor.js verschoben. Die folgenden Platzhalter werden verwendet:

Es ist keine Änderung an der relativen URL des Skripts erforderlich, da Blazor die JS-Datei für Sie in den veröffentlichten statischen Ressourcen platziert.

Dieser Abschnitt und die folgenden Beispiele konzentrieren sich hauptsächlich auf die Erläuterung der Kombination von JS-Dateien. Im ersten Beispiel wird eine kombinierte JS-Datei mit einer gewöhnlichen JS-Funktion veranschaulicht. Im zweiten Beispiel wird die Verwendung eines Moduls zum Laden von Funktionen veranschaulicht. Dieser Ansatz wird für die meisten Produktions-Apps empfohlen. Das Aufrufen von JS über .NET wird vollständig in Aufrufen von JavaScript-Funktionen aus .NET-Methoden in ASP.NET Core Blazor behandelt, wo weitere Erläuterungen zur BlazorJS-API mit zusätzlichen Beispielen vorhanden sind. Die Komponentenlöschung, die im zweiten Beispiel erfolgt, wird unter Lebenszyklus von ASP.NET Core Razor-Komponenten behandelt.

Die folgende JsCollocation1-Komponente lädt ein Skript über eine HeadContent-Komponente und ruft eine JS-Funktion mit IJSRuntime.InvokeAsync auf. Der Platzhalter {PATH} ist der Pfad zur Komponente.

Wichtig

Wenn Sie den folgenden Code für eine Demonstration in einer Test-App verwenden, ändern Sie den Platzhalter {PATH} in den Pfad der Komponente (Beispiel: Components/Pages in .NET 8 oder höher oder Pages in .NET 7 oder früher). In einer Blazor Web App (.NET 8 oder höher) benötigt die Komponente einen interaktiven Rendermodus, der entweder global auf die App oder auf die Komponentendefinition angewendet wird.

Fügen Sie das folgende Skript nach dem Blazor-Skript (-Speicherort des Blazor-Startskripts) hinzu:

<script src="{PATH}/JsCollocation1.razor.js"></script>

JsCollocation1-Komponente ({PATH}/JsCollocation1.razor):

@page "/js-collocation-1"
@inject IJSRuntime JS

<PageTitle>JS Collocation 1</PageTitle>

<h1>JS Collocation Example 1</h1>

<button @onclick="ShowPrompt">Call showPrompt1</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private string? result;

    public async void ShowPrompt()
    {
        result = await JS.InvokeAsync<string>(
            "showPrompt1", "What's your name?");
        StateHasChanged();
    }
}

Die kombinierte JS-Datei wird neben der JsCollocation1-Komponentendatei mit dem Dateinamen JsCollocation1.razor.js platziert. In der JsCollocation1-Komponente wird im Pfad der kombinierten Datei auf das Skript verwiesen. Im folgenden Beispiel akzeptiert die showPrompt1-Funktion den Benutzernamen aus Window prompt() und gibt ihn zur Anzeige an die JsCollocation1-Komponente zurück.

{PATH}/JsCollocation1.razor.js:

function showPrompt1(message) {
  return prompt(message, 'Type your name here');
}

Der vorstehende Ansatz wird nicht für die allgemeine Verwendung in Produktions-Apps empfohlen, da er den Client mit globalen Funktionen verunreinigt. Ein besserer Ansatz für Produktions-Apps besteht darin, JS-Module zu verwenden. Die gleichen allgemeinen Prinzipien gelten für das Laden eines JS-Moduls aus einer kombinierten JS-Datei, wie das nächste Beispiel zeigt.

Mit der OnAfterRenderAsync-Methode der folgenden JsCollocation2-Komponente wird ein JS-Modul in module geladen, bei dem es sich um ein IJSObjectReference-Element der Komponentenklasse handelt. module wird verwendet, um die showPrompt2-Funktion aufzurufen. Der Platzhalter {PATH} ist der Pfad zur Komponente.

Wichtig

Wenn Sie den folgenden Code für eine Demonstration in einer Test-App verwenden, ändern Sie den Platzhalter {PATH} in den Pfad der Komponente. In einer Blazor Web App (.NET 8 oder höher) benötigt die Komponente einen interaktiven Rendermodus, der entweder global auf die App oder auf die Komponentendefinition angewendet wird.

JsCollocation2-Komponente ({PATH}/JsCollocation2.razor):

@page "/js-collocation-2"
@implements IAsyncDisposable
@inject IJSRuntime JS

<PageTitle>JS Collocation 2</PageTitle>

<h1>JS Collocation Example 2</h1>

<button @onclick="ShowPrompt">Call showPrompt2</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private IJSObjectReference? module;
    private string? result;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            /*
                Change the {PATH} placeholder in the next line to the path of
                the collocated JS file in the app. Examples:

                ./Components/Pages/JsCollocation2.razor.js (.NET 8 or later)
                ./Pages/JsCollocation2.razor.js (.NET 7 or earlier)
            */
            module = await JS.InvokeAsync<IJSObjectReference>("import",
                "./{PATH}/JsCollocation2.razor.js");
        }
    }

    public async void ShowPrompt()
    {
        if (module is not null)
        {
            result = await module.InvokeAsync<string>(
                "showPrompt2", "What's your name?");
            StateHasChanged();
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

{PATH}/JsCollocation2.razor.js:

export function showPrompt2(message) {
  return prompt(message, 'Type your name here');
}

Die Verwendung von Skripts und Modulen für verbundene JS-Elemente in einer Razor-Klassenbibliothek (Razor Class Library, RCL) wird nur für den Blazor-Interoperabilitätsmechanismus JS basierend auf der IJSRuntime-Schnittstelle unterstützt. Wenn Sie die JavaScript [JSImport]/[JSExport]-Interoperabilität implementieren, finden Sie weitere Informationen unter JavaScript JSImport/JSExport-Interoperabilität mit ASP.NET Core Blazor.

Für Skripts oder Module, die von einer Razor-Klassenbibliothek (RCL) mit IJSRuntime-basierter JS-Interoperabilität bereitgestellt werden, wird der folgende Pfad verwendet:

./_content/{PACKAGE ID}/{PATH}/{COMPONENT}.{EXTENSION}.js

  • Das Pfadsegment für das aktuelle Verzeichnis (./) ist erforderlich, damit der korrekte Pfad zu statischen Objekten in der JS-Datei erstellt werden kann.
  • Der Platzhalter {PACKAGE ID} ist der Paketbezeichner der RCL (oder der Bibliotheksname für eine Klassenbibliothek, auf die von der App verwiesen wird).
  • Der Platzhalter {PATH} ist der Pfad zur Komponente. Wenn sich eine Razor-Komponente im Stammverzeichnis der RCL befindet, wird das Pfadsegment nicht eingeschlossen.
  • Der Platzhalter {COMPONENT} ist der Komponentenname.
  • Der Platzhalter {EXTENSION} entspricht der Erweiterung der Komponente, also razor oder cshtml.

Im folgenden Beispiel für die Blazor-App gilt:

  • Der Paketbezeichner der RCL ist AppJS.
  • Die Skripts eines Moduls werden für die Komponente JsCollocation3 (JsCollocation3.razor) geladen.
  • Die Komponente JsCollocation3 befindet sich im Components/Pages-Ordner der RCL.
module = await JS.InvokeAsync<IJSObjectReference>("import", 
    "./_content/AppJS/Components/Pages/JsCollocation3.razor.js");

Bereitstellen von Komponenten und statischen Ressourcen für mehrere gehostete Blazor-Apps

Weitere Informationen finden Sie unter Mehrere gehostete ASP.NET Core Blazor WebAssembly-Apps.

Clientseitiges Browserkompatibilitäts-Analysetool

Clientseitige Apps sind auf die gesamte .NET-API-Oberfläche ausgerichtet. Aufgrund von Browsersandboxeinschränkungen werden aber nicht alle .NET-APIs in WebAssembly unterstützt. Nicht unterstützte APIs lösen PlatformNotSupportedException bei der Ausführung in Webassembly aus. Ein Plattformkompatibilitäts-Analysetool warnt den Entwickler, wenn die API APIs verwendet, die nicht von den Zielplattformen der App unterstützt werden. Für clientseitige Apps bedeutet das eine Überprüfung, ob die APIs in Browsern unterstützt werden. Das Kommentieren von .NET Framework-APIs für das Kompatibilitätsanalysetool Analyzer ist ein fortlaufenden Prozess, sodass nicht alle .NET Framework-APIs derzeit mit Anmerkungen versehen sind.

Blazor Web Apps die interaktive WebAssembly-Komponenten aktivieren, Blazor WebAssembly-Apps und RCL-Projekte aktivieren automatisch Prüfungen der Browserkompatibilität, indem sie browser als unterstützte Plattform mit dem MSBuild-Element SupportedPlatform hinzufügen. Bibliotheksentwickler können das SupportedPlatform-Element manuell zur Projektdatei einer Bibliothek hinzufügen, um das Feature zu aktivieren:

<ItemGroup>
  <SupportedPlatform Include="browser" />
</ItemGroup>

Geben Sie beim Erstellen einer Bibliothek an, dass eine bestimmte API in Browsern nicht unterstützt wird, indem Sie browser für UnsupportedOSPlatformAttributeangeben:

using System.Runtime.Versioning;

...

[UnsupportedOSPlatform("browser")]
private static string GetLoggingDirectory()
{
    ...
}

Weitere Informationen finden Sie unter Kommentieren von APIs als nicht unterstützt auf bestimmten Plattformen (GitHub-Repositorydotnet/designs).

JavaScript-Isolation in JavaScript-Modulen

Blazor aktiviert JavaScript-Isolierung in JavaScript-Standardmodulen. JavaScript-Isolierung bietet die folgenden Vorteile:

  • Importiertes JavaScript verschmutzt nicht mehr den globalen Namespace.
  • Consumer der Bibliothek und Komponenten müssen das zugehörige JavaScript nicht manuell importieren.

Weitere Informationen finden Sie unter Aufrufen von JavaScript-Funktionen über .NET-Methoden in Blazor in ASP.NET Core.

Umgehen der Kürzung von über JavaScript aufrufbaren .NET-Methoden

Durch die erneute Verknüpfung der Runtime werden durch die JavaScript-Klasseninstanz aufrufbare .NET-Methoden gekürzt, sofern sie nicht explizit geschützt sind. Weitere Informationen finden Sie unter Aufrufen von .NET-Methoden über JavaScript-Funktionen in ASP.NET Core Blazor.

Erstellen, Verpacken und Liefern an NuGet

Da Razor-Klassenbibliotheken, die Razor-Komponenten enthalten, .NET-Standardbibliotheken sind, unterscheidet sich das Packen und Versenden dieser Bibliotheken an NuGet nicht von dem Packen und Versenden jeder anderen Bibliothek an NuGet. Das Verpacken wird mit dem Befehl dotnet pack in einer Befehlsshell durchgeführt:

dotnet pack

Laden Sie das Paket mit dem Befehl dotnet nuget push in einer Befehlsshell in NuGet hoch.

Marken

Jeep und Jeep YJ sind eingetragene Marken von FCA US LLC (Stellantis NV).

Zusätzliche Ressourcen