Seiten, Routing und Layouts

Artikel
06/08/2023

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, wird der Inhalt der Seite auf dem Server dynamisch gerendert. Das Rendern berücksichtigt sowohl den HTML-Markup der Seite als auch die zugehörigen Server-Steuerelemente.

In Blazor ist jede Seite in der App eine Komponente, die in der Regel in einer Razor-Datei mit einer oder mehreren angegebenen Routen definiert ist. Das Routing erfolgt größtenteils auf Clientseite, ohne eine bestimmte Server-Anforderung einzubeziehen. Der Browser sendet zuerst eine Anforderung an die Stammadresse der App. Eine Router-Stammkomponente in der Blazor-App verarbeitet dann abfangende 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 bestimmte Route sendet, die nicht der Stamm der App ist. Anforderungen für Deep Links, die an den Server gesendet werden, werden an die Blazor-App weitergeleitet, die dann die Anforderung auf der Clientseite an die richtige Komponente weiterleitet.

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;
    }
}

Seiten erstellen

Um eine Seite in Blazor zu erstellen, erstellen Sie eine Komponente und fügen die @page-Razor-Direktive hinzu, um die Route für die Komponente anzugeben. Die @page-Direktive nimmt einen einzelnen Parameter, welcher der Komponente hinzugefügt werden soll, an.

@page "/counter"

Der Routenvorlagen-Parameter ist erforderlich. Im Gegensatz zu ASP.NET Web Forms wird die Route zu einer Blazor Komponente nicht von Ihrem Datei Speicherort abgeleitet (obwohl dies möglicherweise eine in der Zukunft hinzugefügte Funktion).

Die Syntax der Routenvorlage ist die gleiche grundlegende Syntax, welche für das Routing in ASP.NET Web Forms verwendet wird. Routen Parameter werden in der Vorlage mithilfe von Klammern angegeben. Blazor bindet Routenwerte an Komponenten-Parameter mit dem gleichen Namen (ohne Beachtung der Groß-/Kleinschreibung).

@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 Routen-Parameters angeben. Um beispielsweise die Produkt-ID auf zu beschränken, gilt Folgendes int:

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

<h1>Product @Id</h1>

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

Eine vollständige Liste der von unterstützten Routen-Einschränkungen Blazor sehen Sie Routen-Einschränkungen.

Routerkomponente

Das Routing in Blazor wird von der Router-Komponente gehandhabt. 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 ermittelt die routingfähigen 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 übereinstimmende Komponente kein Layout hat, wird der optional angegebene DefaultLayout verwendet.

Die LayoutView-Komponente rendert ihren untergeordneten Inhalt innerhalb des angegebenen Layouts. Im weiteren Verlauf dieses Kapitels betrachten wir die Layouts ausführlicher.

In ASP.NET Web Forms wird die Navigation zu einer anderen Seite durch Zurückgeben einer Umleitungsantwort an den Browser auslöst. Beispiel:

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

Das Zurückgeben einer Umleitungsantwort ist in der Regel nicht möglich Blazor. Blazor verwendet kein Anforderungs-Antwort-Modell. Sie können Browser-Navigationen jedoch direkt wie bei JavaScript auslösen.

Blazor stellt einen NavigationManager-Dienst bereit, der für folgende Aktionen verwendet werden kann:

Aktuelle Browser Adresse erhalten
Basisadresse erhalten
Navigationen auslösen
Benachrichtigung erhalten, 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-Member sehen Sie -URI und Navigationszustandshilfen.

Basis-URLs

Wenn Ihre Blazor-App unter einem Basispfad bereitgestellt wird, müssen Sie die Basis-URL in den Seiten Metadaten mithilfe des <base>-Tags für die Routing-to-Work-Eigenschaft angeben. Wenn die Hostseite für die App mithilfe von Razor gerendert wird, können Sie die ~/-Syntax verwenden, um die Basisadresse der App anzugeben. Wenn die Hostseite eine statische HTML ist, müssen Sie die Basis-URL explizit angeben.

<base href="~/" />

Seitenlayout

Das Seitenlayout in ASP.NET-Web Forms wird von Master-Seiten gehandhabt. Master-Seiten definieren eine Vorlage mit einem oder mehreren Inhaltsplatzhaltern, die dann von einzelnen Seiten bereitgestellt werden können. Master-Seiten werden in .master-Dateien definiert und beginnen mit der <%@ Master %>-Direktive. Der Inhalt der Master-Dateien ist so codiert wie eine aspx-Seite, 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 wird das Seitenlayout mithilfe von Layoutkomponenten gehandhabt. Layoutkomponenten erben von LayoutComponentBase, das eine einzelne Body-Eigenschaft des Typs RenderFragment definiert, was zum Rendering der Inhalte 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 im Inhalt des angegebenen Layouts an der Position gerendert, an der das Layout die Body-Eigenschaft rendert.

Verwenden Sie die @layout-Anweisung, um ein Layout auf eine Komponente anzuwenden:

@layout MainLayout

Sie können das Layout für alle Komponenten in einem Ordner und in Unterordnern mithilfe einer _Imports Razor-Datei angeben. Sie können auch ein Standardlayout für alle Seiten mithilfe der -Routerkomponente angeben.

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

Master-Seiten in ASP.net-Web Forms können verschachtelt werden. Das heißt, eine Master-Seite kann auch eine Master-Seite verwenden. Layoutkomponenten in Blazor werden möglicherweise ebenfalls verschachtelt. Sie können eine Layoutkomponente auf eine Layoutkomponente anwenden. Der Inhalt des inneren Layouts wird innerhalb des äußeren Layouts 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 Stamm-HTML-Elemente für eine Seite (<html>, <body>, <head> usw.). Die Stamm-HTML-Elemente werden stattdessen auf der Hostseite der Blazor-App definiert, die zum Rendering der anfänglichen HTML-Inhalte für die App verwendet wird (siehe -Bootstrap Blazor). Die Hostseite kann mehrere Stammkomponenten für die App mit umgebenden Markup rendern.

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

Zurück Weiter

Freigeben über

Seiten, Routing und Layouts

Seiten erstellen

Routerkomponente

Navigation

Basis-URLs

Seitenlayout

Zusätzliche Ressourcen