Seiten, Routing und Layouts

2025-06-19

Tipp

Diese Inhalte sind ein Auszug aus dem eBook „Blazor for ASP NET Web Forms Developers for Azure“, verfügbar unter .NET Docs oder als kostenlos herunterladbare PDF-Datei, die offline gelesen werden kann.

PDF herunterladen

ASP.NET Web Forms-Apps bestehen aus Seiten, die in .aspx Dateien definiert sind. Die Adresse jeder Seite basiert auf dem physischen Dateipfad im Projekt. Wenn ein Browser eine Anforderung an die Seite sendet, werden die Inhalte der Seite dynamisch auf dem Server gerendert. Das Rendern ist sowohl für das HTML-Markup der Seite als auch für die Serversteuerelemente vorgesehen.

In Blazor, jede Seite in der App ist eine Komponente, die in der Regel in einer RAZOR-Datei definiert ist, mit einer oder mehreren angegebenen Routen. Das Routing erfolgt hauptsächlich clientseitig, ohne eine bestimmte Serveranforderung einzubeziehen. Der Browser sendet zunächst eine Anforderung an die Stammadresse der App. Eine Stammkomponente Router in der Blazor App behandelt dann das Abfangen von Navigationsanforderungen und leitet sie an die richtige Komponente weiter.

Blazor unterstützt auch deep linking. Deep-Linking tritt auf, wenn der Browser eine Anforderung an eine andere Route als den Stamm der App sendet. Anforderungen für an den Server gesendete Deep-Links werden an die Blazor App weitergeleitet, wodurch die Anforderungsclientseite an die richtige Komponente weitergeleitet wird.

Eine einfache Seite in ASP.NET Web Forms kann das folgende Markup enthalten:

Name.aspx

<%@ Page Title="Name" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Name.aspx.cs" Inherits="WebApplication1.Name" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        What is your name?<br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
    </div>
    <div>
        <asp:Literal ID="Literal1" runat="server" />
    </div>
</asp:Content>

Name.aspx.cs

public partial class Name : System.Web.UI.Page
{
    protected void Button1_Click1(object sender, EventArgs e)
    {
        Literal1.Text = "Hello " + TextBox1.Text;
    }
}

Die entsprechende Seite in einer Blazor App würde wie folgt aussehen:

Name.razor

@page "/Name"
@layout MainLayout

<div>
    What is your name?<br />
    <input @bind="text" />
    <button @onclick="OnClick">Submit</button>
</div>
<div>
    @if (name != null)
    {
        @:Hello @name
    }
</div>

@code {
    string text;
    string name;

    void OnClick() {
        name = text;
    }
}

Erstellen von Seiten

Um eine Seite in Blazorzu erstellen, erstellen Sie eine Komponente, und fügen Sie die @page Razor-Direktive hinzu, um die Route für die Komponente anzugeben. Die @page Direktive verwendet einen einzelnen Parameter, bei dem es sich um die Routenvorlage handelt, die dieser Komponente hinzugefügt werden soll.

@page "/counter"

Der Routenvorlagenparameter ist erforderlich. Im Gegensatz zu ASP.NET Webformularen wird die Route zu einer Blazor Komponente nicht vom Dateispeicherort abgeleitet (obwohl dies in Zukunft ein Feature sein kann).

Die Syntax der Routenvorlage ist die gleiche grundlegende Syntax, die für das Routing in ASP.NET Web Forms verwendet wird. Routenparameter werden in der Vorlage mithilfe von geschweiften Klammern angegeben. Blazor bindet Routenwerte an Komponentenparameter mit demselben Namen (Groß-/Kleinschreibung wird nicht beachtet).

@page "/product/{id}"

<h1>Product @Id</h1>

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

Sie können auch Einschränkungen für den Wert des Routenparameters angeben. Um beispielsweise die Produkt-ID so zu beschränken, dass sie eine int ist:

@page "/product/{id:int}"

<h1>Product @Id</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

Eine vollständige Liste der routeneinschränkungen, die von Blazor"Route constraints" unterstützt werden, finden Sie unter "Route constraints".

Routerkomponente

Das Routing in Blazor wird von der Router-Komponente abgewickelt. Die Router Komponente wird in der Regel in der Stammkomponente der App (App.razor) verwendet.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Die Router Komponente entdeckt die routbaren Komponenten im angegebenen AppAssembly und im optional angegebenen AdditionalAssemblies. Wenn der Browser navigiert, fängt Router die Navigation ab und rendert den Inhalt des Found-Parameters mit dem extrahierten RouteData, wenn eine Route mit der Adresse übereinstimmt, andernfalls rendert Router den NotFound-Parameter.

Die RouteView-Komponente übernimmt das Rendern der übereinstimmenden, von angegebenen RouteData-Komponente mit dem zugehörigen Layout, wenn sie über eine verfügt. Wenn die übereinstimmene Komponente nicht über ein Layout verfügt, wird optional die angegebene DefaultLayout Komponente verwendet.

Die LayoutView-Komponente rendert ihren untergeordneten Inhalt innerhalb des angegebenen Layouts. Weiter unten in diesem Kapitel werden wir uns die Layouts genauer ansehen.

In ASP.NET Web Forms lösen Sie die Navigation zu einer anderen Seite aus, indem Sie eine Umleitungsantwort an den Browser zurückgeben. Beispiel:

protected void NavigateButton_Click(object sender, EventArgs e)
{
    Response.Redirect("Counter");
}

Das Zurückgeben einer Umleitungsantwort ist typischerweise in Blazor nicht möglich. Blazor verwendet kein Anforderungsantwortmodell. Sie können browsernavigationen jedoch direkt auslösen, wie sie mit JavaScript möglich sind.

Blazor stellt einen NavigationManager Dienst bereit, der für Folgendes verwendet werden kann:

Abrufen der aktuellen Browseradresse
Basisadresse abrufen
Navigationen auslösen
Erhalten einer Benachrichtigung, wenn sich die Adresse ändert

Verwenden Sie die NavigateTo Methode, um zu einer anderen Adresse zu navigieren:

@page "/"
@inject NavigationManager NavigationManager

<button @onclick="Navigate">Navigate</button>

@code {
    void Navigate() {
        NavigationManager.NavigateTo("counter");
    }
}

Eine Beschreibung aller NavigationManager Mitglieder können Sie unter URI- und Navigationszustandshilfen finden.

Basis-URLs

Wenn Ihre Blazor App unter einem Basispfad bereitgestellt wird, müssen Sie die Basis-URL in den Seitenmetadaten mithilfe des <base> Tags angeben, damit das Routing korrekt funktioniert. Wenn die Hostseite für die App mit Razor server gerendert wird, können Sie die ~/ Syntax verwenden, um die Basisadresse der App anzugeben. Wenn die Hostseite statischer HTML-Code ist, müssen Sie die Basis-URL explizit angeben.

<base href="~/" />

Seitenlayout

Das Seitenlayout in ASP.NET-Webformularen wird von Masterseiten verwaltet. Masterseiten definieren eine Vorlage mit einem oder mehreren Inhaltsplatzhaltern, die dann von einzelnen Seiten verwendet werden können. Masterseiten werden in .master-Dateien definiert und beginnen mit der <%@ Master %> Direktive. Der Inhalt der MASTER-Dateien ist wie eine .aspx Seite codiert, aber mit dem Hinzufügen von <asp:ContentPlaceHolder> Steuerelementen, um zu markieren, wo Seiten Inhalte bereitstellen können.

Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <form runat="server">
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>
    </form>
</body>
</html>

In Blazor, Sie behandeln das Seitenlayout mithilfe von Layoutkomponenten. Layoutkomponenten erben von LayoutComponentBase, die eine einzelne Body Eigenschaft vom Typ RenderFragmentdefiniert, die zum Rendern des Inhalts der Seite verwendet werden kann.

MainLayout.razor

@inherits LayoutComponentBase
<h1>Main layout</h1>
<div>
    @Body
</div>

Wenn die Seite mit einem Layout gerendert wird, wird die Seite innerhalb des Inhalts des angegebenen Layouts an der Position gerendert, an der das Layout seine Body Eigenschaft rendert.

Verwenden Sie die @layout Direktive, um ein Layout auf eine Seite anzuwenden:

@layout MainLayout

Sie können das Layout für alle Komponenten in einem Ordner und Unterordner mithilfe einer datei _Imports.razor angeben. Sie können auch ein Standardlayout für alle Ihre Seiten mithilfe der Router-Komponente angeben.

Master Seiten können mehrere Inhaltsplatzhalter definieren, aber Layouts in Blazor verfügen nur über eine einzige Body-Eigenschaft. Diese Einschränkung von Blazor Layoutkomponenten wird hoffentlich in einer zukünftigen Version behoben werden.

Masterseiten in ASP.NET Web-Formularen können geschachtelt werden. Das heißt, eine Master-Seite kann auch eine Master-Seite verwenden. Auch in Blazor können Layoutkomponenten geschachtelt werden. Sie können eine Layoutkomponente auf eine Layoutkomponente anwenden. Der Inhalt des inneren Layouts wird im äußeren Layout gerendert.

ChildLayout.razor

@layout MainLayout
<h2>Child layout</h2>
<div>
    @Body
</div>

Index.razor

@page "/"
@layout ChildLayout
<p>I'm in a nested layout!</p>

Die gerenderte Ausgabe für die Seite würde dann wie folgt lauten:

<h1>Main layout</h1>
<div>
    <h2>Child layout</h2>
    <div>
        <p>I'm in a nested layout!</p>
    </div>
</div>

Layouts in Blazor definieren in der Regel nicht die HTML-Stammelemente für eine Seite (<html>, <body>, <head> usw.). Die HTML-Stammelemente werden stattdessen auf der Hostseite einer Blazor App definiert, die zum Rendern des anfänglichen HTML-Inhalts für die App verwendet wird (siehe Bootstrap Blazor). Die Hostseite kann mehrere Stammkomponenten für die App mit umgebendem Markup rendern.

Komponenten in Blazor, einschließlich Seiten, können <script>-Tags nicht rendern. Diese Renderingeinschränkung ist vorhanden, da <script> Tags einmal geladen werden und dann nicht mehr geändert werden können. Unerwartetes Verhalten kann auftreten, wenn Sie versuchen, die Tags dynamisch mithilfe der Razor-Syntax zu rendern. Stattdessen sollten alle <script> Tags zur Hostseite der App hinzugefügt werden.

Zurück Weiter

Freigeben über

Seiten, Routing und Layouts

Erstellen von Seiten

Routerkomponente

Navigationssystem

Basis-URLs

Seitenlayout

Zusätzliche Ressourcen