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

Návod

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. Vykreslování zohledňuje jak HTML kód stránky, tak i její 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 Blazor najdete v části Omezení trasy.

Komponenta směrovače

Směrování v Blazor zpracovává 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ě zadaném AdditionalAssemblies. Když prohlížeč naviguje, Router zachytí navigaci a zobrazí obsah svého parametru Found s extrahovaným RouteData, pokud adresa odpovídá trase; jinak Router zobrazí svůj parametr NotFound.

Komponenta RouteView zpracovává vykreslení odpovídající komponenty, jak je specifikováno RouteData, včetně jejího rozložení, pokud nějaké 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 webových formulářích ASP.NET spustíte navigaci na jinou stránku vrácením přesměrovací odpovědi do prohlížeče. Napří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.

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

Získání aktuální adresy prohlížeče
Získání základní adresy
Aktivovat navigaci
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 elementů najdete v pomocnících pro stav URI a navigace.

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 je stránka hostitele aplikace vykreslována na straně serveru pomocí technologie Razor, 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 je zpracováváno stránkami předlohy. Hlavní stránky definují šablonu s jedním nebo více zástupnými symboly obsahu, které mohou být pak doplněny na jednotlivých stránkách. Stránky předlohy jsou definovány v souborech .master a začínají direktivou <%@ Master %> . Obsah souborů .master je kódovaný jako na .aspx stránce, ale s přidáním ovládacích <asp:ContentPlaceHolder> prvků k označení, 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 Blazor se rozložení stránky řeší pomocí komponent 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 se stránka vykreslí v obsahu zadané šablony na pozici, kde šablona vykresluje svou 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í v Blazor mají pouze jednu vlastnost Body. Toto omezení Blazor součástí rozložení bude pravděpodobně vyřešeno v budoucí verzi.

Hlavní stránky 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. Komponenty rozložení v Blazor 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 značkováním.

Komponenty Blazor, včetně stránek, nemohou 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ší

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-06-17