Sidor, routning och layouter

Artikel
03/12/2024

Dricks

Det här innehållet är ett utdrag ur e-boken, Blazor för ASP NET Web Forms Developers for Azure, tillgängligt på .NET Docs eller som en kostnadsfri nedladdningsbar PDF som kan läsas offline.

Ladda ned PDF

ASP.NET Web Forms-appar består av sidor som definierats i .aspx filer. Varje sidas adress baseras på dess fysiska filsökväg i projektet. När en webbläsare skickar en begäran till sidan återges innehållet på sidan dynamiskt på servern. Renderingen står för både sidans HTML-kod och dess serverkontroller.

I Blazorär varje sida i appen en komponent som vanligtvis definieras i en .razor-fil med en eller flera angivna vägar. Routning sker oftast på klientsidan utan att en specifik serverbegäran ingår. Webbläsaren skickar först en begäran till appens rotadress. En rotkomponent Router i Blazor appen hanterar sedan avlyssning av navigeringsbegäranden och vidarebefordrar dem till rätt komponent.

Blazor stöder även djuplänkning. Djuplänkning sker när webbläsaren skickar en begäran till en annan väg än appens rot. Begäranden om djuplänkar som skickas till servern dirigeras till Blazor appen, som sedan dirigerar begärandeklientsidan till rätt komponent.

En enkel sida i ASP.NET webbformulär kan innehålla följande markering:

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

Motsvarande sida i en Blazor app skulle se ut så här:

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

Skapa sidor

Skapa en sida i Blazorgenom att skapa en komponent och lägga till @page Razor-direktivet för att ange vägen för komponenten. Direktivet @page tar en enda parameter, som är vägmallen som ska läggas till i komponenten.

@page "/counter"

Parametern routningsmall krävs. Till skillnad från ASP.NET webbformulär härleds inte vägen till en Blazor komponent från dess filplats (även om det kan vara en funktion som läggs till i framtiden).

Syntaxen för routningsmallen är samma grundläggande syntax som används för routning i ASP.NET webbformulär. Routningsparametrar anges i mallen med hjälp av klammerparenteser. Blazor binder routningsvärden till komponentparametrar med samma namn (skiftlägesokänsliga).

@page "/product/{id}"

<h1>Product @Id</h1>

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

Du kan också ange begränsningar för värdet för routningsparametern. Om du till exempel vill begränsa produkt-ID:t till att vara :int

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

<h1>Product @Id</h1>

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

En fullständig lista över de vägbegränsningar som stöds av Blazorfinns i Routningsbegränsningar.

Routerkomponent

Routning i Blazor hanteras av komponenten Router . Komponenten Router används vanligtvis i appens rotkomponent (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>

Komponenten Router identifierar de dirigerbara komponenterna i angivet AppAssembly och i det valfria angivna AdditionalAssemblies. När webbläsaren navigerar kommer navigeringen Router att fångas upp och innehållet i Found parametern återges med den extraherade RouteData om en väg matchar adressen, annars Router renderas dess NotFound parameter.

Komponenten RouteView hanterar återgivningen av den matchade komponenten RouteData som anges av med dess layout om den har en. Om den matchade komponenten inte har någon layout används det angivna DefaultLayout alternativet.

Komponenten LayoutView återger sitt underordnade innehåll i den angivna layouten. Vi tittar närmare på layouter senare i det här kapitlet.

I ASP.NET webbformulär utlöser du navigering till en annan sida genom att returnera ett omdirigeringssvar till webbläsaren. Till exempel:

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

Det går vanligtvis inte att returnera ett omdirigeringssvar i Blazor. Blazor använder inte en modell för begäran-svar. Du kan dock utlösa webbläsarnavigeringar direkt, som du kan med JavaScript.

Blazor tillhandahåller en NavigationManager tjänst som kan användas för att:

Hämta den aktuella webbläsaradressen
Hämta basadressen
Utlösarnavigeringar
Få ett meddelande när adressen ändras

Om du vill navigera till en annan adress använder du NavigateTo metoden:

@page "/"
@inject NavigationManager NavigationManager

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

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

En beskrivning av alla NavigationManager medlemmar finns i URI- och navigeringstillståndshjälpare.

Grundläggande URL:er

Om din Blazor app distribueras under en bassökväg måste du ange bas-URL:en i sidmetadata med hjälp av taggen <base> för routning till arbetsegenskap. Om värdsidan för appen är serverre renderad med Razor kan du använda syntaxen ~/ för att ange appens basadress. Om värdsidan är statisk HTML måste du uttryckligen ange bas-URL:en.

<base href="~/" />

Sidlayout

Sidlayout i ASP.NET webbformulär hanteras av huvudsidor. Huvudsidor definierar en mall med en eller flera innehållsplatshållare som sedan kan anges av enskilda sidor. Huvudsidor definieras i .master-filer och börjar med <%@ Master %> direktivet. Innehållet i .master-filerna är kodat som du skulle göra med en .aspx sida, men med tillägg av <asp:ContentPlaceHolder> kontroller för att markera var sidor kan ange innehåll.

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>

I Blazorhanterar du sidlayout med hjälp av layoutkomponenter. Layoutkomponenter ärver från LayoutComponentBase, som definierar en enskild Body egenskap av typen RenderFragment, som kan användas för att återge innehållet på sidan.

MainLayout.razor

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

När sidan med en layout återges återges sidan i innehållet i den angivna layouten på den plats där layouten renderar sin Body egenskap.

Om du vill använda en layout på en sida använder du @layout direktivet:

@layout MainLayout

Du kan ange layouten för alla komponenter i en mapp och undermappar med hjälp av en _Imports.razor-fil . Du kan också ange en standardlayout för alla dina sidor med hjälp av routerkomponenten.

Huvudsidor kan definiera flera innehållsplatshållare, men layouter i Blazor har bara en enda Body egenskap. Den här begränsningen av Blazor layoutkomponenter kommer förhoppningsvis att åtgärdas i en framtida version.

Huvudsidor i ASP.NET webbformulär kan kapslas. En huvudsida kan också använda en huvudsida. Layoutkomponenter i Blazor kan också vara kapslade. Du kan använda en layoutkomponent för en layoutkomponent. Innehållet i den inre layouten återges i den yttre layouten.

ChildLayout.razor

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

Index.razor

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

De renderade utdata för sidan skulle då vara:

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

Layouter i Blazor definierar vanligtvis inte HTML-rotelementen för en sida (<html>, <body>, <head>och så vidare). Html-rotelementen definieras i stället på en Blazor apps värdsida, som används för att återge det första HTML-innehållet för appen (se Bootstrap Blazor). Värdsidan kan återge flera rotkomponenter för appen med omgivande markering.

Komponenter i Blazor, inklusive sidor, kan inte återge <script> taggar. Den här återgivningsbegränsningen finns eftersom <script> taggar läses in en gång och sedan inte kan ändras. Oväntat beteende kan inträffa om du försöker återge taggarna dynamiskt med hjälp av Razor-syntax. I stället ska alla <script> taggar läggas till på appens värdsida.

Föregående Nästa

Dela via

Sidor, routning och layouter

Skapa sidor

Routerkomponent

Navigering

Grundläggande URL:er

Sidlayout

Ytterligare resurser