Halaman, pengarahan, dan tata letak

2025-06-17

Petunjuk / Saran

Konten ini adalah kutipan dari eBook, Blazor untuk Pengembang ASP NET Web Forms untuk Azure, tersedia di .NET Docs atau sebagai PDF yang dapat diunduh gratis dan dapat dibaca secara offline.

Unduh PDF

aplikasi ASP.NET Web Forms terdiri dari halaman yang ditentukan dalam file .aspx . Alamat setiap halaman didasarkan pada jalur file fisiknya dalam proyek. Ketika browser membuat permintaan ke halaman, konten halaman dirender secara dinamis di server. Penyajian mempertimbangkan baik markup HTML dari halaman maupun kontrol server dari halaman tersebut.

Di Blazor, setiap halaman dalam aplikasi adalah komponen, biasanya didefinisikan dalam file .razor , dengan satu atau beberapa rute yang ditentukan. Perutean sebagian besar terjadi sisi klien tanpa melibatkan permintaan server tertentu. Browser pertama-tama membuat permintaan ke alamat akar aplikasi. Komponen akar Router dalam Blazor aplikasi kemudian menangani penyadapan permintaan navigasi dan meneruskannya ke komponen yang benar.

Blazor juga mendukung penautan mendalam. Penautan mendalam terjadi ketika browser membuat permintaan ke rute tertentu selain akar aplikasi. Permintaan tautan mendalam yang dikirim ke server diteruskan ke aplikasi Blazor, yang kemudian meneruskan permintaan sisi klien ke komponen yang benar.

Halaman sederhana di ASP.NET Web Forms mungkin berisi markup berikut:

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

Halaman setara pada aplikasi Blazor akan tampak seperti ini:

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

Membuat halaman

Untuk membuat halaman di Blazor, buatlah komponen dan tambahkan direktif Razor @page untuk menentukan rute komponen tersebut. Direktif @page mengambil satu parameter, yang merupakan templat rute untuk ditambahkan ke komponen tersebut.

@page "/counter"

Parameter templat rute diperlukan. Tidak seperti ASP.NET Web Forms, rute ke komponen Blazortidak disimpulkan dari lokasi berkasnya (walaupun mungkin fitur yang dapat ditambahkan di masa mendatang).

Sintaks templat rute sama dengan sintaks dasar yang digunakan dalam perutean di ASP.NET Web Forms. Parameter rute ditentukan dalam templat menggunakan kurung kurawal. Blazor akan mengikat nilai rute ke parameter komponen dengan nama yang sama (tidak peka huruf besar/kecil).

@page "/product/{id}"

<h1>Product @Id</h1>

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

Anda juga dapat menentukan batasan pada nilai parameter rute. Misalnya, untuk membatasi ID produk menjadi :int

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

<h1>Product @Id</h1>

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

Untuk daftar lengkap batasan rute yang didukung oleh Blazor, lihat Batasan rute.

Komponen router

