ASP.NET Core Razor bileşenleri

Bileşenin adı büyük harfle başlamalıdır:

✔️Destekli:ProductDetail.razor

❌ Desteklenmeyen:productDetail.razor

Tüm Blazor belgelerinde kullanılan yaygın Blazor adlandırma kuralları şunlardır:

• Dosya yolları ve dosya adları Pascal Case kullanır ve kod örnekleri gösterilmeden önce yer alır. Bir yol varsa, tipik klasör konumunu gösterir. Örneğin, Components/Pages/ProductDetail.razor bileşenin dosya adına ProductDetail.razor olan ve uygulamanın Components klasörünün Pages adlı klasöründe bulunan bir dosyaya sahip olduğunu gösterir.
• Yönlendirilebilir bileşenler için bileşen dosyası yolları, "kebab case" formatında URL'lerle eşleşir ve bir bileşenin rota şablonundaki sözcükler arasında kısa çizgiler bulunur. Örneğin ProductDetail yönlendirme şablonu olan /product-detail bileşeni (@page "/product-detail") tarayıcıda /product-detail göreli URL'sinde istendi.

†Pascal Biçimi (Deve Büyük Harf) boşluk veya noktalama işareti kullanmaksızın, her sözcüğün, ilk sözcük dahil, ilk harfinin büyük yazıldığı bir adlandırma kuralıdır.
‡Kebab case, boşluklar ve noktalama işaretleri olmadan, küçük harfler ve kelimeler arasında tireler kullanan bir adlandırma kuralıdır.

Bileşenler sıradan C# sınıflarıdır ve proje içinde herhangi bir konuma yerleştirilebilir. Web sayfaları üreten bileşenler Components/Pages klasöründe yer alır. Sayfa üretmeyen bileşenler sıklıkla Components klasörüne veya projeye eklenen bir özel klasöre yerleştirilir.

Normal olarak bileşenin ad alanı, uygulamanın kök ad alanından ve uygulama içindeki bileşen konumundan (klasör) türetilir. Uygulamanın kök ad alanı BlazorSample ise ve Counter bileşeni Components/Pages klasöründe yer alıyorsa:

• Counter bileşeninin ad alanı BlazorSample.Components.Pages olur.
• Bileşenin tam tür adı şöyledir: BlazorSample.Components.Pages.Counter.

Bileşenleri barındıran özel klasörler için, üst bileşene veya uygulamanın @using dosyasına _Imports.razor yönergesini ekleyin. Aşağıdaki örnek AdminComponents klasöründeki bileşenleri kullanılabilir duruma getirir:

@using BlazorSample.AdminComponents

Diğer adla belirtilmiş using ifadeler desteklenir. Aşağıdaki örnekte, bileşenin WeatherForecast genel GridRendering sınıfı, uygulamanın başka bir yerindeki bir bileşende WeatherForecast olarak kullanılabilir hale getirilir.

@using WeatherForecast = Components.Pages.GridRendering.WeatherForecast

Bileşenlere tam adları kullanılarak da başvurulabilir ve bu durumda bir @using yönergesi gerekmez. Aşağıdaki örnek, uygulamanın ProductDetail klasöründe yer alan AdminComponents/Pages bileşenine doğrudan başvurur:

<BlazorSample.AdminComponents.Pages.ProductDetail />

Razor ile yazılan bileşenin ad alanı aşağıdakilere dayanır (öncelik sırasıyla):

• @namespace dosyasının işaretlemesindeki Razor yönergesi (örneğin @namespace BlazorSample.CustomNamespace).
• Projenin proje dosyasındaki RootNamespace (örneğin <RootNamespace>BlazorSample</RootNamespace>).
• Proje ad alanı ve proje kökünden bileşene giden yol. Örneğin, {PROJECT NAMESPACE}/Components/Pages/Home.razor projesinin ad alanını BlazorSample ile, Home bileşeni için BlazorSample.Components.Pages ad alanına çözer. {PROJECT NAMESPACE} proje ad alanıdır. Bileşenler C# adı bağlama kurallarına uyar. Bu örnekteki Home bileşen için kapsamdaki bileşenlerin tümü bileşenlerdir:
  • Aynı Components/Pages klasöründe yer alanlar.
  • Projenin kökünde yer alan ve açıkça farklı bir ad alanı belirtmeyen bileşenler.

Aşağıdakiler desteklenmez:

• global:: nitelemesi.
• Kısmen nitelenmiş adlar. Örneğin bir bileşene @using BlazorSample.Components ekleyip ardından uygulamanın NavMenu klasöründeki Components/Layout bileşenine (Components/Layout/NavMenu.razor) <Layout.NavMenu></Layout.NavMenu> ile başvuramazsınız.

Bileşenin adı büyük harfle başlamalıdır:

✔️Destekli:ProductDetail.razor

❌ Desteklenmeyen:productDetail.razor

Tüm Blazor belgelerinde kullanılan yaygın Blazor adlandırma kuralları şunlardır:

• Dosya yolları ve dosya adları Pascal Case kullanılarak, kod örneklerinden önce görünür. Bir yol varsa, tipik klasör konumunu gösterir. Örneğin Pages/ProductDetail.razor yolu, ProductDetail bileşeninin dosya adının ProductDetail.razor olduğunu ve bileşenin uygulamanın Pages klasöründe bulunduğunu gösterir.
• Yönlendirilebilir bileşenler için bileşen dosya yolları, kebap usulü URL'leriyle eşleşir ve bir bileşenin rota şablonu içerisindeki sözcükler arasında kısa çizgiler kullanılır. Örneğin ProductDetail yönlendirme şablonu olan /product-detail bileşeni (@page "/product-detail") tarayıcıda /product-detail göreli URL'sinde istendi.

†Pascal durumu (büyük harfle başlayan camelCase), boşluk ve noktalama işareti içermeyen, ilk sözcük de dahil olmak üzere her sözcüğün ilk harfinin büyük yazıldığı bir adlandırma kuralıdır.
‡Kebab-case, sözcükler arasında küçük harfler ve tireler kullanan, boşluk veya noktalama işareti içermeyen bir adlandırma kuralıdır.

Bileşenler sıradan C# sınıflarıdır ve proje içinde herhangi bir konuma yerleştirilebilir. Web sayfaları üreten bileşenler Pages klasöründe yer alır. Sayfa üretmeyen bileşenler sıklıkla Shared klasörüne veya projeye eklenen bir özel klasöre yerleştirilir.

Normal olarak bileşenin ad alanı, uygulamanın kök ad alanından ve uygulama içindeki bileşen konumundan (klasör) türetilir. Uygulamanın kök ad alanı BlazorSample ise ve Counter bileşeni Pages klasöründe yer alıyorsa:

• Counter bileşeninin ad alanı BlazorSample.Pages olur.
• Bileşenin tam tür adı şöyledir: BlazorSample.Pages.Counter.

Bileşenleri barındıran özel klasörler için, üst bileşene veya uygulamanın @using dosyasına _Imports.razor yönergesini ekleyin. Aşağıdaki örnek AdminComponents klasöründeki bileşenleri kullanılabilir duruma getirir:

@using BlazorSample.AdminComponents

Diğer ad verilmiş using ifadeler desteklenir. Aşağıdaki örnekte, bileşenin WeatherForecast genel GridRendering sınıfı, uygulamanın başka bir yerindeki bir bileşende WeatherForecast olarak kullanılabilir.

@using WeatherForecast = Pages.GridRendering.WeatherForecast

Bileşenlere tam adları kullanılarak da başvurulabilir ve bu durumda bir @using yönergesi gerekmez. Aşağıdaki örnek, uygulamanın ProductDetail klasöründe yer alan Components bileşenine doğrudan başvurur:

<BlazorSample.Components.ProductDetail />

Razor ile yazılan bileşenin ad alanı aşağıdakilere dayanır (öncelik sırasıyla):

• @namespace dosyasının işaretlemesindeki Razor yönergesi (örneğin @namespace BlazorSample.CustomNamespace).
• Projenin proje dosyasındaki RootNamespace (örneğin <RootNamespace>BlazorSample</RootNamespace>).
• Proje ad alanı ve proje kökünden bileşene giden yol. Örneğin, çerçeve, {PROJECT NAMESPACE}/Pages/Index.razor proje ad alanını BlazorSample ile Index bileşeni için BlazorSample.Pages ad alanına çözümler. {PROJECT NAMESPACE} proje ad alanıdır. Bileşenler C# adı bağlama kurallarına uyar. Bu örnekteki Index bileşen için kapsamdaki bileşenlerin tümü bileşenlerdir:
  • Aynı Pages klasöründe yer alanlar.
  • Projenin kökünde yer alan ve açıkça farklı bir ad alanı belirtmeyen bileşenler.

Aşağıdakiler desteklenmez:

• global:: nitelemesi.
• Kısmen nitelenmiş adlar. Örneğin bir bileşene @using BlazorSample ekleyip ardından uygulamanın NavMenu klasöründeki Shared bileşenine (Shared/NavMenu.razor) <Shared.NavMenu></Shared.NavMenu> ile başvuramazsınız.

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter-partial-class"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@page "/counter-partial-class"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@page "/counter-partial-class"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@page "/counter-partial-class"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@page "/counter-partial-class"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@page "/counter-partial-class"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

namespace BlazorSample.Components.Pages;

public partial class CounterPartialClass
{
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

namespace BlazorSample.Components.Pages;

public partial class CounterPartialClass
{
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

namespace BlazorSample.Pages;

public partial class CounterPartialClass
{
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

namespace BlazorSample.Pages
{
    public partial class CounterPartialClass
    {
        private int currentCount = 0;

        private void IncrementCount()
        {
            currentCount++;
        }
    }
}

using System.Net.Http;
using System.Net.Http.Json;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Sections
using Microsoft.AspNetCore.Components.Web;
using static Microsoft.AspNetCore.Components.Web.RenderMode;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.JSInterop;

Tipik ad alanları uygulamanın ad alanını ve uygulamanın Components klasörüne karşılık gelen ad alanını da içerir:

using BlazorSample;
using BlazorSample.Components;

Ek klasörler dahil edilebilir, örneğin Layout klasörü:

using BlazorSample.Components.Layout;

using System.Net.Http;
using System.Net.Http.Json;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.JSInterop;

Tipik ad alanları uygulamanın ad alanını ve uygulamanın Shared klasörüne karşılık gelen ad alanını da içerir:

using BlazorSample;
using BlazorSample.Shared;

using System.Net.Http;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;

Tipik ad alanları uygulamanın ad alanını ve uygulamanın Shared klasörüne karşılık gelen ad alanını da içerir:

using BlazorSample;
using BlazorSample.Shared;

@page "/blazor-rocks-1"
@inherits BlazorRocksBase1

<PageTitle>Blazor Rocks!</PageTitle>

<h1>Blazor Rocks! Example 1</h1>

<p>
    @BlazorRocksText
</p>

@page "/blazor-rocks-1"
@inherits BlazorRocksBase1

<PageTitle>Blazor Rocks!</PageTitle>

<h1>Blazor Rocks! Example 1</h1>

<p>
    @BlazorRocksText
</p>

@page "/blazor-rocks-1"
@inherits BlazorRocksBase1

<PageTitle>Blazor Rocks!</PageTitle>

<h1>Blazor Rocks! Example 1</h1>

<p>
    @BlazorRocksText
</p>

@page "/blazor-rocks-1"
@inherits BlazorRocksBase1

<PageTitle>Blazor Rocks!</PageTitle>

<h1>Blazor Rocks! Example 1</h1>

<p>
    @BlazorRocksText
</p>

@page "/blazor-rocks-1"
@inherits BlazorRocksBase1

<h1>Blazor Rocks! Example 1</h1>

<p>
    @BlazorRocksText
</p>

@page "/blazor-rocks-1"
@inherits BlazorRocksBase1

<h1>Blazor Rocks! Example 1</h1>

<p>
    @BlazorRocksText
</p>

using Microsoft.AspNetCore.Components;

namespace BlazorSample;

public class BlazorRocksBase1 : ComponentBase
{
    public string BlazorRocksText { get; set; } = "Blazor rocks the browser!";
}

using Microsoft.AspNetCore.Components;

namespace BlazorSample;

public class BlazorRocksBase1 : ComponentBase
{
    public string BlazorRocksText { get; set; } = "Blazor rocks the browser!";
}

using Microsoft.AspNetCore.Components;

namespace BlazorSample;

public class BlazorRocksBase1 : ComponentBase
{
    public string BlazorRocksText { get; set; } =
        "Blazor rocks the browser!";
}

using Microsoft.AspNetCore.Components;

namespace BlazorSample;

public class BlazorRocksBase1 : ComponentBase
{
    public string BlazorRocksText { get; set; } =
        "Blazor rocks the browser!";
}

using Microsoft.AspNetCore.Components;

namespace BlazorSample;

public class BlazorRocksBase1 : ComponentBase
{
    public string BlazorRocksText { get; set; } =
        "Blazor rocks the browser!";
}

using Microsoft.AspNetCore.Components;

namespace BlazorSample;

public class BlazorRocksBase1 : ComponentBase
{
    public string BlazorRocksText { get; set; } =
        "Blazor rocks the browser!";
}

@page "/hello-world"

<PageTitle>Hello World!</PageTitle>

<h1>Hello World!</h1>

@page "/hello-world"

<PageTitle>Hello World!</PageTitle>

<h1>Hello World!</h1>

@page "/hello-world"

<h1>Hello World!</h1>

@page "/hello-world"

<h1>Hello World!</h1>

@page "/hello-world"

<h1>Hello World!</h1>

@page "/hello-world"

<h1>Hello World!</h1>

@page "/markup"

<PageTitle>Markup</PageTitle>

<h1>Markup Example</h1>

<h2 style="font-style:@headingFontStyle">@headingText</h2>

@code {
    private string headingFontStyle = "italic";
    private string headingText = "Put on your new Blazor!";
}

@page "/markup"

<PageTitle>Markup</PageTitle>

<h1>Markup Example</h1>

<h2 style="font-style:@headingFontStyle">@headingText</h2>

@code {
    private string headingFontStyle = "italic";
    private string headingText = "Put on your new Blazor!";
}

@page "/markup"

<h1 style="font-style:@headingFontStyle">@headingText</h1>

@code {
    private string headingFontStyle = "italic";
    private string headingText = "Put on your new Blazor!";
}

@page "/markup"

<h1 style="font-style:@headingFontStyle">@headingText</h1>

@code {
    private string headingFontStyle = "italic";
    private string headingText = "Put on your new Blazor!";
}

@page "/markup"

<h1 style="font-style:@headingFontStyle">@headingText</h1>

@code {
    private string headingFontStyle = "italic";
    private string headingText = "Put on your new Blazor!";
}

@page "/markup"

<h1 style="font-style:@headingFontStyle">@headingText</h1>

@code {
    private string headingFontStyle = "italic";
    private string headingText = "Put on your new Blazor!";
}

<h1 style="font-style:@headingFontStyle">Heading Example</h1>

@code {
    private string headingFontStyle = "italic";
}

<h1 style="font-style:@headingFontStyle">Heading Example</h1>

@code {
    private string headingFontStyle = "italic";
}

<h1 style="font-style:@headingFontStyle">Heading Example</h1>

@code {
    private string headingFontStyle = "italic";
}

<h1 style="font-style:@headingFontStyle">Heading Example</h1>

@code {
    private string headingFontStyle = "italic";
}

<h1 style="font-style:@headingFontStyle">Heading Example</h1>

@code {
    private string headingFontStyle = "italic";
}

<h1 style="font-style:@headingFontStyle">Heading Example</h1>

@code {
    private string headingFontStyle = "italic";
}

@page "/heading-example"

<PageTitle>Heading</PageTitle>

<h1>Heading Example</h1>

<Heading />

@page "/heading-example"

<PageTitle>Heading</PageTitle>

<h1>Heading Example</h1>

<Heading />

@page "/heading-example"

<Heading />

@page "/heading-example"

<Heading />

@page "/heading-example"

<Heading />

@page "/heading-example"

<Heading />

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">@Title</div>
    <div class="card-body" style="font-style:@Body.Style">
        <p>@Body.Text</p>
        @if (Count is not null)
        {
            <p>The count is @Count.</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; } = "Set By Child";

    [Parameter]
    public PanelBody Body { get; set; } =
        new()
        {
            Text = "Card content set by child.",
            Style = "normal"
        };

