Stránky, směrování a rozložení

Článek
03/02/2024

Tip

Tento obsah je výňatek z eBooku pro Blazor vývojáře webových formulářů ASP NET pro Azure, který je k dispozici na webu .NET Docs nebo jako bezplatný soubor PDF ke stažení, který si můžete přečíst offline.

Stáhnout PDF

ASP.NET aplikace Webové formuláře se skládají ze stránek definovaných v .aspx souborech. Adresa každé stránky je založená na fyzické cestě k souboru v projektu. Když prohlížeč odešle na stránku požadavek, obsah stránky se dynamicky vykresluje na serveru. Vykreslovací účty pro kód HTML stránky i jeho serverové ovládací prvky.

Každá Blazorstránka v aplikaci je komponenta, která je obvykle definována v souboru .razor s jednou nebo více zadanými trasami. Směrování většinou probíhá na straně klienta bez zapojení konkrétního požadavku na server. Prohlížeč nejprve odešle požadavek na kořenovou adresu aplikace. Kořenová Router komponenta v Blazor aplikaci pak zpracovává zachycování navigačních požadavků a předává je správné komponentě.

Blazor podporuje také přímé propojení. K hloubkovým propojením dochází v případě, že prohlížeč odešle požadavek na jinou trasu než kořen aplikace. Požadavky na přímé odkazy odeslané na server se směrují do Blazor aplikace, která pak směruje požadavek na straně klienta na správnou komponentu.

Jednoduchá stránka ve webových formulářích ASP.NET může obsahovat následující kód:

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

Ekvivalentní stránka v Blazor aplikaci by vypadala takto:

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

Vytvoření stránek

Chcete-li vytvořit stránku v Blazor, vytvořte komponentu a přidejte direktivu @page Razor pro určení trasy pro komponentu. Direktiva @page přebírá jeden parametr, což je šablona trasy, která se má přidat do této komponenty.

@page "/counter"

Parametr šablony trasy je povinný. Na rozdíl od ASP.NET webových formulářů se trasa ke komponentě Blazorneodvozuje z umístění souboru (i když to může být funkce přidaná v budoucnu).

Syntaxe šablony trasy je stejná základní syntaxe, která se používá pro směrování ve webových formulářích ASP.NET. Parametry trasy se v šabloně zadají pomocí závorek. Blazor vytvoří vazbu hodnot směrování na parametry komponenty se stejným názvem (nerozlišuje malá a velká písmena).

@page "/product/{id}"

<h1>Product @Id</h1>

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

Můžete také zadat omezení hodnoty parametru trasy. Pokud chcete například omezit ID produktu na int:

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

<h1>Product @Id</h1>

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

Úplný seznam omezení tras podporovaných Blazorpomocí omezení trasy najdete v tématu Omezení trasy.

Komponenta směrovače

Směrování zpracovává Blazor komponenta Router . Komponenta Router se obvykle používá v kořenové komponentě aplikace (App.razor).

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

Komponenta Router zjistí směrovatelné komponenty v zadaném AppAssembly a volitelném zadaném AdditionalAssembliesobjektu . Když prohlížeč přejde, Router zachytí navigaci a vykreslí obsah jeho Found parametru s extrahovaným RouteData , pokud trasa odpovídá adrese, jinak Router vykresluje jeho NotFound parametr.

Komponenta RouteView zpracovává vykreslení odpovídající komponenty určené rozložením RouteData , pokud má. Pokud odpovídající komponenta nemá rozložení, použije se volitelně zadaná DefaultLayout komponenta.

Komponenta LayoutView vykreslí podřízený obsah v zadaném rozložení. Podrobněji se podíváme na rozložení dále v této kapitole.

Ve ASP.NET webových formulářů aktivujete navigaci na jinou stránku vrácením odpovědi přesměrování do prohlížeče. Příklad:

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

Vrácení odpovědi na přesměrování není obvykle možné v Blazor. Blazor nepoužívá model žádosti a odpovědi. Navigaci v prohlížeči ale můžete aktivovat přímo, jak je to možné s JavaScriptem.

