ASP.NET Core Razor bileşenleri

Makale
02/09/2024

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bu makalede Blazor uygulamalarında Razor bileşenleri oluşturma ve kullanma işlemleri açıklanır, ayrıca Razor söz dizimi, bileşen adlandırması, ad alanları ve bileşen parametreleri hakkında rehberlik sağlanır.

Razor bileşenleri

Blazoruygulamalar, bileşenler kullanılarak Razoroluşturulur ve bunlar genellikle bileşenler veya yalnızca bileşenler olarak Blazor bilinir. Bileşen, kullanıcı arabiriminin (UI) dinamik davranışı etkinleştirmek için işleme mantığına sahip, bağımsız çalışan bir bölümüdür. Bileşenler iç içe geçirilebilir, yeniden kullanılabilir, projeler arasında paylaşılabilir ve MVC ve Razor Sayfalar uygulamalarında kullanılabilir.

Bileşenler, kullanıcı arabirimini esnek ve verimli bir şekilde güncelleştirmek için kullanılan işleme ağacı olarak adlandırılan tarayıcının Belge Nesne Modeli'nin (DOM) bellek içi gösterimine işlenir.

"Razor Bileşenler" bazı adlandırmaları diğer ASP.NET Core içerik işleme teknolojileriyle paylaşsa da, Razor bileşenler ASP.NET Core'daki aşağıdaki farklı özelliklerden ayırt edilmelidir:

Bileşen sınıfları

Bileşenler, .razor dosya uzantısına sahip Razor bileşen dosyalarında C# ile HTML işaretlemesinin bir bileşimini kullanarak uygulanır.

Varsayılan olarak, ComponentBase bileşen dosyaları tarafından Razor açıklanan bileşenler için temel sınıftır. ComponentBase bileşenlerin en düşük soyutlaması olan arabirimini IComponent uygular. ComponentBase temel işlevlere yönelik bileşen özelliklerini ve yöntemlerini tanımlar; örneğin, yerleşik bileşen yaşam döngüsü olaylarını işlemek için.

ComponentBasebaşvuru kaynağındadotnet/aspnetcore: Başvuru kaynağı, yerleşik yaşam döngüsü olaylarıyla ilgili ek açıklamalar içerir. Ancak, bileşen özelliklerinin iç uygulamalarının herhangi bir zamanda bildirimde bulunmadan değiştirilebilir olduğunu unutmayın.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Geliştiriciler genellikle bileşen dosyalarından Razor (.razor) bileşenler oluşturur Razor veya bileşenlerini üzerinde ComponentBasetemel alır, ancak bileşenleri de uygulanarak IComponentoluşturulabilir. Uygulayan IComponent geliştirici tarafından oluşturulan bileşenler, geliştiricinin oluşturması ve sürdürmesi gereken olaylar ve yaşam döngüsü yöntemleriyle işlemeyi el ile tetikleme pahasına işleme üzerinde alt düzey denetime sahip olabilir.

Razor söz dizimi

Bileşenler Razor söz dizimini kullanır. İki Razor özelliği bileşenler tarafından yaygın olarak kullanılır: yönergeler ve yönerge öznitelikleri. Bunlar Razor işaretlemesinde görüntülenen @ ön ekli ayrılmış anahtar sözcüklerdir:

Yönergeler: Bileşen işaretlemesinin ayrıştırılma veya çalışma şeklini değiştirir. Örneğin @page yönergesi, yönlendirme şablonu olan yönlendirilebilir bir bileşen belirtir ve kullanıcının tarayıcıdaki isteği buna belirli bir URL'de doğrudan erişebilir.

Kural gereği, bir bileşenin bir bileşen tanımının (.razor dosya) en üstündeki yönergeleri tutarlı bir sırada yerleştirilir. Yinelenen yönergeler için yönergeler, özel ikinci düzey sıralamaya sahip yönergeler dışında @using ad alanına veya türe göre alfabetik olarak yerleştirilir.

Aşağıdaki sıra örnek uygulamalar ve belgeler tarafından Blazor benimsenmiştir. Proje Blazor şablonu tarafından sağlanan bileşenler aşağıdaki sıraylan farklı olabilir ve farklı bir biçim kullanabilir. Örneğin, çerçeve bileşenleri yönerge Blazor blokları ile @inject yönerge blokları @using arasında boş satırlar Identity içerir. Kendi uygulamalarınızda özel bir sipariş düzeni ve biçimi kullanabilirsiniz.

Belgeler ve örnek uygulama Razor yönerge sırası:
- @page
- @rendermode (.NET 8 veya üzeri)
- @using
  - System ad alanları (alfabetik sıra)
  - Microsoft ad alanları (alfabetik sıra)
  - Üçüncü taraf API ad alanları (alfabetik sıra)
  - Uygulama ad alanları (alfabetik sıra)
- Diğer yönergeler (alfabetik sıra)
Yönergeler arasında boş satır görünmez. Yönergeler ile işaretlemenin ilk satırı arasında boş bir satır Razor görünür.

Örnek:
```
@page "/doctor-who-episodes/{season:int}"
@rendermode InteractiveWebAssembly
@using System.Globalization
@using System.Text.Json
@using Microsoft.AspNetCore.Localization
@using Mandrill
@using BlazorSample.Components.Layout
@attribute [Authorize]
@implements IAsyncDisposable
@inject IJSRuntime JS
@inject ILogger<DoctorWhoEpisodes> Logger

<PageTitle>Doctor Who Episode List</PageTitle>

...
```
Yönerge öznitelikleri: Bileşen öğesinin ayrıştırılma veya çalışma şeklini değiştirir.

Örnek:
```
<input @bind="episodeId" />
```
Yönerge öznitelik değerlerini açık Razor olmayan ifadeler@bind="@episodeId" ()@ için at simgesi ( ) ile ön ekleyebilirsiniz, ancak bunu önermeyiz ve belgeler örneklerde yaklaşımı benimsemez.

Bileşenlerde kullanılan yönergeler ve yönerge öznitelikleri bu makalede ve Blazor belge kümesinin diğer makalelerinde ayrıntılı olarak açıklanmıştır. Razor söz dizimi hakkında genel bilgiler için bkz. ASP.NET Core için Razor söz dizimi başvurusu.

Bileşen adı, sınıf adı ve ad alanı

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

Desteklenen: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

Not

_Imports.razor dosyasındaki @using yönergeleri yalnızca Razor dosyalarına (.razor) uygulanır; C# dosyalarına (.cs) uygulanmaz.

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.PagesHome 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:

Desteklenen: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.

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.

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

@using BlazorSample.AdminComponents

Not

_Imports.razor dosyasındaki @using yönergeleri yalnızca Razor dosyalarına (.razor) uygulanır; C# dosyalarına (.cs) uygulanmaz.

@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.PagesIndex 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.

Kısmi sınıf desteği

Bileşenler C# kısmi sınıfları olarak oluşturulur ve aşağıdaki yaklaşımlardan biri kullanılarak yazılır:

Tek bir dosya bir veya birden fazla @code bloğunda tanımlanan C# kodunu, HTML işaretlemesini ve Razor işaretlemesini içerir. Blazor proje şablonları bileşenlerini bu tek dosya yaklaşımını kullanarak tanımlar.
HTML ve Razor işaretlemesi Razor dosyasına (.razor) yerleştirilir. C# kodu kısmi sınıf olarak arka plan kod dosyasına yerleştirilir (.cs).

Not

Bileşene özgü stillerin tanımlandığı bileşen stil sayfası ayrı bir dosyadır (.css). Blazor CSS yalıtımı daha sonra ASP.NET Core Blazor CSS yalıtımı bölümünde açıklanır.

Aşağıdaki örnekte Blazor proje şablonundan oluşturulan bir uygulamada @code bloğunu içeren varsayılan Counter bileşeni gösterilir. İşaretleme ve C# kodu aynı dosyadadır. Bu, bileşen yazılırken benimsenen en yaygın yaklaşımdır.

Counter.razor:

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

Aşağıdaki Counter bileşen, kısmi sınıfa sahip bir arka planda kod dosyası kullanarak C# kodundan sunu HTML'sini ve Razor işaretlemesini böler. İşaretlemeyi C# kodundan bölmek, bazı kuruluşlar ve geliştiriciler tarafından bileşen kodlarını çalışmayı tercih ettikleri şekilde düzenlemek için tercih edilir. Örneğin, kuruluşun kullanıcı arabirimi uzmanı, bileşenin C# mantığı üzerinde çalışan başka bir geliştiriciden bağımsız olarak sunu katmanı üzerinde çalışabilir. Yaklaşım, otomatik olarak oluşturulan kod veya kaynak oluşturucularla çalışırken de kullanışlıdır. Daha fazla bilgi için bkz . Kısmi Sınıflar ve Yöntemler (C# Programlama Kılavuzu).

CounterPartialClass.razor:

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

CounterPartialClass.razor.cs:

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

_Imports.razor dosyasındaki @using yönergeleri yalnızca Razor dosyalarına (.razor) uygulanır; C# dosyalarına (.cs) uygulanmaz. Kısmi sınıf dosyasına gereken ad alanlarını ekleyin.

Bileşenler tarafından kullanılan tipik ad alanları:

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;

Temel sınıf belirtme

Bileşenin temel sınıfını belirtmek için @inherits yönergesi kullanılır. Yalnızca C# mantığından işaretlemeyi bölen kısmi sınıfların aksine, temel sınıf kullanmak temel sınıfın özelliklerini ve yöntemlerini paylaşan bir bileşen grubu genelinde kullanmak üzere C# kodunu devralmanıza olanak tanır. Temel sınıfların kullanılması uygulamalarda kod yedekliliğini azaltır ve sınıf kitaplıklarından birden çok uygulama için temel kod sağlarken yararlıdır. Daha fazla bilgi için bkz . C# ve .NET'te devralma.

Aşağıdaki örnekte temel BlazorRocksBase1 sınıf öğesinden ComponentBasetüretilmiştir.

BlazorRocks1.razor:

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

BlazorRocksBase1.cs:

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

Yönlendirme

Blazor'da yönlendirme, uygulamadaki her erişilebilir bileşene @page yönergesiyle bir yönlendirme şablonu sağlama yoluyla elde edilir. @page yönergesini içeren bir Razor dosyası derlendiğinde, oluşturulan sınıfa yönlendirme şablonunu belirten bir RouteAttribute verilir. Çalışma zamanında yönlendirici RouteAttribute içeren bileşen sınıflarını arar ve istenen URL'yle eşleşen yönlendirme şablonuna sahip olan bileşeni işler.

Aşağıdaki HelloWorld bileşen bir yol şablonu /hello-worldkullanır ve bileşenin işlenen web sayfasına göreli URL'sinde /hello-worldulaşılır.

HelloWorld.razor:

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

Bileşeni uygulamanın kullanıcı arabirimi gezintisine ekleyip eklemediğinize bakılmaksızın, tarayıcıda /hello-world konumunda önceki bileşen yüklenir. İsteğe bağlı olarak bileşenler NavMenu bileşenine eklenebilir ve böylelikle bileşenin bağlantısı uygulamanın kullanıcı arabirimi tabanlı gezintisinde görünür.

Önceki HelloWorld bileşen için bileşene NavMenu bir NavLink bileşen ekleyebilirsiniz. Daha fazla bilgi edinmek ve NavLink ile NavMenu bileşenlerinin açıklamalarını görmek için bkz. ASP.NET Core Blazor yönlendirme ve gezintisi.

Markup

Bileşenin kullanıcı arabirimi, Razor işaretlemesi, C# ve HTML'den oluşan Razor söz dizimi kullanılarak tanımlanır. Uygulama derlenirken HTML işaretlemesi ile C# işleme mantığı bir bileşen sınıfına dönüştürülür. Oluşturulan sınıfın adı dosyanın adıyla eşleşir.

Bileşen sınıfının üyeleri bir veya birden fazla @code bloğunda tanımlanır. @code bloklarında bileşen durumu C# ile belirtilir ve işlenir:

Özellik ve alan başlatıcıları.
Üst bileşenler ve yönlendirme parametreleri tarafından geçirilen bağımsız değişkenlerden parametre değerleri.
Kullanıcı olayı işleme yöntemleri, yaşam döngüsü olayları ve özel bileşen mantığı.

Bileşen üyeleri @ sembolüyle başlayan C# ifadelerini kullanan işleme mantığında kullanılır. Örneğin C# alanı, alan adına @ ön eki eklenerek işlenir. Aşağıdaki Markup bileşeni şunları değerlendirir ve işler:

Başlık öğesinin font-style CSS özellik değeri için headingFontStyle.
Başlık öğesinin içeriği için headingText.

Markup.razor:

@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!";
}

Not

Tüm Blazor belgelerindeki örnekler özel üyeler için private erişim değiştiricisini belirtir. Özel üyelerin kapsamı bir bileşenin sınıfı olarak belirlenir. Bununla birlikte hiç erişim değiştiricisi olmadığında C# varsayılan olarak private erişim değiştiricisini kullanır, dolayısıyla kendi kodunuzda üyeleri açıkça "private" olarak işaretlemek isteğe bağlıdır. Erişim değiştiricileri hakkında daha fazla bilgi için bkz. Erişim Değiştiricileri (C# Programlama Kılavuzu).

ÇerçeveBlazor, bir bileşenin DOM ve Basamaklı Stil Sayfası Nesne Modeli'nin (CSSOM) birleşimi olan bir işleme ağacı olarak dahili olarak işler. Bileşen başlangıçta işlendikten sonra olaylara yanıt olarak bileşenin işleme ağacı yeniden oluşturulur. Blazor yeni işleme ağacını önceki işleme ağacıyla karşılaştırır ve tüm değişiklikleri görüntüleme için tarayıcının Belge Nesne Modeli'ne (DOM) uygular. Daha fazla bilgi için bkz. ASP.NET Core Razor bileşenini işleme.

C# denetim yapıları, yönergeleri ve yönerge öznitelikleri için Razor söz dizimi küçük harftir (örnekler: @if, @code, @bind). Özellik adları büyük harf yazılır (örnek: LayoutComponentBase.Body için @Body).

Zaman uyumsuz yöntemler (`async`) `void` döndürmeyi desteklemez

Blazor çerçevesi void döndüren zaman uyumsuz yöntemleri (async) izlemez. Sonuç olarak void döndürülürse özel durumlar yakalanmaz. Zaman uyumsuz yöntemlerden her zaman Task döndürün.

İç içe yerleştirilmiş bileşenler

Bileşenler HTML söz dizimini kullanıp bildirimde bulunarak diğer bileşenleri içerebilir. Bileşen kullanmaya yönelik işaretleme HTML etiketine benzer; burada etiketin adı bileşen türüdür.

Diğer bileşenler tarafından başlık görüntülemek için kullanılabilen şu Heading bileşenini düşünün.

Heading.razor:

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

HeadingExample bileşeninde yer alan aşağıdaki işaretleme, <Heading /> etiketinin gösterildiği konumda önceki Heading bileşenini işler.

HeadingExample.razor:

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

Bileşen, büyük harfle başlayan ve aynı ad alanı içinde bileşen adıyla eşleşmeyen bir HTML öğesi içeriyorsa, öğenin beklenmeyen bir adı olduğunu belirten bir uyarı gösterilir. Bileşenin ad alanı için @using yönergesinin eklenmesi bileşeni kullanılabilir duruma getirir ve bu da uyarıyı çözer. Daha fazla bilgi için Bileşen adı, sınıf adı ve ad alanı bölümüne bakın.

Bu bölümde gösterilen örnek Heading bileşeninin @page yönergesi yoktur, dolayısıyla Heading bileşenine kullanıcı tarayıcıda yapılan bir istekle doğrudan erişemez. Öte yandan @page yönergesi olan tüm bileşenler başka bileşenlerle iç içe yerleştirilebilir. Heading bileşeni Razor dosyasının üstüne @page "/heading" eklenerek doğrudan erişilebilir yapılsaydı, bileşen hem /heading hem de /heading-example konumunda tarayıcı istekleri için işlenebilirdi.

Bileşen parametreleri

Bileşen parametreleri verileri bileşenlere geçirir ve [Parameter] özniteliğiyle bileşen sınıfında genel C# özellikleri kullanılarak tanımlanır. Aşağıdaki örnekte bileşen parametreleri olarak yerleşik bir başvuru türü (System.String) ve kullanıcı tanımlı bir başvuru türü (PanelBody) geçirilir.

PanelBody.cs:

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

ParameterChild.razor:

<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()
        {
            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"
        };
}

Uyarı

Bileşen parametreleri ilk değerlerinin sağlanması desteklenir ama bileşen ilk kez işlendikten sonra kendi parametrelerine yazan bir bileşen oluşturmayın. Daha fazla bilgi için bkz . ASP.NET Core'da Blazorparametrelerin üzerine yazmaktan kaçının.

ParameterChild bileşeninin Title ve Body bileşen parametreleri, bileşenin örneğini işleyen HTML etiketindeki bağımsız değişkenler tarafından ayarlanır. Aşağıdaki ParameterParent bileşeni iki ParameterChild bileşenini işler:

İlk ParameterChild bileşeni parametre bağımsız değişkenleri sağlanmadan işlenir.
İkinci ParameterChild bileşeni, PanelBody'nin özelliklerine ait değerleri ayarlamak için açık bir C# ifadesini kullanan ParameterParent bileşeninden Title ve Body değerlerini alır.

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

Aşağıdaki ParameterParent bileşeninden işlenen HTML işaretlemesi, ParameterParent bileşeni bileşen parametre değerlerini sağlamadığında ParameterChild bileşeninin varsayılan değerlerini gösterir. ParameterParent bileşeni bileşen parametre değerlerini sağladığında, bunlar ParameterChild bileşeni varsayılan değerlerinin yerini alır.

Not

Durumu netleştirmek için, işlenen CSS stil sınıfları aşağıdaki işlenen HTML işaretlemesinde gösterilmez.

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

<div>
    <div>Set By Child</div>
    <div>Set by child.</div>
</div>

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

<div>
    <div>Set by Parent</div>
    <div>Set by parent.</div>
</div>

Bir bileşen parametresine BIR C# alanı, özelliği veya bir yöntemin sonucunu HTML öznitelik değeri olarak atayın. özniteliğinin değeri genellikle parametresinin türüyle eşleşen herhangi bir C# ifadesi olabilir. özniteliğinin değeri isteğe bağlı olarak ayrılmış @ bir Razor simgeyle yol açabilir, ancak gerekli değildir.

Bileşen parametresi dize türündeyse, öznitelik değeri varsayılan olarak C# dizesi değişmez değeri olarak değerlendirilir. Bunun yerine bir C# ifadesi belirtmek istiyorsanız ön ekini @ kullanın.

Aşağıdaki ParameterParent2 bileşeni, önceki ParameterChild bileşeni için dört örnek görüntüler ve Title parametre değerlerini şöyle ayarlar:

title alanının değeri.
GetTitle C# yönteminin sonucu.
Örtük C# ifadesini kullanan ToLongDateString ile uzun biçimde geçerli yerel tarih.
panelData nesnesinin Title özelliği.

Parametre öznitelik değerlerinin çevresindeki tırnak işaretleri, HTML5 belirtimine göre çoğu durumda isteğe bağlıdır. Örneğin Value="this" yerine Value=this desteklenir. Bununla birlikte anımsaması daha kolay olduğu ve web tabanlı teknolojilerde yaygın olarak benimsendiği için tırnak işaretleri kullanılmasını öneririz.

