In diesem Artikel werde ich Ihnen zeigen, wie Sie einer vorhandenen Razor Pages-App Blazor-basierte Seiten hinzufügen können.
Vorwort
Blazor wird in zwei Wochen Gold bekommen . Viele Dinge im Projekt unterliegen noch ziemlich drastischen Änderungen, und die neueste Vorschau 9 hat die Interaktion zwischen Rasiermesserseiten und Blazorkomponenten erheblich erschwert: Es ist nicht mehr möglich, Parameter von einer Rasiermesserseite an eine Blazorkomponente zu übergeben
Html.RenderComponentAsync. Dies kann sich in Zukunft ändern, aber es ist wahrscheinlich, dass es in .NET Core 3.0 mit dieser Einschränkung angezeigt wird.
Wenn Sie Ihre vorhandene Razor Pages-App dennoch mit Blazor Magic erweitern möchten, besteht eine Lösung darin, Ihre Seiten vollständig in Blazor zu erstellen. In diesem Artikel werde ich Ihnen zeigen, wie Sie einer vorhandenen Razor Pages-App Blazor Pages hinzufügen können, wobei Teile der App mit Razor Pages und andere mit Blazor Pages erstellt werden. Das Layout ist für beide Seitentypen gleich .
Schritt eins: Unterstützung für Blazor
Wir haben also eine vorhandene Razor Pages-Anwendung, die in .NET Core 3 konvertiert wurde.
Zunächst müssen Sie Ihrer Anwendung Blazor-Unterstützung hinzufügen. Mit dieser Unterstützung können Sie Blazor-Komponenten von einer Razor-Seite rendern. Die offizielle Dokumentation führt Sie vollständig durch den Prozess, aber hier ist ein kurzer Überblick.
Startup.cs:
Wir müssen hinzufügen
Services.AddServerSideBlazorzu ConfigureServicesund endpoints.MapBlazorHubin Configure:
_Layout.cshtml : Die Blazor
JS-Bibliothek wird benötigt, um Blazor auf der Serverseite zu verbinden. Es kann hinzugefügt werden zu
_Layout.cshtml:
?
<script src="_framework/blazor.server.js"></script>_Imports.razor:
Wir brauchen auch eine neue Datei mit dem Namen
_Imports.razor. Es sollte zum Ordner "Seiten" hinzugefügt werden:
_Imports.razorDient zum Festlegen der using-Anweisungen für Ihre Blazor-Komponenten. Sie können mit folgendem beginnen
:?
@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components.WebUnd das ist alles . Unsere App unterstützt jetzt Blazor. Können wir dies überprüfen, indem wir die klassische Counter-Komponente in unsere Anwendung kopieren
?
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}Und bearbeiten Sie
Privacy.cshtml, um die Zählerkomponente einzuschließen:
<a href="https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application#">?</a>
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
<component>@(await Html.RenderComponentAsync<Counter>(RenderMode.Server))</component>Wenn wir die Anwendung starten, sollte auf unserer Seite ein funktionierender Zähler angezeigt werden:
Im nächsten Teil dieses Artikels werde ich Ihnen zeigen, wie Sie Ihre Razor Pages-Anwendung so ändern können, dass Sie nicht nur Komponenten zu vorhandenen Seiten hinzufügen, sondern vollständige Blazor-Seiten erstellen können.
Schritt zwei: Unterstützung für Blazor Pages
Unsere Blazor-Komponente definiert eine Route
“/counter”:
Aber das Befolgen funktioniert nicht:
Unser Ziel ist es, das Routing zu Blazor-Seiten zum Laufen zu bringen. Und wir möchten, dass Blazor-Seiten dasselbe Layout wie Razor-Seiten verwenden. Dafür brauchen wir ein paar Dinge, beginnend mit dem Router .
App.razor:
Erstellen Sie eine neue Datei
App.razorim OrdnerPages
Router-Komponente ist definiert in
App.razor:
?
@using Microsoft.AspNetCore.Components.Routing
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData"/>
</Found>
<NotFound>
<h1>Page not found</h1>
<p>Sorry, but there's nothing here!</p>
</NotFound>
</Router>Der Router scannt automatisch alle Blazor-Komponenten mithilfe der Seitenanweisung und fügt ihnen Routen hinzu.
_Host.cshtml:
Wir benötigen auch eine Seite zum Hosten der Blazor-Seiten. Es kann aufgerufen werden, wie Sie möchten, aber standardmäßig werden Blazor-Vorlagen verwendet
_Host.cshtml, was für uns (und alle anderen) in Ordnung ist. In können _Host.cshtmlwir ein Layout definieren, das in unserem Fall das gleiche ist wie für Razor-Seiten.
_Host.cshtmlenthält den Aufruf Html.RenderComponentAsync:
?
@page "/blazor"
@{
Layout = "_Layout";
}
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>Startup.cs:
Und zum Schluss noch eine kleine Ergänzung zur Methode
Configure Startup.cs. Früher haben wir hinzugefügt MapBlazorHub, und jetzt müssen wir einen Anruf hinzufügen, MapFallbackToPageder auf den neuen verweist _Host.cshtml:
Und das war's! Jetzt müssen wir nur noch unser Setup testen. Fügen Sie Ihrem Layout einen Blazor-Seitenzähler (Counter) hinzu, indem Sie Folgendes bearbeiten
Pages/Shared/_Layout.cshtml:
Wenn wir die App starten, wird in unserer Razor Pages-App eine funktionierende Blazor-Seite angezeigt: Die
Unterstützung für das Hinzufügen von Blazor-Komponenten zu Razor Pages wurde nicht unterbrochen:
Anmerkungen
Ein paar Dinge zu beachten:
- Blazor-Routen funktionieren nur, wenn sie auf die Wurzel zeigen. Wenn beispielsweise "/ counter" in "/ counter" geändert wird, kann die
“/products/counter”Seite die erforderliche Seite nicht ladenblazor.server.js. Wir werden stattdessen eine 404 bekommen. Es sollte möglich sein, das Skript-Tag so zu ändern, dass es das erforderliche Skript unabhängig vom Speicherort laden kann, aber das scheint sich von vor 8 auf vor 9 geändert zu haben, und ich konnte es nicht zum Laufen bringen. Hier ist ein 404-Screenshot, der das Problem zeigt:
- Wenn Sie es schaffen, das Skript zu laden, werden Sie wahrscheinlich auf dieselben Probleme mit dem Blazor-Hub stoßen: Skripte versuchen, den Hub in / products / blazor anstelle von blazor zu finden. Um dies zu umgehen, können Sie manuell eine Verbindung zwischen dem Server und dem Browser herstellen:
?
<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start({
configureSignalR: function (builder) {
builder.withUrl('/_blazor');
}
});
</script>Beispielcode
Beispielcode für dieses Projekt ist auf GitHub verfügbar .
Möchten Sie mehr über unseren Kurs erfahren? Hier gehts .