Routing di Blazor ditangani oleh komponen Router. Komponen Router ini biasanya digunakan dalam komponen akar aplikasi (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>

Komponen Router menemukan komponen yang dapat dirutekan dalam AppAssembly yang ditentukan dan AdditionalAssemblies yang dapat ditentukan secara opsional. Saat browser menavigasi, Router mencegat navigasi dan merender konten parameter Found dengan RouteData yang diekstrak jika suatu rute cocok dengan alamat. Jika tidak, Router akan merender parameter NotFound.

Komponen RouteView menangani penyajian komponen yang cocok yang ditentukan oleh RouteData dengan tata letaknya jika memilikinya. Jika komponen yang cocok tidak memiliki tata letak, maka DefaultLayout yang ditentukan secara opsional akan digunakan.

Komponen LayoutView merender konten turunannya dalam tata letak yang telah ditentukan. Kita akan melihat tata letak lebih rinci nanti di bab ini.

Di ASP.NET Web Forms, Anda memicu navigasi ke halaman lain dengan mengembalikan respons pengalihan ke browser. Contohnya:

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

Mengembalikan respons pengalihan biasanya tidak dimungkinkan di Blazor. Blazor tidak menggunakan model permintaan dan balasan. Namun, Anda dapat memicu navigasi browser secara langsung, seperti yang Anda bisa dengan JavaScript.

Blazor menyediakan NavigationManager layanan yang dapat digunakan untuk:

Dapatkan URL browser saat ini
Mendapatkan alamat dasar
Navigasi pemicu
Dapatkan pemberitahuan saat alamat berubah

Untuk menavigasi ke alamat lain, gunakan NavigateTo metode :

@page "/"
@inject NavigationManager NavigationManager

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

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

Untuk deskripsi semua NavigationManager elemen, lihat URI dan alat bantu status navigasi.

URL Dasar

Jika aplikasi Anda Blazor disebarkan di bawah jalur dasar, maka Anda perlu menentukan URL dasar di metadata halaman menggunakan <base> tag untuk perutean ke properti kerja. Jika halaman host untuk aplikasi dirender server menggunakan Razor, maka Anda dapat menggunakan ~/ sintaks untuk menentukan alamat dasar aplikasi. Jika halaman host adalah HTML statis, maka Anda perlu menentukan URL dasar secara eksplisit.

<base href="~/" />

Tata letak halaman

Tata letak halaman di ASP.NET Formulir Web ditangani oleh Halaman Master. Halaman Master menentukan templat dengan satu atau beberapa tempat penampung konten yang kemudian dapat disediakan oleh halaman individual. Halaman Master didefinisikan dalam file .master dan dimulai dengan direktif <%@ Master %> . Konten file .master dikodekan seperti yang Anda lakukan pada halaman .aspx , tetapi dengan penambahan <asp:ContentPlaceHolder> kontrol untuk menandai tempat halaman dapat menyediakan konten.

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>

Di Blazor, Anda menangani tata letak halaman menggunakan komponen tata letak. Komponen tata letak mewarisi dari LayoutComponentBase, yang menentukan satu properti Body bertipe RenderFragment, yang dapat digunakan untuk merender konten halaman.

MainLayout.razor

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

Saat halaman dengan tata letak dirender, halaman tersebut dirender di dalam area tata letak yang ditentukan, tepat pada lokasi di mana tata letak itu merender propertinya Body.

Untuk menerapkan tata letak ke halaman, gunakan direktif @layout :

@layout MainLayout

Anda dapat menentukan tata letak untuk semua komponen dalam folder dan subfolder menggunakan file _Imports.razor . Anda juga dapat menentukan tata letak default untuk semua halaman Anda menggunakan komponen Router.

Halaman Master dapat menentukan beberapa tempat penampung konten, tetapi tata letak Blazor hanya memiliki satu Body properti. Batasan Blazor komponen tata letak ini mudah-mudahan akan ditangani dalam rilis mendatang.

Halaman Master dalam Formulir Web ASP.NET dapat ditumpuk. Artinya, sebuah Halaman Master dapat menggunakan Halaman Master lainnya. Komponen tata letak di Blazor mungkin juga berlapis. Anda dapat menerapkan komponen tata letak ke komponen tata letak. Konten tata letak dalam akan dirender dalam tata letak luar.

ChildLayout.razor

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

Index.razor

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

Hasil yang ditampilkan untuk halaman akan menjadi:

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

Tata letak di Blazor biasanya tidak menentukan elemen HTML akar untuk halaman (<html>, , <body><head>, dan sebagainya). Elemen HTML akar didefinisikan di Blazor halaman host aplikasi, yang digunakan untuk merender konten HTML awal untuk aplikasi (lihat Bootstrap Blazor). Halaman host dapat merender beberapa komponen inti untuk aplikasi dengan markup yang mengelilinginya.

Komponen dalam Blazor, termasuk halaman, tidak dapat menampilkan tag <script>. Pembatasan penyajian ini ada karena <script> tag dimuat sekali dan kemudian tidak dapat diubah. Perilaku tak terduga dapat terjadi jika Anda mencoba merender tag secara dinamis menggunakan sintaks Razor. Sebagai gantinya, semua <script> tag harus ditambahkan ke halaman host aplikasi.

Sebelumnya Berikutnya

Bagikan melalui

Halaman, pengarahan, dan tata letak

Membuat halaman

Komponen router

Navigasi

URL Dasar

Tata letak halaman

Sumber Daya Tambahan: