Strony, routing i układy

Artykuł
03/02/2024

Napiwek

Ta zawartość jest fragmentem książki eBook Blazor dla deweloperów formularzy internetowych platformy ASP NET dla platformy Azure, dostępnym na platformie .NET Docs lub jako bezpłatny plik PDF do pobrania, który można odczytać w trybie offline.

Pobierz plik PDF

aplikacje ASP.NET Web Forms składają się ze stron zdefiniowanych w plikach .aspx . Adres każdej strony jest oparty na fizycznej ścieżce pliku w projekcie. Gdy przeglądarka wysyła żądanie do strony, zawartość strony jest dynamicznie renderowana na serwerze. Renderowanie kont dla znaczników HTML strony i jej kontrolek serwera.

W Blazorsystemie każda strona w aplikacji jest składnikiem, zwykle zdefiniowanym w pliku razor z co najmniej jedną określoną trasą. Routing odbywa się głównie po stronie klienta bez użycia określonego żądania serwera. Przeglądarka najpierw wysyła żądanie do adresu głównego aplikacji. Składnik główny Router w Blazor aplikacji obsługuje następnie przechwytywanie żądań nawigacji i przekazuje je do poprawnego składnika.

Blazor obsługuje również łączenie głębokie. Głębokie łączenie występuje, gdy przeglądarka wysyła żądanie do określonej trasy innej niż katalog główny aplikacji. Żądania linków bezpośrednich wysyłanych do serwera są kierowane do Blazor aplikacji, która następnie kieruje żądanie po stronie klienta do odpowiedniego składnika.

Prosta strona w usłudze ASP.NET Web Forms może zawierać następujące znaczniki:

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

Równoważna strona w Blazor aplikacji będzie wyglądać następująco:

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

Tworzenie stron

Aby utworzyć stronę w Blazorpliku , utwórz składnik i dodaj @page dyrektywę Razor w celu określenia trasy dla składnika. Dyrektywa @page przyjmuje jeden parametr, który jest szablonem trasy, który ma zostać dodany do tego składnika.

@page "/counter"

Parametr szablonu trasy jest wymagany. W przeciwieństwie do ASP.NET formularzy sieci Web trasa do Blazor składnika nie jest wywnioskowana z lokalizacji pliku (chociaż może to być funkcja dodana w przyszłości).

Składnia szablonu trasy jest tą samą podstawową składnią używaną do routingu w ASP.NET Web Forms. Parametry trasy są określane w szablonie przy użyciu nawiasów klamrowych. Blazor Spowoduje powiązanie wartości tras z parametrami składnika o tej samej nazwie (bez uwzględniania wielkości liter).

@page "/product/{id}"

<h1>Product @Id</h1>

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

Można również określić ograniczenia dotyczące wartości parametru trasy. Aby na przykład ograniczyć identyfikator produktu jako :int

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

<h1>Product @Id</h1>

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

Aby uzyskać pełną listę ograniczeń tras obsługiwanych przez Blazorusługę , zobacz Ograniczenia trasy.

Składnik routera

Routing w systemie Blazor jest obsługiwany przez Router składnik . Składnik Router jest zwykle używany w składniku głównym aplikacji (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>

Składnik Router odnajduje składniki routingu w określonym AppAssembly parametrze i w opcjonalnie określonym AdditionalAssemblieselemencie . Gdy przeglądarka przejdzie, Router przechwytuje nawigację i renderuje zawartość jego Found parametru z wyodrębnionym RouteData , jeśli trasa pasuje do adresu, w przeciwnym razie Router renderuje jego NotFound parametr.

Składnik RouteView obsługuje renderowanie dopasowanego składnika określonego RouteData przez jego układ, jeśli ma jeden. Jeśli dopasowany składnik nie ma układu, jest używany opcjonalny określony DefaultLayout .

Składnik LayoutView renderuje jego zawartość podrzędną w określonym układzie. Bardziej szczegółowo przyjrzymy się układom w dalszej części tego rozdziału.

W ASP.NET formularzy sieci Web wyzwalasz nawigację na innej stronie, zwracając odpowiedź przekierowania do przeglądarki. Na przykład:

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

Zwracanie odpowiedzi przekierowania nie jest zwykle możliwe w pliku Blazor. Blazor nie używa modelu odpowiedzi na żądanie. Możesz jednak wyzwalać nawigacje przeglądarki bezpośrednio, tak jak w przypadku języka JavaScript.

Blazor udostępnia usługę NavigationManager , która może służyć do:

Pobieranie bieżącego adresu przeglądarki
Uzyskiwanie adresu podstawowego
Nawigacje wyzwalacze
Otrzymywanie powiadomień o zmianie adresu

Aby przejść do innego adresu, użyj NavigateTo metody :

@page "/"
@inject NavigationManager NavigationManager

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

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

Aby uzyskać opis wszystkich NavigationManager elementów członkowskich, zobacz Pomocnicy identyfikatora URI i stanu nawigacji.

Podstawowe adresy URL

Jeśli aplikacja Blazor jest wdrażana w ścieżce podstawowej, musisz określić podstawowy adres URL w metadanych strony przy użyciu tagu <base> routingu do właściwości służbowej. Jeśli strona hosta aplikacji jest renderowana przez serwer przy użyciu składni Razor, możesz użyć ~/ składni do określenia adresu podstawowego aplikacji. Jeśli strona hosta jest statycznym kodem HTML, musisz jawnie określić podstawowy adres URL.

<base href="~/" />

Układ strony

Układ strony w ASP.NET formularzy sieci Web jest obsługiwany przez strony wzorcowe. Strony wzorcowe definiują szablon z co najmniej jednym symbolem zastępczym zawartości, które mogą być następnie dostarczane przez poszczególne strony. Strony wzorcowe są definiowane w plikach master i zaczynają się od <%@ Master %> dyrektywy . Zawartość plików master jest kodowana tak, jak na stronie .aspx, ale z dodatkiem <asp:ContentPlaceHolder> kontrolek do oznaczania miejsca, w którym strony mogą dostarczać zawartość.

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>

W Blazorprogramie można obsługiwać układ strony przy użyciu składników układu. Składniki układu dziedziczą z LayoutComponentBaseklasy , która definiuje pojedynczą Body właściwość typu RenderFragment, która może służyć do renderowania zawartości strony.

MainLayout.razor

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

Gdy strona z układem jest renderowana, strona jest renderowana w zawartości określonego układu w lokalizacji, w której układ renderuje jego Body właściwość.

Aby zastosować układ do strony, użyj @layout dyrektywy :

@layout MainLayout

Układ wszystkich składników w folderze i podfolderach można określić przy użyciu pliku _Imports.razor . Można również określić domyślny układ dla wszystkich stron przy użyciu składnika Router.

Strony wzorcowe mogą definiować wiele symboli zastępczych zawartości, ale układy w programie Blazor mają tylko jedną Body właściwość. To ograniczenie składników Blazor układu będzie miejmy nadzieję rozwiązać w przyszłej wersji.

Strony wzorcowe w formularzach sieci Web ASP.NET można zagnieżdżać. Oznacza to, że strona wzorcowa może również używać strony wzorcowej. Składniki układu w Blazor programie również mogą być zagnieżdżone. Składnik układu można zastosować do składnika układu. Zawartość układu wewnętrznego będzie renderowana w układzie zewnętrznym.

ChildLayout.razor

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

Index.razor

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

Renderowane dane wyjściowe dla strony będą następujące:

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

Układy w programie Blazor zwykle nie definiują głównych elementów HTML dla strony (<html>, <body>, <head>i tak dalej). Zamiast tego główne elementy HTML są definiowane na Blazor stronie hosta aplikacji, która służy do renderowania początkowej zawartości HTML dla aplikacji (zobacz Bootstrap Blazor). Strona hosta może renderować wiele składników głównych dla aplikacji z otaczającym znacznikiem.

Składniki w programie , w Blazortym strony, nie mogą renderować <script> tagów. To ograniczenie renderowania istnieje, ponieważ <script> tagi są ładowane raz, a następnie nie można ich zmienić. W przypadku próby dynamicznego renderowania tagów przy użyciu składni Razor może wystąpić nieoczekiwane zachowanie. <script> Zamiast tego wszystkie tagi należy dodać do strony hosta aplikacji.

Poprzedni Następny

Udostępnij za pośrednictwem

Strony, routing i układy

Tworzenie stron

Składnik routera

Nawigacja

Podstawowe adresy URL

Układ strony

Dodatkowe zasoby