Belgeler genelinde kod örnekleri:

Her zaman tırnak işaretleri kullanır. Örnek: Value="this".
Gerekli olmadıkça, ön eki nonliterals ile kullanmayın @ . Örnek: Count="ct", burada ct sayı türünde bir değişkendir. Count="@ct" geçerli bir stil yaklaşımıdır, ancak belgeler ve örnekler kuralı benimsemez.
İfadelerin dışında Razor değişmez değerler için her zaman kaçının@. Örnek: IsFixed="true". Buna anahtar sözcükler (örneğin, this) ve nulldahildir, ancak isterseniz bunları kullanmayı seçebilirsiniz. Örneğin IsFixed="@true" kullanımına sık rastlanmaz ama desteklenir.

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()
    {
        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();

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

Not

C# üyesini bir bileşen parametresine atarken, parametresinin HTML özniteliğine ön @ek eklemeyin.

Correct (Title bir dize parametresidir, Count sayı türünde bir parametredir):

<ParameterChild Title="@title" Count="ct" />

<ParameterChild Title="@title" Count="@ct" />

Yanlış:

<ParameterChild @Title="@title" @Count="ct" />

<ParameterChild @Title="@title" @Count="@ct" />

Razor sayfalarından (.cshtml) farklı olarak, Blazor bir bileşeni işlerken Razor ifadesinde zaman uyumsuz çalışma yapamaz. Bunun nedeni Blazor'ın etkileşimli kullanıcı arabirimlerini işlemek için tasarlanmış olmasıdır. Etkileşimli kullanıcı arabiriminde ekranda her zaman bir şey görüntülenmesi gerekir, dolayısıyla işleme akışını engellemek mantıklı değildir. Bunun yerine, zaman uyumsuz çalışma zaman uyumsuz yaşam döngüsü olaylarından biri sırasında gerçekleştirilir. Her zaman uyumsuz yaşam döngüsü olayından sonra bileşen yeniden işlenebilir. Aşağıdaki Razor söz dizimi desteklenmez:

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

Yukarıdaki örnekte verilen kod, uygulama derlenirken bir derleyici hatası oluşturur:

'await' işleci yalnızca bir zaman uyumsuz yöntemin içinde kullanılabilir. Bu yöntemi 'async' değiştiricisiyle işaretlemeyi ve dönüş türünü 'Task' olarak değiştirmeyi göz önünde bulundurun.

Önceki örnekte zaman uyumsuz olarak Title parametresinin değerini almak için bileşen OnInitializedAsync yaşam döngüsü olayını kullanabilir. Aşağıdaki örnekte bu gösterilir:

<ParameterChild Title="@title" />

@code {
    private string? title;
    
    protected override async Task OnInitializedAsync()
    {
        title = await ...;
    }
}

Daha fazla bilgi için bkz. ASP.NET Core Razor bileşeni yaşam döngüsü.

Bir parametreye atama için metni bir ifade sonucuyla birleştirmek üzere açık bir Razor ifadesinin kullanılması desteklenmez. Aşağıdaki örnek "Set by " metnini bir nesnenin özellik değeriyle birleştirmeyi amaçlar. Bu söz dizimi bir Razor sayfasında desteklense de (.cshtml), bir bileşendeki alt öğenin Title parametresine atama için geçerli değildir. Aşağıdaki Razor söz dizimi desteklenmez:

<ParameterChild Title="Set by @(panelData.Title)" />

Yukarıdaki örnekte verilen kod, uygulama derlenirken bir derleyici hatası oluşturur:

Bileşen öznitelikleri karmaşık içeriği (karma C# ve işaretleme) desteklemez.

Oluşturulan değerin atamasını desteklemek için bir yöntem, alan veya özellik kullanın. Aşağıdaki örnek GetTitle C# yönteminde "Set by " ile bir nesnenin özellik değerini birleştirir:

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

Daha fazla bilgi için bkz. ASP.NET Core için Razor söz dizimi başvurusu.

Uyarı

Bileşen parametreleri otomatik özellikler olarak bildirilmelidir; diğer bir deyişle get veya set erişimcilerinde özel mantık içermemesi gerekir. Örneğin aşağıdaki StartData özelliği bir otomatik özelliktir:

[Parameter]
public DateTime StartData { get; set; }

Bileşen parametrelerinin tek amacı üst bileşenden alt bileşene bilgi akışı için bir kanal olarak kullanılmak olduğundan, get veya set erişimcisine özel mantık yerleştirmeyin. Alt bileşen özelliğinin set erişimcisi üst bileşenin yeniden işlenmesine neden olan bir mantık içerirse, bu durum sonsuz bir işleme döngüsüyle sonuçlanır.

Alınan parametre değerini dönüştürmek için:

Parametre özelliğini, sağlanan ham verileri temsil edecek bir otomatik özellik olarak bırakın.
Parametre özelliğine göre dönüştürülen verileri sağlamak için farklı bir özellik veya yöntem oluşturun.

Her yeni veri alındığında, alınan parametreyi dönüştürmek için OnParametersSetAsync yöntemini geçersiz kılın.

Bileşen parametresine ilk değeri yazmak desteklenir çünkü ilk değer atamaları Blazor'ın otomatik bileşen işlemesini engellemez. Bir bileşende aşağıdaki StartData özelliğine DateTime.Now özelliği ile geçerli yerel DateTime değeri ataması geçerli bir söz dizimidir:

[Parameter]
public DateTime StartData { get; set; } = DateTime.Now;

DateTime.Now özelliğinin ilk atamasından sonra geliştirici kodunda StartData özelliği için değer atamayın. Daha fazla bilgi için bkz . ASP.NET Core'da Blazorparametrelerin üzerine yazmaktan kaçının.

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 veyainiteriş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.

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

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

Yönlendirme parametreleri

Bileşenler @page yönergesinin yönlendirme şablonunda yönlendirme parametreleri belirtebilir. Blazor yönlendiricisi ilgili bileşen parametrelerini doldurmak için yönlendirme parametrelerini kullanır.

RouteParameter1.razor:

@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.

Uyarı

Varsayılan olarak etkin olan sıkıştırma ile güvenilmeyen kaynaklardan veri işleyen güvenli (kimliği doğrulanmış/yetkilendirilmiş) etkileşimli sunucu tarafı bileşenleri oluşturmaktan kaçının. Güvenilmeyen kaynaklar arasında yol parametreleri, sorgu dizeleri, birlikte çalışma verileri JS ve üçüncü taraf bir kullanıcının denetleyebileceği diğer veri kaynakları (veritabanları, dış hizmetler) bulunur. Daha fazla bilgi için bkz . ASP.NET Core BlazorSignalR kılavuzu ve ASP.NET Core Blazor etkileşimli sunucu tarafı işleme için tehdit azaltma kılavuzu.

Alt içerik işleme parçaları

Bileşenler başka bir bileşenin içeriğini ayarlayabilir. Atayan bileşen, alt bileşenin açılış ve kapanış etiketleri arasındaki içeriği sağlar.

Aşağıdaki örnekte RenderFragmentChild bileşeninde kullanıcı arabiriminin RenderFragment olarak işlenecek bir segmentini temsil eden ChildContent bileşen parametresi vardır. Bileşenin Razor işaretlemesinde ChildContent parametresinin konumu, son HTML çıkışında içeriğin işleneceği konumdur.

RenderFragmentChild.razor:

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

Önemli

RenderFragment içeriğini alan özellik, kurala göre ChildContent olarak adlandırılmalıdır.

RenderFragment için olay geri çağırmaları desteklenmez.

Aşağıdaki bileşen, içeriği alt bileşenin RenderFragmentChild açma ve kapatma etiketlerinin içine yerleştirerek öğesini işlemek için içerik sağlar.

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>

Blazor'ın alt içeriği işleme yönteminden dolayı, bileşenleri bir for döngüsü içinde işlemek için, RenderFragmentChild bileşeninin içeriğinde artımlı döngü değişkeni kullanılıyorsa bir yerel dizin değişkeni gerekir. Aşağıdaki örnek, önceki üst bileşene eklenebilir:

<h1>Three children with an index variable</h1>

@for (int c = 0; c < 3; c++)
{
    var current = c;

    <RenderFragmentChild>
        Count: @current
    </RenderFragmentChild>
}

Alternatif olarak, Enumerable.Range ile bir for döngüsü yerine foreach döngüsü kullanın. Aşağıdaki örnek, önceki üst bileşene eklenebilir:

<h1>Second example of three children with an index variable</h1>

@foreach (var c in Enumerable.Range(0,3))
{
    <RenderFragmentChild>
        Count: @c
    </RenderFragmentChild>
}

İşleme parçaları Blazor uygulamaları genelinde alt içeriği işlemek için kullanılır ve aşağıdaki makalelerle makale bölümlerinde örneklerle açıklanır:

Not

Blazor çerçevesinin yerleşik Razor bileşenleri içeriklerini ayarlamak için aynı ChildContent bileşen parametresi kuralını kullanır. API belgelerinde (API'yi "ChildContent" arama sözcüğüyle filtreleyerek) bileşen parametresi ChildContent özellik adı için arama yaparak alt içeriği ayarlayan bileşenleri görebilirsiniz.

Yeniden kullanılabilir işleme mantığıyla parçaları işleme

Alt bileşenleri yalnızca işleme mantığını yeniden kullanmanın bir yolu olarak değerlendirebilirsiniz. Herhangi bir bileşenin @code bloğunda bir RenderFragment tanımlayın ve parçayı herhangi bir konumdan gerektiği kadar işleyin:

@RenderWelcomeInfo

<p>Render the welcome info a second time:</p>

@RenderWelcomeInfo

@code {
    private RenderFragment RenderWelcomeInfo =  @<p>Welcome to your new app!</p>;
}

Daha fazla bilgi için bkz. İşleme mantığını yeniden kullanma.

Bileşenlere yönelik başvuruları yakalama

Bileşen başvuruları komut göndermek üzere bileşen örneğine başvurmak için bir yol sağlar. Bileşen başvurusunu yakalamak için:

Alt bileşene bir @ref özniteliği ekleyin.
Alt bileşenle aynı türde bir alan tanımlayın.

Bileşen işlendiğinde, alan bileşen örneğiyle doldurulur. Ardından örnekte .NET yöntemlerini çağırabilirsiniz.

ChildMethod yöntemi çağrıldığında günlüğe ileti kaydeden aşağıdaki ReferenceChild bileşenini inceleyin.

ReferenceChild.razor:

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

Bileşen başvurusu ancak bileşen işlendikten sonra ve çıkışı ReferenceChild öğesi içerdiğinde doldurulur. Bileşen işlenene kadar başvurulacak bir şey yoktur. Başvuru değişkeni tıklama olayının atandığı sırada atanmayabileceği için başvuruda bulunılan bir bileşen yöntemini doğrudan bir olay işleyicisine çağırmayı denemeyin (örneğin, @onclick="childComponent!.ChildMethod(5)").

Bileşenin işlenmesi tamamlandıktan sona bileşen başvurularını denetlemek için OnAfterRender veya OnAfterRenderAsync yöntemlerini kullanın.

Aşağıdaki örnek, önceki ReferenceChild bileşeni kullanır.

ReferenceParent.razor:

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

Bileşen başvurularını yakalarken öğe başvurularını yakalama işlemine benzer bir söz dizimi kullanın; bileşen başvurularını yakalama bir JavaScript birlikte çalışma özelliği değildir. Bileşen başvuruları JavaScript koduna geçirilmez. Bileşen başvuruları yalnızca .NET kodunda kullanılır.

Önemli

Bileşen başvurularını, alt bileşenlerin durumunu değiştirmek için kullanmayın. Bunun yerine alt bileşenlere veri geçirirken normal bildirim temelli bileşen parametrelerini kullanın. Bileşen parametrelerinin kullanılması alt bileşenlerin doğru zamanlarda otomatik olarak yeniden işlenmesine neden olur. Daha fazla bilgi için bileşen parametreleri bölümüne ve ASP.NET Core Blazor veri bağlaması makalesine bakın.

Öznitelik uygulama

Öznitelikler bileşenlere @attribute yönergesiyle uygulanabilir. Aşağıdaki örnek bileşenin sınıfına [Authorize] özniteliğini uygular:

@page "/"
@attribute [Authorize]

Koşullu HTML öğesi öznitelikleri ve DOM özellikleri

Blazor aşağıdaki genel davranışları benimser:

HTML öznitelikleri için özniteliği Blazor .NET değerine göre koşullu olarak ayarlar veya kaldırır. .NET değeri veya nullisefalse, özniteliği ayarlanmadı veya daha önce ayarlandıysa kaldırıldı.
veya valueBlazor gibi checked DOM özellikleri için DOM özelliğini .NET değerine göre ayarlar. .NET değeri veya nullise false DOM özelliği varsayılan bir değere sıfırlanır.

Hangi Razor söz dizimi öznitelikleri HTML özniteliklerine karşılık gelir ve dom özelliklerine karşılık gelenler belgelenmemiş olarak kalır çünkü bu, bildirimde bulunmadan değişebilecek bir uygulama ayrıntısıdır.

Uyarı

gibi aria-pressedbazı HTML özniteliklerinin "true" veya "false" dize değerine sahip olması gerekir. Boole değeri değil dize değeri gerektirdiğinden, değerleri için değil bool .NET string kullanmanız gerekir. Bu, tarayıcı DOM API'leri tarafından ayarlanan bir gereksinimdir.

Ham HTML

Dizeler normalde DOM metin düğümleri kullanılarak işlenir ve bu, içerebilecekleri herhangi bir işaretlemenin yoksayıldığı ve değişmez metin olarak kabul edildiği anlamına gelir. Ham HTML'yi işlemek için HTML içeriğini bir MarkupString değerinde sarmalayın. Değer HTML veya SVG olarak ayrıştırılır ve DOM'a eklenir.

Uyarı

Güvenilmeyen bir kaynaktan oluşturulan ham HTML'nin işlenmesi bir güvenlik riskidir ve her zaman bundan kaçınılmalıdır.

Aşağıdaki örnekte bir bileşenin işlenen çıkışına statik HTML içeriği bloğu eklemek için MarkupString türünün kullanılması gösterilir.

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

Razor şablonları

Bir kullanıcı arabirimi kod parçacığı tanımlamak için işleme parçaları Razor şablonu söz dizimi kullanılarak tanımlanabilir. Razor şablonları aşağıdaki biçimi kullanır:

@<{HTML tag}>...</{HTML tag}>

Aşağıdaki örnekte RenderFragment ve RenderFragment<TValue> değerleri ile işleme şablonlarının doğrudan bileşenin içinde nasıl belirtileceği gösterilir. İşleme parçaları şablonlu bileşenlere bağımsız değişkenler olarak da geçirilebilir.

RazorTemplate.razor:

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

Önceki kodun işlenmiş çıkışı:

<p>The time is 4/19/2021 8:54:46 AM.</p>
<p>Pet: Nutty Rex</p>

Statik varlıklar

Blazor, statik varlıklar için ASP.NET Core uygulamalarının kuralına uyar. Statik varlıklar projenin web root (wwwroot) klasöründe veya wwwroot klasörünün altındaki klasörlerde yer alır.

Statik varlığın web köküne başvurmak için temel göreli bir yol (/) kullanın. Aşağıdaki örnekte logo.png fiziksel olarak {PROJECT ROOT}/wwwroot/images klasöründe yer alır. {PROJECT ROOT}, uygulamanın proje köküdür.

<img alt="Company logo" src="/images/logo.png" />

Bileşenler tilde-eğik çizgi gösterimini (~/) desteklemez.

Uygulamanın temel yolunu ayarlama hakkında bilgi için bkz. ASP.NET Core'u barındırma ve dağıtmaBlazor.

Etiket Yardımcıları bileşenlerde desteklenmez

Tag Helpers bileşenlerde desteklenmez. Blazor'da Etiket Yardımcısı benzeri bir işlevsellik sağlamak için Etiket Yardımcısı ile aynı işlevselliğe sahip bir bileşen oluşturun ve Etiket Yardımcısı yerine o bileşeni kullanın.

Ölçeklenebilir Vektör Grafiği (SVG) resimleri

Blazor HTML'yi işlediğinden, Ölçeklenebilir Vektör Grafiği (SVG) resimleri de (.svg) dahil olmak üzere tarayıcı tarafından desteklenen resimler <img> etiketi yoluyla desteklenir:

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

Benzer şekilde SVG resimleri stil sayfası dosyasının (.css) CSS kurallarında desteklenir:

.element-class {
    background-image: url("image.svg");
}

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

Boşluk işleme davranışı

@preservewhitespace yönergesi true değeriyle kullanılmadığı sürece aşağıdaki durumlarda fazladan boşluk varsayılan olarak 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.

Web Uygulaması proje şablonundan Blazor 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>();

Not

Kök bileşeni etkileşimli hale getirme (bileşen gibi App ) desteklenmez.

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>

MVC ve Razor Pages uygulamaları, statik olarak işlenmiş Blazor WebAssembly kök bileşenleri kaydetmek için Bileşen Etiketi Yardımcısı'nı da kullanabilir:

<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 Razor bileşenleri

Razor bileşenleri

Bileşen sınıfları

Razor söz dizimi

Bileşen adı, sınıf adı ve ad alanı

Kısmi sınıf desteği

Temel sınıf belirtme

Yönlendirme

Markup

Zaman uyumsuz yöntemler (`async`) `void` döndürmeyi desteklemez

İç içe yerleştirilmiş bileşenler

Bileşen parametreleri

Yönlendirme parametreleri

Alt içerik işleme parçaları

Yeniden kullanılabilir işleme mantığıyla parçaları işleme

Bileşenlere yönelik başvuruları yakalama

Öznitelik uygulama

Koşullu HTML öğesi öznitelikleri ve DOM özellikleri

Ham HTML

Razor şablonları

Statik varlıklar

Etiket Yardımcıları bileşenlerde desteklenmez

Ölçeklenebilir Vektör Grafiği (SVG) resimleri

Boşluk işleme davranışı

Kök bileşen

Geri Bildirim

Ek kaynaklar

ASP.NET Core Razor bileşenleri

Razor bileşenleri

Bileşen sınıfları

Razor söz dizimi

Bileşen adı, sınıf adı ve ad alanı

Kısmi sınıf desteği

Temel sınıf belirtme

Yönlendirme

Markup

Zaman uyumsuz yöntemler (async) void döndürmeyi desteklemez

İç içe yerleştirilmiş bileşenler

Bileşen parametreleri

Yönlendirme parametreleri

Alt içerik işleme parçaları

Yeniden kullanılabilir işleme mantığıyla parçaları işleme

Bileşenlere yönelik başvuruları yakalama

Öznitelik uygulama

Koşullu HTML öğesi öznitelikleri ve DOM özellikleri

Ham HTML

Razor şablonları

Statik varlıklar

Etiket Yardımcıları bileşenlerde desteklenmez

Ölçeklenebilir Vektör Grafiği (SVG) resimleri

Boşluk işleme davranışı

Kök bileşen

Geri Bildirim

Ek kaynaklar

Zaman uyumsuz yöntemler (`async`) `void` döndürmeyi desteklemez