    [Parameter]
    public int? Count { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">@Title</div>
    <div class="card-body" style="font-style:@Body.Style">
        <p>@Body.Text</p>
        @if (Count is not null)
        {
            <p>The count is @Count.</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; } = "Set By Child";

    [Parameter]
    public PanelBody Body { get; set; } =
        new()
        {
            Text = "Card content set by child.",
            Style = "normal"
        };
    
    [Parameter]
    public int? Count { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">@Title</div>
    <div class="card-body" style="font-style:@Body.Style">
        <p>@Body.Text</p>
        @if (Count is not null)
        {
            <p>The count is @Count.</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; } = "Set By Child";

    [Parameter]
    public PanelBody Body { get; set; } =
        new()
        {
            Text = "Set by child.",
            Style = "normal"
        };

    [Parameter]
    public int? Count { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">@Title</div>
    <div class="card-body" style="font-style:@Body.Style">
        <p>@Body.Text</p>
        @if (Count is not null)
        {
            <p>The count is @Count.</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; } = "Set By Child";

    [Parameter]
    public PanelBody Body { get; set; } =
        new()
        {
            Text = "Set by child.",
            Style = "normal"
        };

    [Parameter]
    public int? Count { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">@Title</div>
    <div class="card-body" style="font-style:@Body.Style">
        <p>@Body.Text</p>
        @if (Count is not null)
        {
            <p>The count is @Count.</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; } = "Set By Child";

    [Parameter]
    public PanelBody Body { get; set; } =
        new()
        {
            Text = "Set by child.",
            Style = "normal"
        };

    [Parameter]
    public int? Count { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">@Title</div>
    <div class="card-body" style="font-style:@Body.Style">
        <p>@Body.Text</p>
        @if (Count is not null)
        {
            <p>The count is @Count.</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; } = "Set By Child";

    [Parameter]
    public PanelBody Body { get; set; } =
        new PanelBody()
        {
            Text = "Set by child.",
            Style = "normal"
        };

    [Parameter]
    public int? Count { get; set; }
}

Parameter1.razor:

@page "/parameter-1"

<PageTitle>Parameter 1</PageTitle>

<h1>Parameter Example 1</h1>

<h1>Child component (without attribute values)</h1>

<ParameterChild />

<h1>Child component (with attribute values)</h1>

<ParameterChild Title="Set by Parent" 
    Body="@(new PanelBody() { Text = "Set by parent.", Style = "italic" })" />

Parameter1.razor:

@page "/parameter-1"

<PageTitle>Parameter 1</PageTitle>

<h1>Parameter Example 1</h1>

<h1>Child component (without attribute values)</h1>

<ParameterChild />

<h1>Child component (with attribute values)</h1>

<ParameterChild Title="Set by Parent" 
    Body="@(new PanelBody() { Text = "Set by parent.", Style = "italic" })" />

ParameterParent.razor:

@page "/parameter-parent"

<h1>Child component (without attribute values)</h1>

<ParameterChild />

<h1>Child component (with attribute values)</h1>

<ParameterChild Title="Set by Parent"
                Body="@(new PanelBody() { Text = "Set by parent.", Style = "italic" })" />

ParameterParent.razor:

@page "/parameter-parent"

<h1>Child component (without attribute values)</h1>

<ParameterChild />

<h1>Child component (with attribute values)</h1>

<ParameterChild Title="Set by Parent"
                Body="@(new PanelBody() { Text = "Set by parent.", Style = "italic" })" />

ParameterParent.razor:

@page "/parameter-parent"

<h1>Child component (without attribute values)</h1>

<ParameterChild />

<h1>Child component (with attribute values)</h1>

<ParameterChild Title="Set by Parent"
                Body="@(new PanelBody() { Text = "Set by parent.", Style = "italic" })" />

ParameterParent.razor:

@page "/parameter-parent"

<h1>Child component (without attribute values)</h1>

<ParameterChild />

<h1>Child component (with attribute values)</h1>

<ParameterChild Title="Set by Parent"
                Body="@(new PanelBody() { Text = "Set by parent.", Style = "italic" })" />

Parameter2.razor:

@page "/parameter-2"

<PageTitle>Parameter 2</PageTitle>

<h1>Parameter Example 2</h1>

<ParameterChild Title="@title" />

<ParameterChild Title="@GetTitle()" />

<ParameterChild Title="@DateTime.Now.ToLongDateString()" />

<ParameterChild Title="@panelData.Title" />

<ParameterChild Title="String literal title" Count="count" />

@code {
    private string title = "From Parent field";
    private PanelData panelData = new();
    private int count = 12345;

    private string GetTitle() => "From Parent method";

    private class PanelData
    {
        public string Title { get; set; } = "From Parent object";
    }
}

Parameter2.razor:

@page "/parameter-2"

<PageTitle>Parameter 2</PageTitle>

<h1>Parameter Example 2</h1>

<ParameterChild Title="@title" />

<ParameterChild Title="@GetTitle()" />

<ParameterChild Title="@DateTime.Now.ToLongDateString()" />

<ParameterChild Title="@panelData.Title" />

<ParameterChild Title="String literal title" Count="count" />

@code {
    private string title = "From Parent field";
    private PanelData panelData = new();
    private int count = 12345;

    private string GetTitle() => "From Parent method";

    private class PanelData
    {
        public string Title { get; set; } = "From Parent object";
    }
}

ParameterParent2.razor:

@page "/parameter-parent-2"

<ParameterChild Title="@title" />

<ParameterChild Title="@GetTitle()" />

<ParameterChild Title="@DateTime.Now.ToLongDateString()" />

<ParameterChild Title="@panelData.Title" />

<ParameterChild Title="String literal title" Count="count" />

@code {
    private string title = "From Parent field";
    private PanelData panelData = new();
    private int count = 12345;

    private string GetTitle()
    {
        return "From Parent method";
    }

    private class PanelData
    {
        public string Title { get; set; } = "From Parent object";
    }
}

ParameterParent2.razor:

@page "/parameter-parent-2"

<ParameterChild Title="@title" />

<ParameterChild Title="@GetTitle()" />

<ParameterChild Title="@DateTime.Now.ToLongDateString()" />

<ParameterChild Title="@panelData.Title" />

<ParameterChild Title="String literal title" Count="count" />

@code {
    private string title = "From Parent field";
    private PanelData panelData = new();
    private int count = 12345;

    private string GetTitle()
    {
        return "From Parent method";
    }

    private class PanelData
    {
        public string Title { get; set; } = "From Parent object";
    }
}

ParameterParent2.razor:

@page "/parameter-parent-2"

<ParameterChild Title="@title" />

<ParameterChild Title="@GetTitle()" />

<ParameterChild Title="@DateTime.Now.ToLongDateString()" />

<ParameterChild Title="@panelData.Title" />

<ParameterChild Title="String literal title" Count="count" />

@code {
    private string title = "From Parent field";
    private PanelData panelData = new PanelData();
    private int count = 12345;

    private string GetTitle()
    {
        return "From Parent method";
    }

    private class PanelData
    {
        public string Title { get; set; } = "From Parent object";
    }
}

Parameter3.razor:

@page "/parameter-3"

<PageTitle>Parameter 3</PageTitle>

<h1>Parameter Example 3</h1>

<ParameterChild Title="@GetTitle()" />

@code {
    private PanelData panelData = new();

    private string GetTitle() => $"Set by {panelData.Title}";

    private class PanelData
    {
        public string Title { get; set; } = "Parent";
    }
}

Parameter3.razor:

@page "/parameter-3"

<PageTitle>Parameter 3</PageTitle>

<h1>Parameter Example 3</h1>

<ParameterChild Title="@GetTitle()" />

@code {
    private PanelData panelData = new();

    private string GetTitle() => $"Set by {panelData.Title}";

    private class PanelData
    {
        public string Title { get; set; } = "Parent";
    }
}

ParameterParent3.razor:

@page "/parameter-parent-3"

<ParameterChild Title="@GetTitle()" />

@code {
    private PanelData panelData = new();

    private string GetTitle() => $"Set by {panelData.Title}";

    private class PanelData
    {
        public string Title { get; set; } = "Parent";
    }
}

ParameterParent3.razor:

@page "/parameter-parent-3"

<ParameterChild Title="@GetTitle()" />

@code {
    private PanelData panelData = new();

    private string GetTitle() => $"Set by {panelData.Title}";

    private class PanelData
    {
        public string Title { get; set; } = "Parent";
    }
}

ParameterParent3.razor:

@page "/parameter-parent-3"

<ParameterChild Title="@GetTitle()" />

@code {
    private PanelData panelData = new();

    private string GetTitle() => $"Set by {panelData.Title}";

    private class PanelData
    {
        public string Title { get; set; } = "Parent";
    }
}

ParameterParent3.razor:

@page "/parameter-parent-3"

<ParameterChild Title="@GetTitle()" />

@code {
    private PanelData panelData = new PanelData();

    private string GetTitle() => $"Set by {panelData.Title}";

    private class PanelData
    {
        public string Title { get; set; } = "Parent";
    }
}

Gerekli bileşen parametresini sağlamak için [EditorRequired] özniteliğini uygulayın. Parametre değeri sağlanmazsa, düzenleyiciler veya derleme araçları kullanıcıya uyarılar görüntüleyebilir. Bu öznitelik yalnızca [Parameter] özniteliğiyle de işaretlenmiş olan özelliklerde geçerlidir. EditorRequiredAttribute tasarım zamanında veya uygulama derlendiğinde zorunlu tutulur. Öznitelik çalışma zamanında zorunlu tutulmaz ve null olmayan bir parametre değerini garanti etmez.

[Parameter]
[EditorRequired]
public string? Title { get; set; }

Tek satırlı öznitelik listeleri de desteklenir:

[Parameter, EditorRequired]
public string? Title { get; set; }

Bileşen parametresi özelliklerinde değiştiriciyi veyarequirederişimciyi init kullanmayın. Bileşenler genellikle yansıma kullanılarak örneklenir ve parametre değerleri atanır; bu yöntem, init ve required garantilerini gerçekleştirmek üzere tasarlanmışken, bu garantileri geçersiz kılar. Bunun yerine gerekli bileşen parametresini [EditorRequired] belirtmek için özniteliğini kullanın.

Bileşen parametre değerlerini ayarlamak için yansımainit kullandığından, yalnızca init ayarlayıcı kısıtlamasını atladığı için bileşen parametresi özellikleri üzerinde erişimciyi kullanmayınParameterView.SetParameterProperties. [EditorRequired] Gerekli bir bileşen parametresini belirtmek için özniteliğini kullanın.

Bileşen parametresi özelliklerinde erişimciyi kullanmayın çünkü ParameterView.SetParameterPropertiesyansıma kullanarak bileşen parametresi değerlerini ayarlamak, yalnızca başlatıcı ayarlayıcı kısıtlamasını atlar.

Tuples (API belgeleri), bileşen parametreleri ve RenderFragment türleri için desteklenir. Aşağıdaki bileşen parametresi örneği Tuple içinde üç değer geçirir:

RenderTupleChild.razor:

<div class="card w-50" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Tuple Card</div>
    <div class="card-body">
        <ul>
            <li>Integer: @Data?.Item1</li>
            <li>String: @Data?.Item2</li>
            <li>Boolean: @Data?.Item3</li>
        </ul>
    </div>
</div>

@code {
    [Parameter]
    public (int, string, bool)? Data { get; set; }
}

RenderTupleParent.razor:

@page "/render-tuple-parent"

<PageTitle>Render Tuple Parent</PageTitle>

<h1>Render Tuple Parent Example</h1>

<RenderTupleChild Data="data" />

@code {
    private (int, string, bool) data = new(999, "I aim to misbehave.", true);
}

Adlandırılmış tanımlama kümeleri , aşağıdaki örnekte görüldüğü gibi desteklenir:

NamedTupleChild.razor:

<div class="card w-50" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Tuple Card</div>
    <div class="card-body">
        <ul>
            <li>Integer: @Data?.TheInteger</li>
            <li>String: @Data?.TheString</li>
            <li>Boolean: @Data?.TheBoolean</li>
        </ul>
    </div>
</div>

@code {
    [Parameter]
    public (int TheInteger, string TheString, bool TheBoolean)? Data { get; set; }
}

NamedTuples.razor:

@page "/named-tuples"

<PageTitle>Named Tuples</PageTitle>

<h1>Named Tuples Example</h1>

<NamedTupleChild Data="data" />

@code {
    private (int TheInteger, string TheString, bool TheBoolean) data = 
        new(999, "I aim to misbehave.", true);
}

Alıntı ©2005 Universal Pictures: Serenity (Nathan Fillion)

Tuples (API belgeleri), bileşen parametreleri ve RenderFragment türleri için desteklenir. Aşağıdaki bileşen parametresi örneği Tuple içinde üç değer geçirir:

RenderTupleChild.razor:

<div class="card w-50" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Tuple Card</div>
    <div class="card-body">
        <ul>
            <li>Integer: @Data?.Item1</li>
            <li>String: @Data?.Item2</li>
            <li>Boolean: @Data?.Item3</li>
        </ul>
    </div>
</div>

@code {
    [Parameter]
    public (int, string, bool)? Data { get; set; }
}

RenderTupleParent.razor:

@page "/render-tuple-parent"

<PageTitle>Render Tuple Parent</PageTitle>

<h1>Render Tuple Parent Example</h1>

<RenderTupleChild Data="data" />

@code {
    private (int, string, bool) data = new(999, "I aim to misbehave.", true);
}

Adlandırılmış tanımlama kümeleri , aşağıdaki örnekte görüldüğü gibi desteklenir:

NamedTupleChild.razor:

<div class="card w-50" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Tuple Card</div>
    <div class="card-body">
        <ul>
            <li>Integer: @Data?.TheInteger</li>
            <li>String: @Data?.TheString</li>
            <li>Boolean: @Data?.TheBoolean</li>
        </ul>
    </div>
</div>

@code {
    [Parameter]
    public (int TheInteger, string TheString, bool TheBoolean)? Data { get; set; }
}

NamedTuples.razor:

@page "/named-tuples"

<PageTitle>Named Tuples</PageTitle>

<h1>Named Tuples Example</h1>

<NamedTupleChild Data="data" />

@code {
    private (int TheInteger, string TheString, bool TheBoolean) data = 
        new(999, "I aim to misbehave.", true);
}

Alıntı ©2005 Universal Pictures: Serenity (Nathan Fillion)

Tuples (API belgeleri), bileşen parametreleri ve RenderFragment türleri için desteklenir. Aşağıdaki bileşen parametresi örneği Tuple içinde üç değer geçirir:

RenderTupleChild.razor:

<div class="card w-50" style="margin-bottom:15px">
    <div class="card-header font-weight-bold"><code>Tuple</code> Card</div>
    <div class="card-body">
        <ul>
            <li>Integer: @Data?.Item1</li>
            <li>String: @Data?.Item2</li>
            <li>Boolean: @Data?.Item3</li>
        </ul>
    </div>
</div>

@code {
    [Parameter]
    public (int, string, bool)? Data { get; set; }
}

RenderTupleParent.razor:

@page "/render-tuple-parent"

<h1>Render Tuple Parent</h1>

<RenderTupleChild Data="data" />

@code {
    private (int, string, bool) data = new(999, "I aim to misbehave.", true);
}

Adlandırılmış tanımlama kümeleri , aşağıdaki örnekte görüldüğü gibi desteklenir:

RenderNamedTupleChild.razor:

<div class="card w-50" style="margin-bottom:15px">
    <div class="card-header font-weight-bold"><code>Tuple</code> Card</div>
    <div class="card-body">
        <ul>
            <li>Integer: @Data?.TheInteger</li>
            <li>String: @Data?.TheString</li>
            <li>Boolean: @Data?.TheBoolean</li>
        </ul>
    </div>
</div>

@code {
    [Parameter]
    public (int TheInteger, string TheString, bool TheBoolean)? Data { get; set; }
}

RenderNamedTupleParent.razor:

@page "/render-named-tuple-parent"

<h1>Render Named Tuple Parent</h1>

<RenderNamedTupleChild Data="data" />

@code {
    private (int TheInteger, string TheString, bool TheBoolean) data = 
        new(999, "I aim to misbehave.", true);
}

Alıntı ©2005 Universal Pictures: Serenity (Nathan Fillion)

@page "/route-parameter-1/{text}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

<p>Blazor is @Text!</p>

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

@page "/route-parameter-1/{text}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

<p>Blazor is @Text!</p>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

Daha fazla bilgi için ASP.NET Core yönlendirme ve gezintisinin BlazorYol parametreleri bölümüne bakın. İsteğe bağlı yol parametreleri de desteklenir ve aynı bölümde ele alınmıştır. Birden çok klasör sınırındaki yolları yakalayan tümünü yakala yol parametreleri ({*pageRoute} ) hakkında bilgi için, ASP.NET Core yönlendirme ve gezintisininBlazor Tümünü yakala yol parametreleri bölümüne bakın.

Daha fazla bilgi için ASP.NET Core yönlendirme ve gezintisinin BlazorYol parametreleri bölümüne bakın. İsteğe bağlı yol parametreleri desteklenmez, bu nedenle iki @page yönerge gerekir (daha fazla bilgi için Rota parametreleri bölümüne bakın). Birden çok klasör sınırındaki yolları yakalayan tümünü yakala yol parametreleri ({*pageRoute} ) hakkında bilgi için, ASP.NET Core yönlendirme ve gezintisininBlazor Tümünü yakala yol parametreleri bölümüne bakın.

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Child content</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Child content</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Child content</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Child content</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Child content</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Child content</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

RenderFragments.razor:

@page "/render-fragments"

<PageTitle>Render Fragments</PageTitle>

<h1>Render Fragments Example</h1>

<RenderFragmentChild>
    Content of the child component is supplied
    by the parent component.
</RenderFragmentChild>

RenderFragments.razor:

@page "/render-fragments"

<PageTitle>Render Fragments</PageTitle>

<h1>Render Fragments Example</h1>

<RenderFragmentChild>
    Content of the child component is supplied
    by the parent component.
</RenderFragmentChild>

RenderFragmentParent.razor:

@page "/render-fragment-parent"

<h1>Render child content</h1>

<RenderFragmentChild>
    Content of the child component is supplied
    by the parent component.
</RenderFragmentChild>

RenderFragmentParent.razor:

@page "/render-fragment-parent"

<h1>Render child content</h1>

<RenderFragmentChild>
    Content of the child component is supplied
    by the parent component.
</RenderFragmentChild>

RenderFragmentParent.razor:

@page "/render-fragment-parent"

<h1>Render child content</h1>

<RenderFragmentChild>
    Content of the child component is supplied
    by the parent component.
</RenderFragmentChild>

RenderFragmentParent.razor:

@page "/render-fragment-parent"

<h1>Render child content</h1>

<RenderFragmentChild>
    Content of the child component is supplied
    by the parent component.
</RenderFragmentChild>

@inject ILogger<ReferenceChild> Logger

@if (value > 0)
{
    <p>
        <code>value</code>: @value
    </p>
}

@code {
    private int value;

    public void ChildMethod(int value)
    {
        Logger.LogInformation("Received {Value} in ChildMethod", value);

        this.value = value;
        StateHasChanged();
    }
}

@inject ILogger<ReferenceChild> Logger

@if (value > 0)
{
    <p>
        <code>value</code>: @value
    </p>
}

@code {
    private int value;

    public void ChildMethod(int value)
    {
        Logger.LogInformation("Received {Value} in ChildMethod", value);

        this.value = value;
        StateHasChanged();
    }
}

@using Microsoft.Extensions.Logging
@inject ILogger<ReferenceChild> Logger

@code {
    public void ChildMethod(int value)
    {
        Logger.LogInformation("Received {Value} in ChildMethod", value);
    }
}

@using Microsoft.Extensions.Logging
@inject ILogger<ReferenceChild> Logger

@code {
    public void ChildMethod(int value)
    {
        Logger.LogInformation("Received {Value} in ChildMethod", value);
    }
}

@using Microsoft.Extensions.Logging
@inject ILogger<ReferenceChild> Logger

@code {
    public void ChildMethod(int value)
    {
        Logger.LogInformation("Received {Value} in ChildMethod", value);
    }
}

@using Microsoft.Extensions.Logging
@inject ILogger<ReferenceChild> Logger

@code {
    public void ChildMethod(int value)
    {
        Logger.LogInformation("Received {Value} in ChildMethod", value);
    }
}

@page "/reference-parent"

<div>
    <button @onclick="@(() => childComponent1!.ChildMethod(5))">
        Call <code>ReferenceChild.ChildMethod</code> (first instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent1" />
</div>

<div>
    <button @onclick="CallChildMethod">
        Call <code>ReferenceChild.ChildMethod</code> (second instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent2" />
</div>

@code {
    private ReferenceChild? childComponent1;
    private ReferenceChild? childComponent2;

    private void CallChildMethod() => childComponent2!.ChildMethod(5);
}

@page "/reference-parent"

<div>
    <button @onclick="@(() => childComponent1!.ChildMethod(5))">
        Call <code>ReferenceChild.ChildMethod</code> (first instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent1" />
</div>

<div>
    <button @onclick="CallChildMethod">
        Call <code>ReferenceChild.ChildMethod</code> (second instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent2" />
</div>

@code {
    private ReferenceChild? childComponent1;
    private ReferenceChild? childComponent2;

    private void CallChildMethod() => childComponent2!.ChildMethod(5);
}

@page "/reference-parent"

<div>
    <button @onclick="@(() => childComponent1!.ChildMethod(5))">
        Call <code>ReferenceChild.ChildMethod</code> (first instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent1" />
</div>

<div>
    <button @onclick="CallChildMethod">
        Call <code>ReferenceChild.ChildMethod</code> (second instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent2" />
</div>

@code {
    private ReferenceChild? childComponent1;
    private ReferenceChild? childComponent2;

    private void CallChildMethod()
    {
        childComponent2!.ChildMethod(5);
    }
}

@page "/reference-parent"

<div>
    <button @onclick="@(() => childComponent1!.ChildMethod(5))">
        Call <code>ReferenceChild.ChildMethod</code> (first instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent1" />
</div>

<div>
    <button @onclick="CallChildMethod">
        Call <code>ReferenceChild.ChildMethod</code> (second instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent2" />
</div>

@code {
    private ReferenceChild? childComponent1;
    private ReferenceChild? childComponent2;

    private void CallChildMethod()
    {
        childComponent2!.ChildMethod(5);
    }
}

@page "/reference-parent"

<div>
    <button @onclick="@(() => childComponent1!.ChildMethod(5))">
        Call <code>ReferenceChild.ChildMethod</code> (first instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent1" />
</div>

<div>
    <button @onclick="CallChildMethod">
        Call <code>ReferenceChild.ChildMethod</code> (second instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent2" />
</div>

@code {
    private ReferenceChild childComponent1;
    private ReferenceChild childComponent2;

    private void CallChildMethod()
    {
        childComponent2!.ChildMethod(5);
    }
}

@page "/reference-parent"

<div>
    <button @onclick="@(() => childComponent1!.ChildMethod(5))">
        Call <code>ReferenceChild.ChildMethod</code> (first instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent1" />
</div>

<div>
    <button @onclick="CallChildMethod">
        Call <code>ReferenceChild.ChildMethod</code> (second instance) 
        with an argument of 5
    </button>

    <ReferenceChild @ref="childComponent2" />
</div>

@code {
    private ReferenceChild childComponent1;
    private ReferenceChild childComponent2;

    private void CallChildMethod()
    {
        childComponent2!.ChildMethod(5);
    }
}

MarkupStrings.razor:

@page "/markup-strings"

<PageTitle>Markup Strings</PageTitle>

<h1>Markup Strings Example</h1>

@((MarkupString)myMarkup)

@code {
    private string myMarkup =
        "<p class=\"text-danger\">This is a dangerous <em>markup string</em>.</p>";
}

MarkupStrings.razor:

@page "/markup-strings"

<PageTitle>Markup Strings</PageTitle>

<h1>Markup Strings Example</h1>

@((MarkupString)myMarkup)

@code {
    private string myMarkup =
        "<p class=\"text-danger\">This is a dangerous <em>markup string</em>.</p>";
}

MarkupStringExample.razor:

@page "/markup-string-example"

@((MarkupString)myMarkup)

@code {
    private string myMarkup =
        "<p class=\"text-danger\">This is a dangerous <em>markup string</em>.</p>";
}

MarkupStringExample.razor:

@page "/markup-string-example"

@((MarkupString)myMarkup)

@code {
    private string myMarkup =
        "<p class=\"text-danger\">This is a dangerous <em>markup string</em>.</p>";
}

MarkupStringExample.razor:

@page "/markup-string-example"

@((MarkupString)myMarkup)

@code {
    private string myMarkup =
        "<p class=\"text-danger\">This is a dangerous <em>markup string</em>.</p>";
}

MarkupStringExample.razor:

@page "/markup-string-example"

@((MarkupString)myMarkup)

@code {
    private string myMarkup =
        "<p class=\"text-danger\">This is a dangerous <em>markup string</em>.</p>";
}

@page "/razor-template"

<PageTitle>Razor Template</PageTitle>

<h1>Razor Template Example</h1>

@timeTemplate

@petTemplate(new Pet { Name = "Nutty Rex" })

@code {
    private RenderFragment timeTemplate = @<p>The time is @DateTime.Now.</p>;
    private RenderFragment<Pet> petTemplate = (pet) => @<p>Pet: @pet.Name</p>;

    private class Pet
    {
        public string? Name { get; set; }
    }
}

@page "/razor-template"

<PageTitle>Razor Template</PageTitle>

<h1>Razor Template Example</h1>

@timeTemplate

@petTemplate(new Pet { Name = "Nutty Rex" })

@code {
    private RenderFragment timeTemplate = @<p>The time is @DateTime.Now.</p>;
    private RenderFragment<Pet> petTemplate = (pet) => @<p>Pet: @pet.Name</p>;

    private class Pet
    {
        public string? Name { get; set; }
    }
}

@page "/razor-template"

@timeTemplate

@petTemplate(new Pet { Name = "Nutty Rex" })

@code {
    private RenderFragment timeTemplate = @<p>The time is @DateTime.Now.</p>;
    private RenderFragment<Pet> petTemplate = (pet) => @<p>Pet: @pet.Name</p>;

    private class Pet
    {
        public string? Name { get; set; }
    }
}

@page "/razor-template"

@timeTemplate

@petTemplate(new Pet { Name = "Nutty Rex" })

@code {
    private RenderFragment timeTemplate = @<p>The time is @DateTime.Now.</p>;
    private RenderFragment<Pet> petTemplate = (pet) => @<p>Pet: @pet.Name</p>;

    private class Pet
    {
        public string? Name { get; set; }
    }
}

@page "/razor-template"

@timeTemplate

@petTemplate(new Pet { Name = "Nutty Rex" })

@code {
    private RenderFragment timeTemplate = @<p>The time is @DateTime.Now.</p>;
    private RenderFragment<Pet> petTemplate = (pet) => @<p>Pet: @pet.Name</p>;

    private class Pet
    {
        public string Name { get; set; }
    }
}

@page "/razor-template"

@timeTemplate

@petTemplate(new Pet { Name = "Nutty Rex" })

@code {
    private RenderFragment timeTemplate = @<p>The time is @DateTime.Now.</p>;
    private RenderFragment<Pet> petTemplate = (pet) => @<p>Pet: @pet.Name</p>;

    private class Pet
    {
        public string Name { get; set; }
    }
}

Blazor, SVG içinde rastgele HTML görüntülemek için <foreignObject> öğesini destekler. İşaretleme rastgele HTML'yi, RenderFragment veya Razor bileşenini temsil edebilir.

Aşağıdaki örnekte şunlar gösterilir:

• Bir string (@message) görüntüsü.
• <input> öğesi ve value alanıyla iki yönlü bağlama.
• Bir Robot bileşeni.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" rx="10" ry="10" width="200" height="200" stroke="black" 
        fill="none" />
    <foreignObject x="20" y="20" width="160" height="160">
        <p>@message</p>
    </foreignObject>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="200" height="200">
        <label>
            Two-way binding:
            <input @bind="value" @bind:event="oninput" />
        </label>
    </foreignObject>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
    <foreignObject>
        <Robot />
    </foreignObject>
</svg>

@code {
    private string message = "Lorem ipsum dolor sit amet, consectetur adipiscing " +
        "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

    private string? value;
}

yönergesi @preservewhitespace değeriyle truekullanılmadığı sürece, şu durumda fazladan boşluk kaldırılır:

• Bir öğenin içinde başta veya sonda yer alma.
• RenderFragment / RenderFragment<TValue> parametresinin içinde (örneğin başka bir bileşene aktarılan alt içerik), başta veya sonda yer alıyorsa.
• @if veya @foreach gibi bir C# kod bloğunun önünde veya ardından yer alıyorsa.

Boşluk kaldırma işlemi, white-space: pre gibi bir CSS kuralı kullanılırken işlenen çıkışı etkileyebilir. Bu performans iyileştirmesini devre dışı bırakmak ve boşluğu korumak için aşağıdaki eylemlerden birini gerçekleştirin:

• Tercihi belirli bir bileşene uygulamak için @preservewhitespace true dosyasının (Razor) en üstüne .razor yönergesini ekleyin.
• Tercihi bir alt dizine veya projenin tamamına uygulamak için @preservewhitespace true dosyasının içine _Imports.razor yönergesini ekleyin.

Çoğu durumda uygulamalar normal (ama daha hızlı) davranmaya devam ettiğinden hiçbir eylem gerekmez. Belirli bir bileşende boşluğun ayıklanması işleme sorununa yol açıyorsa, söz konusu bileşende @preservewhitespace true kullanarak bu iyileştirmeyi devre dışı bırakın.

Bileşenin kaynak işaretlemesinde boşluk korunur. Yalnızca boşluktan oluşan metin, hiçbir görsel etkisi olmasa bile tarayıcının DOM'unda işlenir.

Aşağıdaki bileşen işaretlemesini inceleyin:

<ul>
    @foreach (var item in Items)
    {
        <li>
            @item.Text
        </li>
    }
</ul>

Yukarıdaki örnek, aşağıdaki gereksiz boşlukları gösterir.

• @foreach kod bloğunun dışında.
• <li> öğesinin çevresinde.
• @item.Text çıkışının çevresinde.

100 öğeden oluşan bir liste 400'ün üzerinde boşluk alanına neden olur. Ek boşlukların hiçbiri gösterilen çıktının üzerinde görsel olarak etkisi olmaz.

Bileşenler için statik HTML'yi işlerken, bir etiketin içindeki boşluk korunmaz. Örneğin bir bileşenin <img> dosyasında (Razor) aşağıdaki .razor etiketinin işlenen çıkışına bakın:

<img     alt="Example image"   src="img.png"     />

Önceki işaretlemeden kalan boşluk korunmaz:

<img alt="Example image" src="img.png" />

Kök bileşen

Kök Razor bileşen (kök bileşen), uygulama tarafından oluşturulan herhangi bir bileşen hiyerarşisinin yüklendiği ilk bileşendir.

Proje şablonu Blazor Web App kullanılarak oluşturulan bir uygulamada, App bileşeni (App.razor), sunucu tarafı MapRazorComponents<TRootComponent> dosyasında Program çağrısı için bildirilen tür parametresi ile varsayılan kök bileşen olarak belirtilir. Aşağıdaki örnekte, bileşenin App proje şablonundan Blazor oluşturulan bir uygulama için varsayılan olan kök bileşen olarak kullanılması gösterilmektedir:

app.MapRazorComponents<App>();

Proje şablonundan Blazor Server oluşturulan bir uygulamada bileşen App (App.razor), Bileşen Etiketi YardımcısıPages/_Host.cshtmliçindeki varsayılan kök bileşen olarak belirtilir:

<component type="typeof(App)" render-mode="ServerPrerendered" />

Proje şablonundan Blazor WebAssembly oluşturulan bir uygulamada, App bileşen (App.razor) dosyasında varsayılan kök bileşen Program olarak belirtilir:

builder.RootComponents.Add<App>("#app");

Önceki kodda, CSS seçicisi #app, wwwroot/index.html içindeki <div> için belirtilmiş olan App bileşenini id olarak gösterir: app

<div id="app">...</app>