BlazorNavigationManager poskytuje službu, která se dá použít k:

Získání aktuální adresy prohlížeče
Získání základní adresy
Aktivace navigace
Upozorňování na změny adresy

Pokud chcete přejít na jinou adresu, použijte metodu NavigateTo :

@page "/"
@inject NavigationManager NavigationManager

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

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

Popis všech NavigationManager členů najdete v pomocných rutinách URI a navigačního stavu.

Základní adresy URL

Pokud je vaše Blazor aplikace nasazená v základní cestě, musíte zadat základní adresu URL v metadatech stránky pomocí značky <base> pro směrování do pracovní vlastnosti. Pokud se na stránce hostitele aplikace vykresluje server pomocí Razoru, můžete pomocí ~/ syntaxe zadat základní adresu aplikace. Pokud je hostitelská stránka statická ve formátu HTML, musíte explicitně zadat základní adresu URL.

<base href="~/" />

Rozložení stránky

Rozložení stránky ve webových formulářích ASP.NET zpracovává stránky předlohy. Stránky předlohy definují šablonu s jedním nebo více zástupnými symboly obsahu, které je pak možné zadat jednotlivými stránkami. Stránky předlohy jsou definovány v souborech .master a začínají direktivou <%@ Master %> . Obsah souborů .master je kódován jako .aspx stránka, ale s přidáním ovládacích <asp:ContentPlaceHolder> prvků, které označují, kde stránky mohou poskytovat obsah.

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>

V Blazoraplikaci zpracováváte rozložení stránky pomocí součástí rozložení. Komponenty rozložení dědí z LayoutComponentBase, která definuje jednu Body vlastnost typu RenderFragment, kterou lze použít k vykreslení obsahu stránky.

MainLayout.razor

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

Při vykreslení stránky s rozložením se stránka vykreslí v rámci obsahu zadaného rozložení v umístění, kde rozložení vykresluje jeho Body vlastnost.

Pokud chcete použít rozložení na stránku, použijte direktivu @layout :

@layout MainLayout

Pomocí souboru _Imports.razor můžete určit rozložení pro všechny komponenty ve složce a podsložkách. Pomocí komponenty Směrovač můžete také zadat výchozí rozložení pro všechny stránky.

Stránky předlohy můžou definovat více zástupných symbolů obsahu, ale rozložení mají Blazor pouze jednu Body vlastnost. Toto omezení Blazor součástí rozložení bude pravděpodobně vyřešeno v budoucí verzi.

Stránky předlohy ve webových formulářích ASP.NET lze vnořit. To znamená, že stránka předlohy může také používat stránku předlohy. Součásti Blazor rozložení mohou být také vnořené. Komponentu rozložení můžete použít u součásti rozložení. Obsah vnitřního rozložení se vykreslí uvnitř vnějšího rozložení.

ChildLayout.razor

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

Index.razor

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

Vykreslený výstup stránky by pak byl:

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

Rozložení obvykle nedefinují kořenové elementy Blazor HTML pro stránku (<html>, <body>, <head>atd.). Kořenové elementy HTML jsou místo toho definovány na Blazor hostitelské stránce aplikace, která slouží k vykreslení počátečního obsahu HTML aplikace (viz Bootstrap Blazor). Stránka hostitele může vykreslit více kořenových komponent aplikace s okolním kódem.

Komponenty , Blazorvčetně stránek, nemůžou vykreslit <script> značky. Toto omezení vykreslování existuje, protože <script> značky se načítají jednou a pak je nelze změnit. Pokud se pokusíte značky dynamicky vykreslit pomocí syntaxe Razor, může dojít k neočekávanému chování. Místo toho by se všechny <script> značky měly přidat na stránku hostitele aplikace.

Předchozí Další

Sdílet prostřednictvím

Stránky, směrování a rozložení

Vytvoření stránek

Komponenta směrovače

Navigace

Základní adresy URL

Rozložení stránky

Další materiály