ASP.NET Core Razor bileşenleri

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

✔️Destekli: ProductDetail.razor

❌Desteklenme -yen: productDetail.razor

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

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

†Pascal büyük/küçük harf yazımı (camel büyük harf) 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.
‡Kebap olayı, sözcükler arasında küçük harfler ve tireler kullanan boşluklar ve noktalama işaretleri 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 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 _Imports.razor dosyasına @using yönergesini ekleyin. Aşağıdaki örnek AdminComponents klasöründeki bileşenleri kullanılabilir duruma getirir:

@using BlazorSample.AdminComponents

Diğer adla ifadeler using desteklenir. Aşağıdaki örnekte, bileşenin GridRendering genel WeatherForecast sınıfı, uygulamanın başka bir yerindeki bir bileşende olduğu gibi WeatherForecast 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 AdminComponents/Pages klasöründe yer alan ProductDetail 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):

• Razor dosyasının işaretlemesindeki @namespace 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, bileşenin ad alanına bir proje ad BlazorSample alanı BlazorSample.Components.Pages Home ile çözümlenir{PROJECT NAMESPACE}/Components/Pages/Home.razor. {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 Components/Layout klasöründeki NavMenu 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

❌Desteklenme -yen: productDetail.razor

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

• Dosya yolları ve dosya adları Pascal büyük/küçük harf kullanır† ve kod örnekleri gösterilmeden ö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 dosyası yolları, kebap durumundaki URL'lerini eşleştirerek bir bileşenin rota şablonundaki sözcükler arasında kısa çizgiler görünür. Örneğin /product-detail yönlendirme şablonu olan ProductDetail bileşeni (@page "/product-detail") tarayıcıda /product-detail göreli URL'sinde istendi.

†Pascal büyük/küçük harf yazımı (camel büyük harf) 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.
‡Kebap olayı, sözcükler arasında küçük harfler ve tireler kullanan boşluklar ve noktalama işaretleri 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 _Imports.razor dosyasına @using yönergesini ekleyin. Aşağıdaki örnek AdminComponents klasöründeki bileşenleri kullanılabilir duruma getirir:

@using BlazorSample.AdminComponents

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

@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 Components klasöründe yer alan ProductDetail 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):

• Razor dosyasının işaretlemesindeki @namespace 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, bileşenin ad alanına bir proje ad BlazorSample alanı BlazorSample.Pages Index ile çözümlenir{PROJECT NAMESPACE}/Pages/Index.razor. {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 Shared klasöründeki NavMenu 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;

Klasör gibi Layout ek klasörler de eklenebilir:

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 />

namespace BlazorSample;

public class PanelBody
{
    public string? Text { get; set; }
    public string? Style { get; set; }
}

namespace BlazorSample;

public class PanelBody
{
    public string? Text { get; set; }
    public string? Style { get; set; }
}

public class PanelBody
{
    public string? Text { get; set; }
    public string? Style { get; set; }
}

public class PanelBody
{
    public string? Text { get; set; }
    public string? Style { get; set; }
}

public class PanelBody
{
    public string Text { get; set; }
    public string Style { get; set; }
}

public class PanelBody
{
    public string Text { get; set; }
    public string Style { 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">
        @Body.Text
    </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"
        };
}

<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">
        @Body.Text
    </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"
        };
}

<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">
        @Body.Text
    </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"
        };
}

<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">
        @Body.Text
    </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"
        };
}

<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">
        @Body.Text
    </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"
        };
}

<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">
        @Body.Text
    </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"
        };
}

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" />

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

    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" />

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

    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" />

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

    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" />

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

    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" />

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

    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 veyainit erişimciyi required kullanmayın. Bileşenler genellikle yansıma kullanılarak örneklenir ve parametre değerleri atanır ve bu değerler, yapmak üzere tasarlanan init ve required garantileri atlar. Bunun yerine gerekli bileşen parametresini [EditorRequired] belirtmek için özniteliğini kullanın.

Bileşen parametresi değerlerini ile ayarladığınızda yalnızca init ayarlayıcı kısıtlamasını atlayan yansıma kullanıldığından bileşen parametresi özelliklerinde erişimciyi kullanmayıninit.ParameterView.SetParameterProperties [EditorRequired] Gerekli bir bileşen parametresini belirtmek için özniteliğini kullanın.

Bileşen parametresi değerlerini ile ayarladığınızda yalnızca init ayarlayıcı kısıtlamasını atlayan yansıma kullanıldığından bileşen parametresi özelliklerinde erişimciyi kullanmayıninit.ParameterView.SetParameterProperties

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 Blazor yönlendirme ve gezintisinin Yol 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 Blazor yönlendirme ve gezintisinin Tümünü yakala yol parametreleri bölümüne bakın.

Daha fazla bilgi için ASP.NET Core Blazor yönlendirme ve gezintisinin Yol 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 Blazor yönlendirme ve gezintisinin 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.
• 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:

• Öğenin içinde başta veya sonda yer alıyorsa.
• RenderFragment/RenderFragment<TValue> parametresinin (örneğin başka bir bileşene geçirilen alt içerik) içinde 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 Razor dosyasının (.razor) en üstüne @preservewhitespace true yönergesini ekleyin.
• Tercihi bir alt dizine veya projenin tamamına uygulamak için _Imports.razor dosyasının içine @preservewhitespace true 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şluğu işler:

• @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şluklardan hiçbiri işlenen çıkışı görsel olarak etkilemez.

Bileşenler için statik HTML'yi işlerken, bir etiketin içindeki boşluk korunmaz. Örneğin bir bileşenin Razor dosyasında (.razor) aşağıdaki <img> 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 şablonundan Blazor Web App oluşturulan bir uygulamada, App bileşen (App.razor) sunucu tarafı Program dosyasında çağrısı MapRazorComponents<TRootComponent> için bildirilen tür parametresi tarafından 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ı kullanılarak içindeki Pages/_Host.cshtml 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");

Yukarıdaki kodda, CSS seçicisi, bileşenin App ile içinde appid için belirtildiğini <div> wwwroot/index.html gösterir: #app

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

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

Statik olarak işlenmiş bileşenler yalnızca uygulamaya eklenebilir. Bunlar daha sonra kaldırılamaz veya güncelleştirilemez.

Daha fazla bilgi edinmek için aşağıdaki kaynaklara bakın:

• ASP.NET Core'da Bileşen Etiketi Yardımcısı
• ASP.NET Core Razor bileşenlerini ASP.NET Core uygulamalarıyla tümleştirme

• ASP.NET Core'da Bileşen Etiketi Yardımcısı
• ASP.NET Core Razor bileşenlerini önceden işleme ve tümleştirme