RazorASP.NET Core Bileşen

Makale
11/10/2021
Okumak için 47 dakika

Blazoruygulamaları bileşenleri kullanılarak Razor yerleşiktir. Bileşen, kullanıcı arabiriminin (UI) dinamik davranışı etkinleştirmek için işleme mantığına sahip kendi içinde bulunan bir kısmıdır. Bileşenler iç içe, yeniden kullanılabilir, projeler arasında paylaştırılamaz ve MVC ve Sayfalar uygulamaları Razor içinde kullanılabilir.

Bileşen sınıfları

Bileşenler, bileşen dosyalarında dosya uzantısıyla birlikte C# ve HTML Razor işaretlemesi birleşimi .razor kullanılarak uygulanır.

Razor Sözdizimi

Bileşenler söz dizimi Razor kullanır. İki Razor özellik bileşenler, yönergeler ve yönerge öznitelikleri tarafından kapsamlı olarak kullanılır. Bunlar, işaretlemede görünen ile ön @ ekli ayrılmış anahtar Razor sözcüklerdir:

Yönergeler:Bileşen işaretlemesini ayrıştırma veya işlevleri değiştirme. Örneğin, yönergesi bir yol şablonu ile yönlendirilebilir bir bileşen belirtir ve belirli bir URL'de tarayıcıda bir kullanıcının isteğiyle @page doğrudan ulaşabilirsiniz.
Yönerge öznitelikleri:Bileşen öğesinin ayrıştırma veya işlevlerini değiştirme. Örneğin, bir @bind öğenin yönerge <input> özniteliği, verileri öğenin değerine bağlar.

Bileşenlerde kullanılan yönergeler ve yönerge öznitelikleri, bu makalede ve belge kümesi diğer makalelerinde daha fazla Blazor açıklanmıştır. Söz dizimi hakkında genel Razor bilgi için RazorASP.NET Core için sözdizimi başvurusu bkz. .

Adlar

Bir bileşenin adı büyük harfle başla olmalıdır:

ProductDetail.razor geçerli.
productDetail.razor geçersizdir.

Belgelerde Blazor kullanılan yaygın adlandırma kuralları Blazor şunlardır:

Bileşen dosya yolları, Pascal büyük/sn † kullanır ve bileşen kodu örneklerini göstermeden önce görünür. Yollar tipik klasör konumlarını gösteriyor. Örneğin, Pages/ProductDetail.razor bileşenin ProductDetail dosya adı olduğunu ve ProductDetail.razor uygulamanın klasöründe Pages olduğunu gösterir.
Yönlendirilebilir bileşenlerin bileşen dosya yolları, URL'leriyle, bir bileşenin yol şablonunda sözcükler arasında boşluklar için görünen kısa çizgilerle eşler. Örneğin, yol ProductDetail şablonu ( ) olan bir /product-detail @page "/product-detail" bileşen, göreli URL'sinde bir tarayıcıda istener. /product-detail

†Pascal büyük harfi (büyük ortası büyük harf), boşluk ve noktalama işareti olmayan ve her sözcüğün ilk harfi büyük olan ve ilk sözcük dahil olmak üzere bir adlandırma kuralıdır.

Yönlendirme

uygulamasındaki Blazor yönlendirme, uygulamanın erişilebilir her bileşenine bir yönergesi ile bir yol şablonu sağlayarak @page sağlanır. Yönergesi Razor olan @page bir dosya derlenmişse, oluşturulan sınıfa yol şablonunu RouteAttribute belirten bir verilir. Çalışma zamanında, yönlendirici ile bileşen sınıflarını arar ve istenen URL ile eşleşen bir yol şablonuna sahip olan RouteAttribute bileşeni işler.

Aşağıdaki bileşen HelloWorld bir yol şablonu /hello-world kullanır. Bileşenin işlenmiş web sayfasına göreli URL'sini kullanarak /hello-world ulaşabilirsiniz. Bir uygulamayı varsayılan protokol, konak ve bağlantı noktası ile yerel olarak Blazor çalıştırarak, HelloWorld bileşenin tarayıcıda üzerinden istener. https://localhost:5001/hello-world Web sayfası üreten bileşenler genellikle klasöründe bulunur, ancak iç içe klasörler dahil olmak üzere bileşenleri tutmak Pages için herhangi bir klasörü kullanabilirsiniz.

Pages/HelloWorld.razor:

@page "/hello-world"

<h1>Hello World!</h1>

Önceki bileşen, bileşeni uygulamanın kullanıcı arabirimi gezintisi bölmesine eklip eklemenize /hello-world bakılmaksızın tarayıcıda yüklenir. İsteğe bağlı olarak, bileşenin bağlantısının uygulamanın kullanıcı arabirimi tabanlı gezintisinde görünür olması için NavMenu bileşenler bileşene eklenebilir.

Önceki bileşen HelloWorld için, bileşene NavLink aşağıdaki bileşeni NavMenu ekleyin. Bileşeni NavLink yeni bir liste öğesine ( ) sırasız liste etiketleri ( <li>...</li> ) arasına <ul>...</ul> ekleyin.

Shared/NavMenu.razor:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="hello-world">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Hello World!
    </NavLink>
</li>

ve bileşenlerinin açıklamaları da dahil olmak üzere daha NavLink fazla NavMenu bilgi için bkz. ASP.NET Core Blazor Yönlendirme .

İşaretleme

Bir bileşenin kullanıcı arabirimi, Razor işaretleme,C# ve HTML'den oluşan Razor söz dizimi kullanılarak tanımlanır. Bir uygulama derlenmiş olduğunda, HTML işaretlemesi ve 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ştir.

Bileşen sınıfının üyeleri bir veya daha fazla blokta @code tanımlanır. Bloklarda @code bileşen durumu belirtilir ve C# ile işlenir:

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

Bileşen üyeleri, sembolüyle baş eden C# ifadeleri kullanılarak mantık işlemede @ kullanılır. Örneğin, bir C# alanı alan adına ön ek @ ek getirerek işlenir. Aşağıdaki bileşen Markup değerlendirir ve işler:

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

Pages/Markup.razor:

@page "/markup"

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

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

Not

Belgeler genelindeki Blazor örnekler, özel private üyeler için erişim değiştiricisini belirtir. Özel üyelerin kapsamı bir bileşenin sınıfına göredir. Ancak C# hiçbir erişim değiştiricisi mevcut değilken erişim değiştiricisini varsayıyor, bu nedenle kendi kodunda private üyeleri açıkça " " private 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çeve, bir bileşeni dahili olarak işleme ağacı olarak işler. Bu, bir bileşenin Belge Nesne Modeli (DOM) ve Basamaklı Stil Sayfası Nesne Modeli Blazor 'nin (CSSOM) birleşimidir. Bileşen başlangıçta işlenmeden sonra, bileşenin işleme ağacı olaylara yanıt olarak yeniden oluşturulur. Blazor , yeni işleme ağacını önceki işleme ağacıyla karşılaştırıldığında tarayıcının DOM'sında görüntülenmek için yapılan tüm değişiklikleri uygular. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.

Bileşenler sıradan C# sınıflarıdır ve projenin herhangi bir yerine yerleştirilebilirsiniz. Web sayfası üreten bileşenler genellikle klasöründe Pages bulunur. Sayfa olmayan bileşenler genellikle klasöre veya Shared projeye eklenen özel bir klasöre yerleştirilir.

İç içe bileşenler

Bileşenler, HTML söz dizimi kullanarak bildirerek diğer bileşenleri içerebilir. Bir bileşenin kullanımına yapılan işaretleme, etiketin adının bileşen türü olduğu bir HTML etiketine benzer.

Bir başlığı Heading görüntülemek için diğer bileşenler tarafından kullanılmaktadır aşağıdaki bileşeni göz önünde bulundurabilirsiniz.

Shared/Heading.razor:

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

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

Bileşende aşağıdaki HeadingExample işaretleme, etiketin Heading göründüğü konumda önceki bileşeni <Heading /> işler.

Pages/HeadingExample.razor:

@page "/heading-example"

<Heading />

Bir bileşen, aynı ad alanı içindeki bir bileşen adıyla eşleşmeyan büyük harfli bir ilk harfe sahip bir HTML öğesi içeriyorsa, öğenin beklenmeyen bir adı olduğunu belirten bir uyarı yayımlar. Bileşenin @using ad alanı için bir yönerge eklemek, bileşeni kullanılabilir yapar ve bu da uyarıyı çözer. Daha fazla bilgi için Ad Alanları bölümüne bakın.

Bu bölümde gösterilen bileşen örneğinde bir yönergesi yok, bu nedenle bileşene tarayıcıda doğrudan istek yoluyla kullanıcı doğrudan Heading @page Heading erişilemez. Ancak, yönergesi olan @page herhangi bir bileşen başka bir bileşende iç içe geçmiş olabilir. Bileşenin dosyanın en üstüne dahil olarak doğrudan erişilebilir olması, hem hem de 'de Heading @page "/heading" tarayıcı istekleri için Razor /heading /heading-example işlenir.

Ad alanları

Genellikle, bir bileşenin ad alanı uygulamanın kök ad alanı ve uygulama içindeki bileşenin konumu (klasör) türetilen. Uygulamanın kök ad alanı ise BlazorSample ve bileşen klasöründe yer Counter Pages asa:

Bileşenin Counter ad alanı: BlazorSample.Pages .
Bileşenin tam tür adı: BlazorSample.Pages.Counter .

Bileşenlerin tutul olduğu özel klasörler için üst @using bileşene veya uygulamanın dosyasına bir yönerge _Imports.razor ekleyin. Aşağıdaki örnek klasördeki bileşenleri Components kullanılabilir yapar:

@using BlazorSample.Components

Not

@using dosyada yönergeleri _Imports.razor yalnızca dosyalara Razor uygulanır ( ), .razor C# dosyalarına değil ( .cs ).

Bileşenlere, yönerge gerektirmeyen tam adları kullanılarak da @using başvurulabilirsiniz. Aşağıdaki örnek, ProductDetail uygulamanın klasöründeki Components bileşene doğrudan başvurur:

<BlazorSample.Components.ProductDetail />

ile yazan bir bileşenin ad Razor alanı aşağıdakilere göre (öncelik sırasına göre) temel alınan bir ad alanıdır:

Dosyanın @namespace Razor işaretlemesinde yönergesi (örneğin, @namespace BlazorSample.CustomNamespace ).
Proje, RootNamespace proje dosyasındadır (örneğin, <RootNamespace>BlazorSample</RootNamespace> ).
Proje dosyasının dosya adına () alınan proje adı ve proje .csproj kökünden bileşene giden yol. Örneğin, çerçeve proje ad {PROJECT ROOT}/Pages/Index.razor alanı () ile BlazorSample BlazorSample.csproj bileşenin ad alanına BlazorSample.Pages Index çözümler. {PROJECT ROOT} , projenin kök yoludur. Bileşenler C# adı bağlama kurallarını takip eder. Bu Index örnekteki bileşen için kapsamda yer alan bileşenler tüm bileşenlerdir:
- Aynı Pages klasörde.
- Projenin kökünde bulunan ve açıkça farklı bir ad alanı belirtmeyen bileşenler.

Aşağıdakiler desteklenmiyor:

global::Nitelik.
Bileşenler, diğer ad deyimleri ile içeri aktarılıyor using . Örneğin, @using Foo = Bar desteklenmez.
Kısmen nitelenmiş adlar. Örneğin, @using BlazorSample bir bileşene ekleyemez ve sonra NavMenu uygulamanın Shared klasöründe () bileşene başvurulamıyor Shared/NavMenu.razor <Shared.NavMenu></Shared.NavMenu> .

Kısmi sınıf desteği

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

Tek bir dosya, bir veya daha fazla @code blok, HTML biçimlendirme ve biçimlendirme içinde tanımlanan C# kodunu içerir Razor . Blazor Proje şablonları bu tek dosya yaklaşımını kullanarak bileşenlerini tanımlar.
HTML ve Razor işaretleme bir Razor dosyaya ( .razor ) yerleştirilir. C# kodu, kısmi sınıf () olarak tanımlanmış bir arka plan kod dosyasına yerleştirilir .cs .

Not

Bileşene özgü stilleri tanımlayan bir bileşen stil sayfası ayrı bir dosyadır ( .css ). Blazor CSS yalıtımı daha sonra ' de açıklanmıştır ASP.NET Core Blazor CSS yalıtımı .

Aşağıdaki örnek, Counter @code bir proje şablonundan oluşturulan uygulamada bir blok içeren varsayılan bileşeni gösterir Blazor . Biçimlendirme ve C# kodu aynı dosyada. Bu, bileşen yazarken en yaygın yaklaşımdır.

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

Aşağıdaki Counter Bileşen, Razor kısmi bir sınıf içeren bir arka plan kod dosyası kullanarak C# KODUNDAN HTML ve biçimlendirme ayırır:

Pages/CounterPartialClass.razor:

@page "/counter-partial-class"

<h1>Counter</h1>

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

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

Pages/CounterPartialClass.razor.cs:

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

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

@using_Imports.razordosyadaki yönergeler Razor .razor , C# dosyalarına () değil, yalnızca dosyalar () için geçerlidir .cs . Gerektiğinde kısmi bir sınıf dosyasına ad alanları ekleyin.

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

using System.Net.Http;
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 klasörüne karşılık gelen ad alanını da içerir Shared :

using BlazorSample;
using BlazorSample.Shared;

Temel sınıf belirtin

@inheritsYönergesi bir bileşen için temel sınıf belirtmek için kullanılır. Aşağıdaki örnek, bileşenin özelliklerini ve yöntemlerini sağlamak için bir bileşenin bir temel sınıfı nasıl devralmasını gösterir. BlazorRocksBaseTemel sınıf öğesinden türetilir ComponentBase .

Pages/BlazorRocks.razor:

@page "/blazor-rocks"
@inherits BlazorRocksBase

<h1>@BlazorRocksText</h1>

BlazorRocksBase.cs:

using Microsoft.AspNetCore.Components;

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

Bileşen parametreleri

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

PanelBody.cs:

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

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

Uyarı

Bileşen parametreleri için başlangıç değerleri sağlanması desteklenir, ancak bileşen ilk kez işlendikten sonra kendi parametrelerine yazan bir bileşen oluşturmayın. Daha fazla bilgi için bu makalenin üzerine yazılan parametreler bölümüne bakın.

TitleBileşenin ve Body bileşen parametreleri, ParameterChild BILEŞEN örneğini işleyen HTML etiketindeki bağımsız değişkenlerle ayarlanır. Aşağıdaki ParameterParent bileşen iki bileşeni işler ParameterChild :

İlk ParameterChild bileşen parametre bağımsız değişkenleri vermeden işlenir.
İkinci ParameterChild Bileşen, Title ' ın Body ParameterParent özelliklerinin değerlerini ayarlamak Için açık bir C# ifadesi kullanan, ve bileşenlerinden değerleri alır PanelBody .

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

Bileşen tarafından bileşen ParameterParent ParameterChild ParameterParent parametre değerlerini sağlamadığınızda, bileşen tarafından aşağıdaki işlenmiş HTML işaretlemesi bileşen varsayılan değerlerini gösterir. Bileşen, bileşen ParameterParent parametre değerleri sağlıyorsa, ParameterChild bileşenin varsayılan değerlerini değiştirir.

Not

Daha anlaşılır olması için, işlenmiş CSS stil sınıfları aşağıdaki işlenmiş HTML biçimlendirmesinde 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>

Razor Ayrılmış @ simgesinikullanarak bir C# alanı, özelliği veya BIR Yöntem sonucunu bir html öznitelik değeri olarak bir bileşen parametresine atayın. Aşağıdaki ParameterParent2 Bileşen, önceki bileşenin dört örneğini görüntüler ParameterChild ve Title parametre değerlerini olarak ayarlar:

titleAlanın değeri.
GetTitleC# yönteminin sonucu.
ToLongDateString Örtülü bir C# ifadesikullanan, ile uzun biçimdeki geçerli yerel tarih.
panelDataNesnenin Title özelliği.

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

Not

Bir C# üyesini bir bileşen parametresine atarken, üyeyi @ sembolle önek olarak ekleyin ve PARAMETRENIN HTML özniteliğiyle hiçbir zaman ön eki kullanmayın.

Doğru:

<ParameterChild Title="@title" />

Yanlış:

<ParameterChild @Title="title" />

Sayfalardan farklı olarak Razor ( .cshtml ), bir Blazor bileşeni işlerken bir ifadede zaman uyumsuz çalışma gerçekleştiremez Razor . Bunun nedeni, Blazor etkileşimli uıin işlemek için tasarlanmıştır. Etkileşimli bir kullanıcı arabiriminde, ekranın her zaman bir şey görüntülemesi gerekir, bu yüzden işleme akışını engellemek mantıklı değildir. Bunun yerine, zaman uyumsuz iş, zaman uyumsuz yaşam döngüsü olaylarındanbiri sırasında gerçekleştirilir. Her zaman uyumsuz yaşam döngüsü olayından sonra bileşen yeniden işleyebilir. Aşağıdaki Razor sözdizimi desteklenmez:

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

Yukarıdaki örnekteki kod, uygulama oluşturulduğunda bir derleyici hatası oluşturur:

' Await ' işleci yalnızca zaman uyumsuz bir yöntem içinde kullanılabilir. Bu yöntemi ' Async ' değiştiricisi ile işaretlemeyi ve dönüş türünü ' Task ' olarak değiştirmeyi düşünün.

Önceki örnekteki parametreye ilişkin bir değeri Title zaman uyumsuz olarak almak için aşağıdaki örnekte gösterildiği gibi bileşen OnInitializedAsync yaşam döngüsü olayınıkullanabilir:

<ParameterChild Title="@title" />

@code {
    private string title;

    protected override async Task OnInitializedAsync()
    {
        title = await ...;
    }
}

Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

RazorBir parametreye atama için bir ifade sonucuyla birlikte metin birleştirmek için açık bir ifade kullanılması desteklenmez. Aşağıdaki örnek, " Set by " metnini bir nesnenin özellik değeri ile birleştirme için arar. Bu sözdizimi bir Razor sayfada () desteklenmekle birlikte .cshtml , bir bileşende alt öğenin parametresine atama için geçerli değildir Title . Aşağıdaki Razor sözdizimi desteklenmez:

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

Yukarıdaki örnekteki kod, uygulama oluşturulduğunda bir derleyici hatası oluşturur:

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

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

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

Daha fazla bilgi için bkz. RazorASP.NET Core için sözdizimi başvurusu.

Uyarı

Bileşen parametreleri Otomatik Özellikler olarak bildirilmelidir, yani get veya erişimcilerinde özel mantık içermemesi gerekir set . Örneğin, aşağıdaki StartData özellik bir otomatik özelliktir:

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

get set Bileşen parametrelerinin, bir üst bileşen için bir alt bileşene bilgi akışı için bir kanal olarak kullanılması amaçlandığından, veya erişimcisine özel mantık yerleştirmeyin. setBir alt bileşen özelliğinin erişimcisi üst bileşenin rerendering neden olan mantığı içeriyorsa, sonsuz bir işleme döngüsü oluşur.

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

Sağlanan ham verileri temsil etmek için Parameter özelliğini bir Auto özelliği olarak bırakın.
Dönüştürülen verileri parametre özelliğine göre sağlamak için farklı bir özellik veya yöntem oluşturun.

OnParametersSetAsyncYeni verilerin her alındığı her seferinde alınan bir parametreyi dönüştürmek için geçersiz kılın.

İlk değer atamaları otomatik bileşen işlemesini etkilemediğinden bir bileşen parametresine ilk değer yazmak desteklenir Blazor . Geçerli yerel öğesinin DateTime ile öğesine olan aşağıdaki ataması DateTime.Now , StartData bir bileşende geçerli bir sözdizimi:

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

İlk atamasından sonra DateTime.Now , geliştirici kodunda bir değer atamayın StartData . Daha fazla bilgi için bu makalenin üzerine yazılan parametreler bölümüne bakın.

Gerekli bir bileşen parametresi belirtmek için [EditorRequired] özniteliğini uygulayın. Bir parametre değeri sağlanmazsa, düzenleyiciler veya yapı araçları kullanıcıya uyarıları görüntüleyebilir. Bu öznitelik yalnızca [Parameter] özniteliğiyleişaretlenmiş Özellikler üzerinde geçerlidir. , EditorRequiredAttribute Tasarım zamanında ve uygulama yapılandırıldığında zorlanır. Öznitelik çalışma zamanında zorlanmaz ve parametre olmayan bir değer garantisi vermez null .

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

Tek satırlı öznitelik listeleri de desteklenir:

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

Rota parametreleri

Bileşenler, yönergenin yol şablonunda rota parametreleri belirtebilir @page . Blazor Yönlendirici , karşılık gelen bileşen parametrelerini doldurmak için yol parametrelerini kullanır.

İsteğe bağlı yol parametreleri desteklenir. Aşağıdaki örnekte, text isteğe bağlı parametresi, yol segmentinin değerini bileşenin Text özelliğine atar. Segment yoksa, Text fantastic OnInitialized yaşam döngüsü yöntemindedeğeri "" olarak ayarlanır.

Pages/RouteParameter.razor:

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

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

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

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

{*pageRoute}Birden çok klasör sınırlarındaki yolları yakalayan catch-all yol parametreleri () hakkında daha fazla bilgi için bkz ASP.NET Core Blazor Yönlendirme ..

Üzerine yazılan parametreler

BlazorFramework genellikle güvenli üst-alt parametre ataması uygular:

Parametrelerin üzerine yazılması beklenmedik.
Yan etkiler en aza indirilir. Örneğin, sonsuz işleme döngüleri oluşturabileceğinden ek işlemeye kaçınılmaz.

Alt bileşen, üst bileşen yeniden oluşturulduğunda varolan değerlerin üzerine yazılacak yeni parametre değerleri alır. Yanlışlıkla bir alt bileşendeki parametre değerlerinin üzerine yazılması, bileşen bir veya daha fazla veriye bağımlı parametre ile geliştirilirken ve geliştirici alt öğe içindeki bir parametreye doğrudan yazıyorsa oluşur:

Alt bileşen, üst bileşenden bir veya daha fazla parametre değeri ile işlenir.
Alt öğe doğrudan bir parametre değerine yazar.
Üst bileşen, alt öğenin parametresinin değerini yeniden ekler ve üzerine yazar.

Parametre değerlerinin üzerine yazılması olasılığı, alt bileşenin özellik set erişimcilerine de genişletilir.

Önemli

Genel kılavuzumuz, bileşen ilk kez işlendikten sonra kendi parametrelerine doğrudan yazılan bileşenler oluşturmaktır.

Aşağıdaki hatalı bileşeni göz önünde bulundurun Expander :

Alt içeriği işler.
Bileşen parametresi () ile alt öğe içeriğini gösterir Expanded .
Bileşen doğrudan Expanded parametresine yazar, bu, üzerine yazılan parametrelerle ilgili sorunu gösterir ve kaçınılması gerekir.

Aşağıdaki Expander bileşen bu senaryo için yanlış yaklaşımı gösterdikten sonra, değiştirilen bir Expander bileşen doğru yaklaşımı göstermek için gösterilir. Aşağıdaki örnekler, açıklanan davranışlarla karşılaşacak bir yerel örnek uygulamaya yerleştirilebilir.

Shared/Expander.razor:

<div @onclick="Toggle" class="card bg-light mb-3" style="width:30rem">
    <div class="card-body">
        <h2 class="card-title">Toggle (<code>Expanded</code> = @Expanded)</h2>

        @if (Expanded)
        {
            <p class="card-text">@ChildContent</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public bool Expanded { get; set; }

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

    private void Toggle()
    {
        Expanded = !Expanded;
    }
}

ExpanderBileşen, şu ExpanderExample arama olabilecek üst bileşene eklenir StateHasChanged :

StateHasChangedGeliştirici kodu 'nda çağırmak, bir bileşene durumunun değiştiğini bildirir ve genellikle bileşeni Kullanıcı arabirimini güncelleştirmek için rerendering tetikler. StateHasChanged , ve ' de daha ayrıntılı bir şekilde ele alınmıştır RazorASP.NET Core bileşen yaşam döngüsü BlazorASP.NET Core bileşen işleme .
Düğmenin @onclick Directive özniteliği, düğme olayına bir olay işleyicisi ekler onclick . Olay işleme daha sonra içinde daha ayrıntılı olarak ele alınmıştır ASP.NET Core Blazor olay işleme .

Pages/ExpanderExample.razor:

@page "/expander-example"

<Expander Expanded="true">
    Expander 1 content
</Expander>

<Expander Expanded="true" />

<button @onclick="StateHasChanged">
    Call StateHasChanged
</button>

Başlangıçta, Expander bileşenleri özellikleri bir kez değiştiğinde bağımsız olarak davranır Expanded . Alt bileşenler, durumlarını beklendiği gibi korur. StateHasChangedÜst öğede çağrıldığında, Expanded ilk alt bileşenin parametresi ilk değeri () olarak döndürülür true . İkinci Expander Expanded bileşende hiçbir alt içerik işlenmediğinden ikinci bileşenin değeri sıfırlanmıyor.

Önceki senaryodaki durumu korumak için bileşen içindeki özel bir alanı kullanarak, onun geçiş Expander durumunu koruyun.

Aşağıdaki düzeltilen Expander bileşen:

Üst öğeden Expanded bileşen parametre değerini kabul eder.
Olay içindeki bir özel alana () bileşen parametre değerini atar expanded . OnInitialized
Kendi iç geçiş durumunu korumak için özel alanını kullanır, bu da doğrudan bir parametreye yazmayı nasıl önleyeceğinizi gösterir.

Not

Bu bölümdeki öneri, bileşen parametresi erişimcilerinde benzer mantığa genişleterek set benzer, istenmeyen yan etkilere neden olabilir.

Shared/Expander.razor:

<div @onclick="Toggle" class="card bg-light mb-3" style="width:30rem">
    <div class="card-body">
        <h2 class="card-title">Toggle (<code>expanded</code> = @expanded)</h2>

        @if (expanded)
        {
            <p class="card-text">@ChildContent</p>
        }
    </div>
</div>

@code {
    private bool expanded;

    [Parameter]
    public bool Expanded { get; set; }

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

    protected override void OnInitialized()
    {
        expanded = Expanded;
    }

    private void Toggle()
    {
        expanded = !expanded;
    }
}

İki yönlü üst-alt bağlama örnekleri için bkz BlazorASP.NET Core veri bağlama .. Daha fazla bilgi için bkz. Blazor Iki yönlü bağlama hatası (DotNet/aspnetcore #24599).

Alt içerik

Bileşenler, başka bir bileşenin içeriğini ayarlayabilir. Atama bileşeni, alt bileşenin açılış ve kapanış etiketleri arasında içerik sağlar.

Aşağıdaki örnekte, RenderFragmentChild bileşeni, ChildContent olarak işlenecek Kullanıcı arabiriminin segmentini temsil eden bir özelliğe sahiptir RenderFragment . ChildContentBileşenin Razor işaretlemesinin konumu, IÇERIĞIN son HTML çıktısında işlendiği yerdir.

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

Önemli

İçeriği alan özelliğin RenderFragment ChildContent kural tarafından adlandırılması gerekir.

Aşağıdaki RenderFragmentParent Bileşen, RenderFragmentChild içeriği alt bileşenin açılış ve kapanış etiketlerinin içine yerleştirerek işleme için içerik sağlar.

Pages/RenderFragmentParent.razor:

@page "/render-fragment-parent"

<h1>Render child content</h1>

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

BlazorAlt içerik işleme yöntemi nedeniyle, bir döngü içinde işleme bileşenleri, for bileşen içeriğinde artırma döngüsü değişkeni kullanılıyorsa bir yerel dizin değişkeni gerektirir RenderFragmentChild . Aşağıdaki örnek, önceki RenderFragmentParent 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, foreach döngüsü yerine bir döngüsü kullanın Enumerable.Range for . Aşağıdaki örnek, önceki RenderFragmentParent 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>
}

RenderFragmentBileşeninin bileşen Kullanıcı arabirimi için şablon olarak nasıl kullanılabileceği hakkında bilgi için aşağıdaki makalelere bakın:

Öznitelik döndürme ve rastgele parametreler

Bileşenler, bileşen tarafından tanımlanan parametrelere ek olarak ek öznitelikler yakalayabilir ve işleyebilir. Ek öznitelikler bir sözlükte yakalanıp, sonra bileşen Directive özniteliği kullanılarak işlendiğinde bir öğe üzerine bırakılabilir @attributes Razor . Bu senaryo, çeşitli özelleştirmeleri destekleyen bir biçimlendirme öğesi üreten bir bileşeni tanımlamak için yararlıdır. Örneğin, <input> çok sayıda parametreyi destekleyen bir için öznitelikleri ayrı olarak tanımlamak sıkıcı olabilir.

Aşağıdaki Splat bileşende:

İlk <input> öğesi ( id="useIndividualParams" ) bağımsız bileşen parametrelerini kullanır.
İkinci <input> öğe ( id="useAttributesDict" ) öznitelik splatesini kullanır.

Pages/Splat.razor:

@page "/splat"

<input id="useIndividualParams"
       maxlength="@maxlength"
       placeholder="@placeholder"
       required="@required"
       size="@size" />

<input id="useAttributesDict"
       @attributes="InputAttributes" />

@code {
    private string maxlength = "10";
    private string placeholder = "Input placeholder text";
    private string required = "required";
    private string size = "50";

    private Dictionary<string, object> InputAttributes { get; set; } =
        new()
        {
            { "maxlength", "10" },
            { "placeholder", "Input placeholder text" },
            { "required", "required" },
            { "size", "50" }
        };
}

<input>Web sayfasındaki işlenmiş öğeler aynıdır:

<input id="useIndividualParams"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

<input id="useAttributesDict"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

Rastgele öznitelikleri kabul etmek için, özelliği olarak ayarlanmış bir bileşen parametresi tanımlayın CaptureUnmatchedValues true :

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> InputAttributes { get; set; }
}

CaptureUnmatchedValuesÜzerindeki özelliği, [Parameter] parametresinin diğer bir parametreyle eşleşmeyen tüm özniteliklerle eşleşmesini sağlar. Bir bileşen yalnızca ile tek bir parametre tanımlayabilir CaptureUnmatchedValues . İle kullanılan özellik türü CaptureUnmatchedValues Dictionary<string, object> dize anahtarlarıyla atanabilir olmalıdır. IEnumerable<KeyValuePair<string, object>>Ya IReadOnlyDictionary<string, object> da bu senaryodaki seçeneklerin kullanımı.

@attributesÖğe özniteliklerinin konumuna göreli konumu önemlidir. Öğe üzerinde ne zaman bırakıldığında @attributes , öznitelikler sağdan sola (son-ilk) işlenir. Bir alt bileşeni tüketen bir üst bileşen için aşağıdaki örneği göz önünde bulundurun:

Shared/AttributeOrderChild1.razor:

<div @attributes="AdditionalAttributes" extra="5" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

Pages/AttributeOrderParent1.razor:

@page "/attribute-order-parent-1"

<AttributeOrderChild1 extra="10" />

AttributeOrderChild1Bileşenin extra özniteliği öğesinin sağına ayarlanır @attributes . AttributeOrderParent1 <div> extra="5" Öznitelikler sağdan sola (en son) işlenmediğinden, bileşen tarafından işlenen ek öznitelik aracılığıyla geçirilir:

<div extra="5" />

Aşağıdaki örnekte, sırası extra ve @attributes alt bileşenin sırasıyla tersine çevrilir <div> :

Shared/AttributeOrderChild2.razor:

<div extra="5" @attributes="AdditionalAttributes" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

Pages/AttributeOrderParent2.razor:

@page "/attribute-order-parent-2"

<AttributeOrderChild2 extra="10" />

<div>Üst bileşenin işlenmiş Web sayfasındaki extra="10" ek öznitelik ile geçirildiğinde şunları içerir:

<div extra="10" />

Bileşenlere başvuruları yakala

Bileşen başvuruları, komutları vermek için bir bileşen örneğine başvurmak için bir yol sağlar. Bir bileşen başvurusunu yakalamak için:

@refAlt bileşene bir öznitelik ekleyin.
Alt bileşenle aynı türde bir alan tanımlayın.

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

ReferenceChildÇağrıldığında bir iletiyi günlüğe kaydeden aşağıdaki bileşeni göz önünde bulundurun ChildMethod .

Shared/ReferenceChild.razor:

@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 yalnızca bileşen işlendikten sonra ve çıktısı öğesinin öğesini içermesi halinde doldurulur ReferenceChild . Bileşen işlenene kadar, başvurulmasına hiçbir şey yok.

Bileşenin işlemesini tamamladıktan sonra bileşen başvurularını işlemek için, OnAfterRender veya OnAfterRenderAsync yöntemlerinikullanın.

Bir olay işleyicisiyle bir başvuru değişkeni kullanmak için bir lambda ifadesi kullanın veya OnAfterRender ya da OnAfterRenderAsync yöntemlerindeolay işleyicisi temsilcisini atayın. Bu, başvuru değişkeninin olay işleyicisi atanmadan önce atanmasını sağlar.

Aşağıdaki lambda yaklaşımı önceki ReferenceChild bileşeni kullanır.

Pages/ReferenceParent1.razor:

@page "/reference-parent-1"

<button @onclick="@(() => childComponent?.ChildMethod(5))">
    Call <code>ReferenceChild.ChildMethod</code> with an argument of 5
</button>

<ReferenceChild @ref="childComponent" />

@code {
    private ReferenceChild? childComponent;
}

Aşağıdaki temsilci yaklaşımı önceki ReferenceChild bileşeni kullanır.

Pages/ReferenceParent2.razor:

@page "/reference-parent-2"

<button @onclick="@(() => callChildMethod?.Invoke())">
    Call <code>ReferenceChild.ChildMethod</code> with an argument of 5
</button>

<ReferenceChild @ref="childComponent" />

@code {
    private ReferenceChild? childComponent;
    private Action? callChildMethod;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            callChildMethod = CallChildMethod;
        }
    }

    private void CallChildMethod()
    {
        childComponent?.ChildMethod(5);
    }
}

Bir döngüdeki bileşenlere başvurmak için bir koleksiyon kullanın. Aşağıdaki örnekte:

Bileşenler bir öğesine eklenir List<T> .
İçindeki bileşen dizini tarafından ilgili bileşeni tetikleyen her bir bileşen için bir düğme oluşturulur ChildMethod List<T> .

Pages/ReferenceParent3.razor önceki bileşeni kullanma ReferenceChild :

@page "/reference-parent-3"

<ul>
    @for (int i = 0; i < 5; i++)
    {
        var index = i;
        var v = r.Next(1000);

        <li>
            <ReferenceChild @ref="childComponent" />
            <button @onclick="@(() => callChildMethod?.Invoke(index, v))">
                Component index @index: Call <code>ReferenceChild.ChildMethod(@v)</code>
            </button>
        </li>
    }
</ul>

@code {
    private Random r = new();
    private List<ReferenceChild> components = new();
    private Action<int, int>? callChildMethod;

    private ReferenceChild childComponent
    {
        set => components.Add(value);
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            callChildMethod = CallChildMethod;
        }
    }

    private void CallChildMethod(int index, int value)
    {
        components.ElementAt(index).ChildMethod(value);
    }
}

Bileşen başvurularını yakalama, öğe başvurularını yakalamakiçin benzer bir sözdizimi kullanın, bileşen başvurularını yakalamak bir JavaScript birlikte çalışma özelliği değildir. Bileşen başvuruları JavaScript koduna geçirilmiyor. Bileşen başvuruları yalnızca .NET kodunda kullanılır.

Önemli

Alt bileşenlerin durumunu bulunmamalıdır için bileşen başvurularını kullanmayın. Bunun yerine, alt bileşenlere veri geçirmek için normal bildirime dayalı bileşen parametrelerini kullanın. Bileşen parametrelerinin kullanımı, doğru zamanların otomatik olarak yeniden kullanıldığı alt bileşenlerde oluşur. Daha fazla bilgi için bileşen parametreleri bölümüne ve BlazorASP.NET Core veri bağlama makaleye bakın.

Eşitleme bağlamı

BlazorSynchronizationContextyürütmenin tek bir mantıksal iş parçacığını zorlamak için bir eşitleme bağlamı () kullanır. Tarafından oluşturulan bir bileşenin yaşam döngüsü yöntemleri ve olay geri çağırmaları Blazor , eşitleme bağlamında yürütülür.

Blazor Server, tek iş parçacıklı bir ortamı öykünmeye çalışır ve bu sayede tek iş parçacıklı bir tarayıcıda WebAssembly modeliyle yakından eşleşir. Belirli bir zamanda, çalışma tek bir mantıksal iş parçacığının izlenimini veren tam olarak bir iş parçacığında gerçekleştirilir. Aynı anda iki işlem yürütülmez.

İş parçacığı engelleme çağrılarını önleyin

Genellikle, bileşenlerinde aşağıdaki yöntemleri çağırmayın. Aşağıdaki yöntemler yürütme iş parçacığını engeller ve temel işlem tamamlanana kadar uygulamanın çalışmaya devam ettirilmesi engellenir Task :

Not

Blazor Bu bölümde bahsedilen iş parçacığı engelleme yöntemlerini kullanan belge örnekleri, önerilen kodlama yönergeleri yerine yalnızca tanıtım amaçlı yöntemleri kullanır. Örneğin, birkaç bileşen kodu gösterileri çağırarak uzun süre çalışan bir işlemin benzetimini yapar Thread.Sleep .

Durumu güncelleştirmek için bileşen yöntemlerini dışarıdan çağır

Bir bileşenin bir süreölçer veya başka bir bildirim gibi dış bir olaya göre güncellenmesi gerekir, InvokeAsync kod yürütmeyi eşitleme bağlamına bağlayan yöntemi kullanın Blazor . Örneğin, herhangi bir dinleme bileşenini güncelleştirilmiş durum hakkında bilgilendiren aşağıdaki bildirimci hizmetini göz önünde bulundurabilirsiniz. yöntemi, Update uygulamanın herhangi bir yerinden çağrılabilirsiniz.

TimerService.cs:

using System;
using Microsoft.Extensions.Logging;

public class TimerService : IDisposable
{
    private int elapsedCount;
    private readonly ILogger<TimerService> logger;
    private readonly NotifierService notifier;
    private System.Timers.Timer? timer;

    public TimerService(NotifierService notifier, 
        ILogger<TimerService> logger)
    {
        this.notifier = notifier;
        this.logger = logger;
    }

    public void Start()
    {
        if (timer is null)
        {
            timer = new();
            timer.AutoReset = true;
            timer.Interval = 10000;
            timer.Elapsed += HandleTimer;
            timer.Enabled = true;
            logger.LogInformation("Started");
        }
    }

    private async void HandleTimer(object? source, 
        System.Timers.ElapsedEventArgs e)
    {
        elapsedCount += 1;
        await notifier.Update("elapsedCount", elapsedCount);
        logger.LogInformation($"elapsedCount: {elapsedCount}");
    }

    public void Dispose()
    {
        timer?.Dispose();
    }
}

NotifierService.cs:

using System;
using System.Threading.Tasks;

public class NotifierService
{
    public async Task Update(string key, int value)
    {
        if (Notify != null)
        {
            await Notify.Invoke(key, value);
        }
    }

    public event Func<string, int, Task>? Notify;
}

Hizmetleri kaydetme:

Bir Blazor WebAssembly uygulamada, hizmetleri içinde tekli olarak Program.cs kaydettirin:

builder.Services.AddSingleton<NotifierService>();
builder.Services.AddSingleton<TimerService>();

Bir Blazor Server uygulamada, hizmetleri kapsamındaki olarak Program.cs kaydetme:

builder.Services.AddScoped<NotifierService>();
builder.Services.AddScoped<TimerService>();

Bir bileşeni NotifierService güncelleştirmek için kullanın.

Pages/ReceiveNotifications.razor:

@page "/receive-notifications"
@implements IDisposable
@inject NotifierService Notifier
@inject TimerService Timer

<h1>Receive Notifications</h1>

<h2>Timer Service</h2>

<button @onclick="StartTimer">Start Timer</button>

<h2>Notifications</h2>

<p>
    Status:
    @if (lastNotification.key is not null)
    {
        <span>@lastNotification.key = @lastNotification.value</span>
    }
    else
    {
        <span>Awaiting first notification</span>
    }
</p>

@code {
    private (string key, int value) lastNotification;

    protected override void OnInitialized()
    {
        Notifier.Notify += OnNotify;
    }

    public async Task OnNotify(string key, int value)
    {
        await InvokeAsync(() =>
        {
            lastNotification = (key, value);
            StateHasChanged();
        });
    }

    private void StartTimer()
    {
        Timer.Start();
    }

    public void Dispose()
    {
        Notifier.Notify -= OnNotify;
    }
}

Yukarıdaki örnekte:

NotifierService bileşenin yöntemini OnNotify 'nin eşitleme bağlamı Blazor dışında çağırır. InvokeAsync doğru bağlama geçmek ve bir işlemeyi kuyruğa işlemek için kullanılır. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.
Bileşen, 'i uygulamaya IDisposable almaktadır. Temsilcinin OnNotify aboneliği, bileşen Dispose atılmasında çerçeve tarafından çağrılan yönteminde iptal edildi. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Öğelerin `@key` ve bileşenlerin korunmasını kontrol etmek için kullanın

Öğelerin veya bileşenlerin ve öğelerin ya da bileşenlerin bir listesini daha sonra değiştirirken, önceki öğelerden veya bileşenlerden hangilerinin korunarak model nesnelerinin onlara nasıl eşlen gerektiğine Blazor karar ver gerekir. Normalde bu işlem otomatiktir ve yoksayılabilir, ancak işlemi kontrol etmek istediğiniz durumlar vardır.

Aşağıdaki ve bileşenlerini Details dikkate People anın:

Bileşen, Details bir Data öğede görüntülenen üst bileşenden veri ( ) People <input> alır. Görüntülenen herhangi <input> bir öğe, öğelerden birini seçen kullanıcıdan sayfanın odağında <input> yer alır.
Bileşen, People bileşeni kullanarak görüntülemek için kişi nesnelerinin bir listesini Details oluşturur. Üç saniyede bir koleksiyona yeni bir kişi eklenir.

Bu tanıtım şunları sağlar:

İşlenen <input> çeşitli bileşenler arasından bir Details seçin.
Kişi koleksiyonu otomatik olarak büyüdükçe sayfanın odak noktası davranışını inceleme.

Shared/Details.razor:

<input value="@Data" />

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

Aşağıdaki People bileşende, içinde bir kişi eklemenin her OnTimerCallback yinelemesi koleksiyonun Blazor tamamının yeniden derlemesini sağlar. Sayfanın odağı öğelerin aynı dizin konumunda kalır, bu nedenle kişi her ekleniyorsa odak <input> kayması olur. Odağı kullanıcının seçtiklerinden kaydırmak istenmeyen bir davranış değildir. Kötü davranışı aşağıdaki bileşenle gösterdikten sonra, kullanıcının deneyimini geliştirmek @key için yönerge özniteliği kullanılır.

Pages/People.razor:

@page "/people"
@using System.Timers
@implements IDisposable

@foreach (var person in people)
{
    <Details Data="@person.Data" />
}

@code {
    private Timer timer = new Timer(3000);

    public List<Person> people =
        new()
        {
            { new Person { Data = "Person 1" } },
            { new Person { Data = "Person 2" } },
            { new Person { Data = "Person 3" } }
        };

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            people.Insert(0,
                new Person
                {
                    Data = $"INSERTED {DateTime.Now.ToString("hh:mm:ss tt")}"
                });
            StateHasChanged();
        });
    }

    public void Dispose() => timer.Dispose();

    public class Person
    {
        public string? Data { get; set; }
    }
}

Koleksiyonun içeriği people eklenen, silinen veya yeniden sıralandırılmış girişlerle değişir. Yenidenendering, görünür davranış farklılıklarına yol açabilirsiniz. Bir kişi koleksiyona her people ekildiğinde, o anda odaklanmış olan öğenin önceki öğesi odağı alır. Kullanıcının odağı kaybolur.

Öğelerin veya bileşenlerin bir koleksiyona eşleme işlemi yönerge özniteliğiyle @key denetlenebilirsiniz. kullanımı, @key anahtarın değerine göre öğelerin veya bileşenlerin korunmasını garantiler. Önceki Details örnekteki bileşen öğede anahtarlandı ise, değişmemiş yeniden person Blazor işleyici Details bileşenleri yoksayar.

Bileşeni koleksiyon People ile yönerge @key özniteliğini kullanmak üzere değiştirmek people için, öğesini aşağıdaki şekilde <Details> güncelleştirin:

<Details @key="person" Data="@person.Data" />

Koleksiyon people değişirse örnekler ve Details örnekler arasındaki ilişki person korunur. Koleksiyonun Person başına bir ekildiğinde, ilgili konuma Details yeni bir örnek eklenir. Diğer örnekler değiştirilmeden kalır. Bu nedenle, koleksiyona kişiler eklendiklerine göre kullanıcının odağı kaybedilir.

Yönerge özniteliği kullanılırken diğer koleksiyon @key güncelleştirmeleri de aynı davranışı sergiler:

Bir örnek koleksiyondan silinirse, kullanıcı arabiriminden yalnızca ilgili bileşen örneği kaldırılır. Diğer örnekler değiştirilmeden kalır.
Koleksiyon girişleri yeniden sıralanmışsa, ilgili bileşen örnekleri kullanıcı arabiriminde korunur ve yeniden sıralanmış olur.

Önemli

Anahtarlar her kapsayıcı öğesi veya bileşeni için yereldir. Anahtarlar, belge genelinde genel olarak karşılaştırılamaz.

Ne zaman kullan `@key`

Genellikle, bir liste her işlenmiş olduğunda (örneğin, bir blokta) ve tanımlamak için @key uygun bir değer mevcut olduğunda kullanmak foreach @key mantıklıdır.

Aşağıdaki örneklerde de olduğu gibi, bir nesne değişmeden bir öğeyi veya bileşen alt @key ağacını korumak için de kullanabilirsiniz.

Örnek 1:

<li @key="person">
    <input value="@person.Data" />
</li>

Örnek 2:

<div @key="person">
    @* other HTML elements *@
</div>

Bir örnek person değişirse, öznitelik @key yönergesi şunları Blazor yapmak zorunda:

Veya ve <li> <div> altlarının tamamını atın.
Kullanıcı arabirimi içindeki alt ağacı yeni öğeler ve bileşenlerle yeniden oluşturma.

Bu, koleksiyon bir alt ağaç içinde değişiklik olduğunda hiçbir kullanıcı arabirimi durumunun korunmay güvence altına almak için yararlıdır.

Kapsamı: `@key`

Öznitelik @key yönergesi, üst öğesi içindeki kendi alt öğelerini kapsamına almaktadır.

Aşağıdaki örneği inceleyin. ve first second anahtarları, dış öğenin aynı kapsamında birbirlerine karşı <div> karşılaştırıldı:

<div>
    <div @key="first">...</div>
    <div @key="second">...</div>
</div>

Aşağıdaki örnek, ve anahtarlarını kendi kapsamlarında, birbirlerine ilgisiz ve birbirini first second etkilemeden gösteriyor. Her @key kapsam, üst öğelerde <div> değil yalnızca üst öğe için <div> geçerlidir:

<div>
    <div @key="first">...</div>
</div>
<div>
    <div @key="second">...</div>
</div>

Daha önce Details gösterilen bileşen için, aşağıdaki örnekler verileri person aynı kapsamda işler ve için tipik @key kullanım örneklerini @key gösterir:

<div>
    @foreach (var person in people)
    {
        <Details @key="person" Data="@person.Data" />
    }
</div>

@foreach (var person in people)
{
    <div @key="person">
        <Details Data="@person.Data" />
    </div>
}

<ol>
    @foreach (var person in people)
    {
        <li @key="person">
            <Details Data="@person.Data" />
        </li>
    }
</ol>

Aşağıdaki örnekler yalnızca her @key bileşen örneğini çevreleyen veya <div> <li> Details öğesinin kapsamını içerir. Bu person nedenle, koleksiyonun her people üyesinin verileri işlenen bileşenler genelinde her person bir örnekte Details anahtarlanmaz. kullanırken aşağıdaki desenlerden @key kaçının:

@foreach (var person in people)
{
    <div>
        <Details @key="person" Data="@person.Data" />
    </div>
}

<ol>
    @foreach (var person in people)
    {
        <li>
            <Details @key="person" Data="@person.Data" />
        </li>
    }
</ol>

Ne zaman kullanmamalı? `@key`

ile işleme sırasında bir performans maliyeti @key vardır. Performans maliyeti büyük değildir, ancak yalnızca öğenin veya bileşenin korunmasının uygulamaya yarar @key olup olmadığını belirtin.

Kullanılmasa @key bile, Blazor alt öğeyi ve bileşen örneklerini mümkün olduğunca korur. Kullanmanın tek avantajı, eşlemeyi seçmek yerine model örneklerinin korunan bileşen örnekleriyle @key nasıl eşlenmiş olduğu üzerinde Blazor denetimdir.

Için kullanmak üzere değerler `@key`

Genellikle için aşağıdaki değerlerden birini sağlamak @key mantıklıdır:

Nesne örneklerini modelleme. Örneğin, önceki Person örnekte örneği ( ) person kullanılmıştır. Bu, nesne başvurusu eşitliği temel alarak koruma sağlar.
Benzersiz tanımlayıcılar. Örneğin, benzersiz tanımlayıcılar , veya türünde birincil anahtar değerlerini int string temel alarak Guid olabilir.

için kullanılan değerlerin @key çatışmaması gerekir. Aynı üst öğe içinde tutarsız değerler algılanırsa, eski öğeleri veya bileşenleri yeni öğelere veya bileşenlere belirlenimci olarak eşleyemedikleri için Blazor bir özel durum oluşturur. Yalnızca nesne örnekleri veya birincil anahtar değerleri gibi ayrı değerler kullanın.

Öznitelik uygulama

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

@page "/"
@attribute [Authorize]

Koşullu HTML öğesi öznitelikleri

HTML öğesi öznitelik özellikleri koşullu olarak .NET değerine göre ayarlanır. değer veya false null ise özelliği ayar değildir. Değer ise true özelliği ayarlanır.

Aşağıdaki örnekte, IsCompleted öğesinin <input> özelliğinin ayar olup checked olmadığını belirler.

Pages/ConditionalAttribute.razor:

@page "/conditional-attribute"

<label>
    <input type="checkbox" checked="@IsCompleted" />
    Is Completed?
</label>

<button @onclick="@(() => IsCompleted = !IsCompleted)">
    Change IsCompleted
</button>

@code {
    [Parameter]
    public bool IsCompleted { get; set; }
}

Daha fazla bilgi için bkz. RazorASP.NET Core için sözdizimi başvurusu.

Uyarı

gibi bazı HTML öznitelikleri , .NET türü olduğunda düzgün aria-pressed bool çalışmaz. Bu durumlarda, yerine string bir türü bool kullanın.

Ham HTML

Dizeler normalde DOM metin düğümleri kullanılarak işlenir; başka bir anlama gelir; içeremedikleri işaretlemeler yoksayılır ve değişmez metin olarak kabul edilir. Ham HTML'yi işlemek için HTML içeriğini bir değerde MarkupString sarman. Değer HTML veya SVG olarak ayrıştırıldı ve DOM'ye eklendi.

Uyarı

Güvenilmeyen herhangi bir kaynaktan oluşturulmuş ham HTML işleme bir güvenlik riskidir ve her zaman kaçınılmalıdır.

Aşağıdaki örnek, bir MarkupString bileşenin işlenmiş çıkışına statik HTML içeriği bloğu eklemek için türünü kullanmayı gösterir.

Pages/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 Şablon

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

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

Aşağıdaki örnek, RenderFragment RenderFragment<TValue> bir bileşeni doğrudan bir bileşende nasıl belirtdiğini ve işleneceğini gösterir. Oluşturma parçaları, şablonlu bileşenlerebağımsız değişken olarak da geçirilebilir.

Pages/RazorTemplate.razor:

@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ş çıktısı:

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

Statik varlıklar

Blazorstatik varlıklar için ASP.NET Core uygulamalarının kuralını izler. Statik varlıklar, projenin web root ( wwwroot ) klasöründe veya klasör altındaki klasörlerde bulunur wwwroot .

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

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

Bileşenler, tilde işareti gösterimini ( ~/ ) desteklemez.

Uygulamanın temel yolunu ayarlama hakkında daha fazla bilgi için bkz ASP.NET Core barındırma ve dağıtma Blazor ..

Etiket Yardımcıları bileşenlerde desteklenmiyor

Tag Helpers bileşenlerinde desteklenmez. ' De etiket Yardımcısı benzeri işlevsellik sağlamak için Blazor , etiket Yardımcısı ile aynı işlevselliğe sahip bir bileşen oluşturun ve bunun yerine bileşeni kullanın.

Ölçeklenebilir vektör grafik (SVG) görüntüleri

İşleme Blazor HTML, ölçeklenebilir vektör GRAFIK (SVG) görüntüleri .svg de dahil olmak üzere tarayıcıda desteklenen görüntüler () etiketi aracılığıyla desteklenir <img> :

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

Benzer şekilde, SVG görüntüleri bir stil sayfası dosyasının () CSS kurallarında desteklenir .css :

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

Blazor , <foreignObject> BIR SVG içinde rastgele HTML 'yi göstermek için öğesini destekler. Biçimlendirme, rastgele HTML, a RenderFragment veya bir bileşeni temsil edebilir Razor .

Aşağıdaki örnek şunları göstermektedir:

Bir string () görünümü @message .
Bir <input> öğe ve alanla iki yönlü bağlama value .
Bir Robot bileşen.

<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ışı

@preservewhitespaceYönergesi bir değeriyle birlikte kullanılmamışsa true , şu durumlarda fazladan boşluk varsayılan olarak kaldırılır:

Bir öğe içinde baştaki veya sondaki.
Bir parametre içinde baştaki veya sondaki RenderFragment / RenderFragment<TValue> (örneğin, başka bir bileşene geçirilen alt içerik).
Ya da gibi bir C# kod bloğunun önünde veya sonrasında gelir @if @foreach .

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

@preservewhitespace true Razor .razor Tercihi belirli bir bileşene uygulamak için dosyanın en üstüne () yönergesini ekleyin.
@preservewhitespace true _Imports.razor Bir alt dizine veya tüm projeye tercihi uygulamak için yönergesini bir dosyanın içine ekleyin.

Çoğu durumda, uygulamalar genellikle normal şekilde çalışmaya devam ederken (ancak daha hızlı), hiçbir eylem gerekmez. Boşluk bırakma, belirli bir bileşen için işleme sorununa neden oluyorsa, @preservewhitespace true Bu iyileştirmeyi devre dışı bırakmak için o bileşende kullanın.

Genel tür parametresi desteği

@typeparamYönergesi, oluşturulan bileşen sınıfı için genel bir tür parametresi bildirir:

@typeparam TItem

Tür kısıtlamalarına sahip C# sözdizimi where destekleniyor:

@typeparam TEntity where TEntity : IEntity

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

RazorJavaScript 'ten bileşenleri işleme

Razor bileşenler, mevcut JS uygulamaları için JavaScript 'ten (JS) dinamik olarak işlenebilir.

Bir Razor BILEŞENI js 'den işlemek için, bir BILEŞENI js oluşturma için bir kök bileşen olarak kaydedin ve bileşene bir tanımlayıcı atayın:

Bir Blazor Server uygulamada, içindeki çağrısını değiştirin AddServerSideBlazor Program.cs :
```
builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterForJavaScript<Counter>(identifier: "counter");
});
```
Not

Yukarıdaki kod örneği, uygulamanın bileşenleri için (örneğin,) bir ad alanı gerektirir using BlazorSample.Pages; Program.cs .
Bir Blazor WebAssembly uygulamada, RegisterForJavaScript içinde üzerinde arama RootComponents yapın Program.cs :
```
builder.RootComponents.RegisterForJavaScript<Counter>(identifier: "counter");
```
Not

Yukarıdaki kod örneği, uygulamanın bileşenleri için (örneğin,) bir ad alanı gerektirir using BlazorSample.Pages; Program.cs .

BlazorJs uygulamasına ( blazor.server.js veya) yükleyin blazor.webassembly.js . Bileşen parametrelerini gerektiği şekilde geçirerek, bileşeni JS 'den bir kapsayıcı öğesine işle:

let containerElement = document.getElementById('my-counter');
await Blazor.rootComponents.add(containerElement, 'counter', { incrementAmount: 10 });

Blazor özel öğeler

deneysel destek, Microsoft.AspNetCore.Components.CustomElements NuGet paketinikullanarak özel öğeler oluşturmak için kullanılabilir. Özel öğeler, özel HTML öğelerini uygulamak için standart HTML arabirimlerini kullanır.

Kök bileşeni özel öğe olarak Kaydet:

Bir Blazor Server uygulamada, içindeki çağrısını değiştirin AddServerSideBlazor Program.cs :
```
builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterAsCustomElement<Counter>("my-counter");
});
```
Not

Yukarıdaki kod örneği, uygulamanın bileşenleri için (örneğin,) bir ad alanı gerektirir using BlazorSample.Pages; Program.cs .
Bir Blazor WebAssembly uygulamada, RegisterAsCustomElement içinde üzerinde arama RootComponents yapın Program.cs :
```
builder.RootComponents.RegisterAsCustomElement<Counter>("my-counter");
```
Not

Yukarıdaki kod örneği, uygulamanın bileşenleri için (örneğin,) bir ad alanı gerektirir using BlazorSample.Pages; Program.cs .

Özel öğesini herhangi bir Web çerçevesiyle kullanın. örneğin, önceki counter özel öğesi React bir uygulamada aşağıdaki biçimlendirme ile kullanılır:

<my-counter increment-amount={incrementAmount}></my-counter>

İle özel öğeler oluşturmayla ilgili bir örnek için Blazor , bkz. Blazor özel öğeler örnek projesi.

Uyarı

Özel öğeler özelliği şu anda deneysel, desteklenmeyen ve değiştirilebilir veya herhangi bir zamanda kaldırılabilir. Bu yaklaşımın gereksinimlerinizi ne kadar iyi karşıladığı hakkında geri bildirimde bulunun.

Angular ve React bileşenleri oluşturma

RazorAngular veya React gibi web çerçeveleri bileşenlerinden çerçeveye özgü JavaScript (JS) bileşenleri oluşturun. Bu yetenek .NET 6 ' da bulunmaz, ancak bu özellik, JS ' den bileşen işlemeye yönelik yeni destek ile etkinleştirilir Razor . GitHub üzerinde JS bileşeni oluşturma örneği , bileşenlerinden Angular ve React bileşenleri oluşturmayı gösterir Razor . README.mddaha fazla bilgi için GitHub örnek uygulamanın dosyasına bakın.

Uyarı

Angular ve React bileşen özellikleri şu anda deneysel, desteklenmeyen ve herhangi bir zamanda değiştirilebilir veya kaldırılabilir. Bu yaklaşımın gereksinimlerinizi ne kadar iyi karşıladığı hakkında geri bildirimde bulunun.

Blazoruygulamalar, Razor Bileşenler kullanılarak oluşturulmuştur. Bir bileşen, dinamik davranışı etkinleştirmek için işlem mantığı olan kullanıcı arabirimi (UI) içinde kendi kendine içerilen bir bölümüdür. Bileşenler iç içe, yeniden kullanılabilir, projeler arasında paylaşılabilir ve MVC ve Razor Sayfalar uygulamalarında kullanılabilir.

Bileşen sınıfları

Bileşenler Razor , dosya uzantılı bileşen dosyalarında C# ve HTML işaretlemesi kullanılarak uygulanır .razor .

Razor sözdizimi

Bileşenler Razor söz diziminikullanır. İki Razor özellik, bileşenler, yönergeler ve yönerge öznitelikleri tarafından yaygın olarak kullanılır. Bunlar, İşaretlemede görünen önekli anahtar kelimelerdir @ Razor :

Yönergeler: bileşen biçimlendirmesinin ayrıştırılma veya işlevlerin şeklini değiştirin. Örneğin, yönerge, @page yönlendirme şablonu ile yönlendirilebilir bir bileşen belirtir ve belirli BIR URL 'deki bir kullanıcının içindeki isteğiyle doğrudan erişilebilir.
Yönerge öznitelikleri: bir bileşen öğesinin ayrıştırılma veya işlevler şeklini değiştirin. Örneğin, @bind bir öğesinin Directive özniteliği, <input> verileri öğe değerine bağlar.

Bileşenlerde kullanılan yönergeler ve yönerge öznitelikleri, bu makalede ve belge kümesinin diğer makalelerinde açıklanacaktır Blazor . Sözdizimi hakkında genel bilgi için Razor bkz RazorASP.NET Core için sözdizimi başvurusu ..

Adlar

Bir bileşenin adı, büyük harf karakteriyle başlamalıdır:

ProductDetail.razor geçerli.
productDetail.razor geçersizdir.

BlazorBelgeler genelinde kullanılan ortak adlandırma kuralları Blazor şunları içerir:

Bileşen dosyası yolları, Pascal durumunu kullanır † ve bileşen kodu örneklerini göstermeden önce görüntülenir. Yollar tipik klasör konumlarını gösterir. Örneğin, Pages/ProductDetail.razor ProductDetail bileşenin bir dosya adı olduğunu ProductDetail.razor ve Pages uygulamanın klasöründe bulunduğunu gösterir.
Yönlendirilebilir bileşenlere yönelik bileşen dosyası yolları, bir bileşenin yol şablonundaki sözcükler arasındaki boşluklar için kısa çizgilerden oluşan URL 'lerle eşleşir. Örneğin, ProductDetail () yol şablonuna sahip bir bileşen, /product-detail @page "/product-detail" ilişkili URL 'deki bir tarayıcıda istenir /product-detail .

†Pascal Case (büyük ortası Case), boşluk ve noktalama işareti içermeyen ve ilk kelime dahil olmak üzere her bir sözcüğün ilk harfine sahip olan bir adlandırma kuralıdır.

Yönlendirme

İçinde yönlendirme Blazor , bir yönergeyle uygulamadaki her erişilebilir bileşene bir rota şablonu sağlayarak elde edilir @page . Razor @page Yönergeyle bir dosya derlendiğinde, oluşturulan sınıfa RouteAttribute yol şablonunu belirten bir değer verilir. Çalışma zamanında, yönlendirici bileşen sınıflarını bir ile arar RouteAttribute ve hangi bileşenin Istenen URL ile eşleşen bir rota şablonuna sahip olduğunu işler.

Aşağıdaki HelloWorld Bileşen, bir yol şablonu kullanır /hello-world . İlgili URL 'ye bileşen için işlenmiş Web sayfasına ulaşıldı /hello-world . BlazorVarsayılan protokol, ana bilgisayar ve bağlantı noktası ile yerel olarak bir uygulama çalıştırırken, HelloWorld bileşeni adresindeki tarayıcıda istenir https://localhost:5001/hello-world . Web sayfası üreten bileşenler genellikle klasöründe bulunur, ancak iç içe klasörler dahil olmak üzere bileşenleri tutmak Pages için herhangi bir klasörü kullanabilirsiniz.

Pages/HelloWorld.razor:

@page "/hello-world"

<h1>Hello World!</h1>

Shared/NavMenu.razor:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="hello-world">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Hello World!
    </NavLink>
</li>

ve bileşenlerinin açıklamaları da dahil olmak üzere daha NavLink fazla NavMenu bilgi için bkz. ASP.NET Core Blazor Yönlendirme .

İşaretleme

Bileşen sınıfının üyeleri bir veya daha fazla blokta @code tanımlanır. Bloklarda @code bileşen durumu belirtilir ve C# ile işlenir:

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

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

Pages/Markup.razor:

@page "/markup"

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

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

Not

Belgeler genelindeki Blazor örnekler, özel private üyeler için erişim değiştiricisini belirtir. Özel üyelerin kapsamı bir bileşenin sınıfına göredir. Ancak C# hiçbir erişim değiştiricisi mevcut değilken erişim değiştiricisini varsayıyor, dolayısıyla kendi kodunda private üyeleri " " açıkça private 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çeve, bir Belge Nesne Modeli bileşeni bir bileşenin ana dal (DOM) ve Basamaklı Stil Sayfası Nesne Modeli Blazor 'nin (CSSOM) birleşimi olan işleme ağacı olarak dahili olarak işler. Bileşen başlangıçta işlenmeden sonra, bileşenin işleme ağacı olaylara yanıt olarak yeniden oluşturulur. Blazor , yeni işleme ağacını önceki işleme ağacıyla karşılaştırıldığında tarayıcının DOM'sında görüntülenmek için yapılan tüm değişiklikleri uygular. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.

İç içe bileşenler

Bir başlığı Heading görüntülemek için diğer bileşenler tarafından kullanılmaktadır aşağıdaki bileşeni göz önünde bulundurabilirsiniz.

Shared/Heading.razor:

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

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

Bileşende aşağıdaki HeadingExample işaretleme, etiketin Heading göründüğü konumda önceki bileşeni <Heading /> işler.

Pages/HeadingExample.razor:

@page "/heading-example"

<Heading />

Ad alanları

Bileşenin Counter ad alanı: BlazorSample.Pages .
Bileşenin tam tür adı: BlazorSample.Pages.Counter .

@using BlazorSample.Components

Not

@using dosyada yönergeleri _Imports.razor yalnızca dosyalara Razor uygulanır ( ), .razor C# dosyalarına değil ( .cs ).

<BlazorSample.Components.ProductDetail />

ile yazan bir bileşenin ad Razor alanı aşağıdakilere göre (öncelik sırasına göre) temel alınan bir ad alanıdır:

Dosyanın @namespace Razor işaretlemesinde yönergesi (örneğin, @namespace BlazorSample.CustomNamespace ).
Proje, RootNamespace proje dosyasındadır (örneğin, <RootNamespace>BlazorSample</RootNamespace> ).
Proje dosyasının dosya adına () alınan proje adı ve proje .csproj kökünden bileşene giden yol. Örneğin, çerçeve proje ad {PROJECT ROOT}/Pages/Index.razor alanı () ile BlazorSample BlazorSample.csproj bileşenin ad alanına BlazorSample.Pages Index çözümler. {PROJECT ROOT} , projenin kök yoludur. Bileşenler C# adı bağlama kurallarını takip eder. Bu Index örnekteki bileşen için kapsamda yer alan bileşenler tüm bileşenlerdir:
- Aynı Pages klasörde.
- Projenin kökünde bulunan ve açıkça farklı bir ad alanı belirtmeyen bileşenler.

Aşağıdakiler desteklenmiyor:

global::Nitelik.
Diğer ad deyimleriyle using bileşenleri içeri aktarma. Örneğin, @using Foo = Bar desteklenmiyor.
Kısmen uygun adlar. Örneğin, bir bileşene ek olarak @using BlazorSample uygulamanın NavMenu klasöründeki ( ) bileşenine ile Shared Shared/NavMenu.razor <Shared.NavMenu></Shared.NavMenu> başvurabilirsiniz.

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

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

Not

Bileşene özgü stilleri tanımlayan bir bileşen stil sayfası ayrı bir dosyadır ( .css ). Blazor CSS yalıtımı daha sonra içinde ASP.NET Core Blazor CSS yalıtımı açıklanmıştır.

Aşağıdaki örnek, bir proje Counter şablonundan @code oluşturulan bir uygulamada bloğu olan varsayılan bileşeni Blazor gösterir. Biçimlendirme ve C# kodu aynı dosyadadır. Bu, bileşen yazmada en yaygın yaklaşımdır.

Pages/Counter.razor:

@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 bileşen, kısmi sınıfa sahip bir arka kod dosyası kullanarak Counter Razor C# kodundan HTML ve işaretlemeyi böler:

Pages/CounterPartialClass.razor:

@page "/counter-partial-class"

<h1>Counter</h1>

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

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

Pages/CounterPartialClass.razor.cs:

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

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

@using dosyada yönergeleri _Imports.razor yalnızca dosyalara Razor uygulanır ( ), .razor C# dosyalarına değil ( .cs ). Ad alanlarını gerektiğinde kısmi bir sınıf dosyasına ekleyin.

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

using System.Net.Http;
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 klasörüne karşılık gelen ad alanını Shared da içerir:

using BlazorSample;
using BlazorSample.Shared;

Temel sınıf belirtme

@inheritsyönergesi, bir bileşen için temel bir sınıf belirtmek için kullanılır. Aşağıdaki örnek, bir bileşenin özelliklerini ve yöntemlerini sağlamak için bir temel sınıfı nasıl devralabilir? Temel BlazorRocksBase sınıf, 'den türetildi. ComponentBase

Pages/BlazorRocks.razor:

@page "/blazor-rocks"
@inherits BlazorRocksBase

<h1>@BlazorRocksText</h1>

BlazorRocksBase.cs:

using Microsoft.AspNetCore.Components;

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

Bileşen parametreleri

Bileşen parametreleri, bileşenlerine veri iletir ve özniteliğiyle bileşen sınıfındaki genel C# özellikleri kullanılarak [Parameter] tanımlanır. Aşağıdaki örnekte, yerleşik başvuru türü ( System.String ) ve kullanıcı tanımlı başvuru türü ( ) bileşen parametreleri olarak PanelBody geçirildi.

PanelBody.cs:

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

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

Uyarı

Bileşen parametreleri için ilk değerlerin sağlanması desteklenecektir, ancak bileşen ilk kez işlenen sonra kendi parametrelerine yazan bir bileşen oluşturmaz. Daha fazla bilgi için bu makalenin Üzerine yazılan parametreler bölümüne bakın.

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

İlk ParameterChild bileşen parametre bağımsız değişkenleri belirtmeden işlenir.
İkinci bileşen, özelliklerinin değerlerini ayarlamak için açık bir C# ifadesi kullanan bileşenden ve ParameterChild Title değerlerini Body ParameterParent PanelBody alır.

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

Bileşenden gelen aşağıdaki işlenmiş HTML işaretlemesi, bileşen bileşen parametre değerlerini temin ParameterParent ParameterChild ParameterParent etmese bileşen varsayılan değerlerini gösterir. Bileşen ParameterParent bileşen parametre değerlerini sağladığında, bileşenin ParameterChild varsayılan değerlerini değiştirir.

Not

Netlik sağlamak için işlenmiş CSS stili sınıfları aşağıdaki işlenmiş 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>

titleAlanın değeri.
GetTitleC# yönteminin sonucu.
ToLongDateString Örtülü bir C# ifadesikullanan, ile uzun biçimdeki geçerli yerel tarih.
panelDataNesnenin Title özelliği.

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

Not

Bir C# üyesini bir bileşen parametresine atarken, üyeyi @ sembolle önek olarak ekleyin ve PARAMETRENIN HTML özniteliğiyle hiçbir zaman ön eki kullanmayın.

Doğru:

<ParameterChild Title="@title" />

Yanlış:

<ParameterChild @Title="title" />

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

Yukarıdaki örnekteki kod, uygulama oluşturulduğunda bir derleyici hatası oluşturur:

' Await ' işleci yalnızca zaman uyumsuz bir yöntem içinde kullanılabilir. Bu yöntemi ' Async ' değiştiricisi ile işaretlemeyi ve dönüş türünü ' Task ' olarak değiştirmeyi düşünün.

<ParameterChild Title="@title" />

@code {
    private string title;

    protected override async Task OnInitializedAsync()
    {
        title = await ...;
    }
}

Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

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

Yukarıdaki örnekteki kod, uygulama oluşturulduğunda bir derleyici hatası oluşturur:

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

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

Daha fazla bilgi için bkz. RazorASP.NET Core için sözdizimi başvurusu.

Uyarı

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

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

Sağlanan ham verileri temsil etmek için Parameter özelliğini bir Auto özelliği olarak bırakın.
Dönüştürülen verileri parametre özelliğine göre sağlamak için farklı bir özellik veya yöntem oluşturun.

OnParametersSetAsyncYeni verilerin her alındığı her seferinde alınan bir parametreyi dönüştürmek için geçersiz kılın.

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

İlk atamasından sonra DateTime.Now , geliştirici kodunda bir değer atamayın StartData . Daha fazla bilgi için bu makalenin üzerine yazılan parametreler bölümüne bakın.

Rota parametreleri

Bileşenler, yönergenin yol şablonunda rota parametreleri belirtebilir @page . Blazor Yönlendirici , karşılık gelen bileşen parametrelerini doldurmak için yol parametrelerini kullanır.

Pages/RouteParameter.razor:

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

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

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

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

{*pageRoute}Birden çok klasör sınırlarındaki yolları yakalayan catch-all yol parametreleri () hakkında daha fazla bilgi için bkz ASP.NET Core Blazor Yönlendirme ..

Üzerine yazılan parametreler

BlazorFramework genellikle güvenli üst-alt parametre ataması uygular:

Parametrelerin üzerine yazılması beklenmedik.
Yan etkiler en aza indirilir. Örneğin, sonsuz işleme döngüleri oluşturabileceğinden ek işlemeye kaçınılmaz.

Alt bileşen, üst bileşenden bir veya daha fazla parametre değeri ile işlenir.
Alt öğe doğrudan bir parametre değerine yazar.
Üst bileşen, alt öğenin parametresinin değerini yeniden ekler ve üzerine yazar.

Parametre değerlerinin üzerine yazılması olasılığı, alt bileşenin özellik set erişimcilerine de genişletilir.

Önemli

Genel kılavuzumuz, bileşen ilk kez işlendikten sonra kendi parametrelerine doğrudan yazılan bileşenler oluşturmaktır.

Aşağıdaki hatalı bileşeni göz önünde bulundurun Expander :

Alt içeriği işler.
Bileşen parametresi () ile alt öğe içeriğini gösterir Expanded .
Bileşen doğrudan Expanded parametresine yazar, bu, üzerine yazılan parametrelerle ilgili sorunu gösterir ve kaçınılması gerekir.

Shared/Expander.razor:

<div @onclick="Toggle" class="card bg-light mb-3" style="width:30rem">
    <div class="card-body">
        <h2 class="card-title">Toggle (<code>Expanded</code> = @Expanded)</h2>

        @if (Expanded)
        {
            <p class="card-text">@ChildContent</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public bool Expanded { get; set; }

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

    private void Toggle()
    {
        Expanded = !Expanded;
    }
}

ExpanderBileşen, şu ExpanderExample arama olabilecek üst bileşene eklenir StateHasChanged :

StateHasChangedGeliştirici kodu 'nda çağırmak, bir bileşene durumunun değiştiğini bildirir ve genellikle bileşeni Kullanıcı arabirimini güncelleştirmek için rerendering tetikler. StateHasChanged , ve ' de daha ayrıntılı bir şekilde ele alınmıştır RazorASP.NET Core bileşen yaşam döngüsü BlazorASP.NET Core bileşen işleme .
Düğmenin @onclick Directive özniteliği, düğme olayına bir olay işleyicisi ekler onclick . Olay işleme daha sonra içinde daha ayrıntılı olarak ele alınmıştır ASP.NET Core Blazor olay işleme .

Pages/ExpanderExample.razor:

@page "/expander-example"

<Expander Expanded="true">
    Expander 1 content
</Expander>

<Expander Expanded="true" />

<button @onclick="StateHasChanged">
    Call StateHasChanged
</button>

Önceki senaryodaki durumu korumak için bileşen içindeki özel bir alanı kullanarak, onun geçiş Expander durumunu koruyun.

Aşağıdaki düzeltilen Expander bileşen:

Üst öğeden Expanded bileşen parametre değerini kabul eder.
Olay içindeki bir özel alana () bileşen parametre değerini atar expanded . OnInitialized
Kendi iç geçiş durumunu korumak için özel alanını kullanır, bu da doğrudan bir parametreye yazmayı nasıl önleyeceğinizi gösterir.

Not

Bu bölümdeki öneri, bileşen parametresi erişimcilerinde benzer mantığa genişleterek set benzer, istenmeyen yan etkilere neden olabilir.

Shared/Expander.razor:

<div @onclick="Toggle" class="card bg-light mb-3" style="width:30rem">
    <div class="card-body">
        <h2 class="card-title">Toggle (<code>expanded</code> = @expanded)</h2>

        @if (expanded)
        {
            <p class="card-text">@ChildContent</p>
        }
    </div>
</div>

@code {
    private bool expanded;

    [Parameter]
    public bool Expanded { get; set; }

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

    protected override void OnInitialized()
    {
        expanded = Expanded;
    }

    private void Toggle()
    {
        expanded = !expanded;
    }
}

Daha fazla bilgi için bkz. Blazor Iki yönlü bağlama hatası (DotNet/aspnetcore #24599).

Alt içerik

Bileşenler, başka bir bileşenin içeriğini ayarlayabilir. Atama bileşeni, alt bileşenin açılış ve kapanış etiketleri arasında içerik sağlar.

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

Önemli

İçeriği alan özelliğin RenderFragment ChildContent kural tarafından adlandırılması gerekir.

Aşağıdaki RenderFragmentParent Bileşen, RenderFragmentChild içeriği alt bileşenin açılış ve kapanış etiketlerinin içine yerleştirerek işleme için içerik sağlar.

Pages/RenderFragmentParent.razor:

@page "/render-fragment-parent"

<h1>Render child content</h1>

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

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

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

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

Alternatif olarak, foreach döngüsü yerine bir döngüsü kullanın Enumerable.Range for . Aşağıdaki örnek, önceki RenderFragmentParent 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>
}

RenderFragmentBileşeninin bileşen Kullanıcı arabirimi için şablon olarak nasıl kullanılabileceği hakkında bilgi için aşağıdaki makalelere bakın:

Öznitelik döndürme ve rastgele parametreler

Aşağıdaki Splat bileşende:

İlk <input> öğesi ( id="useIndividualParams" ) bağımsız bileşen parametrelerini kullanır.
İkinci <input> öğe ( id="useAttributesDict" ) öznitelik splatesini kullanır.

Pages/Splat.razor:

@page "/splat"

<input id="useIndividualParams"
       maxlength="@maxlength"
       placeholder="@placeholder"
       required="@required"
       size="@size" />

<input id="useAttributesDict"
       @attributes="InputAttributes" />

@code {
    private string maxlength = "10";
    private string placeholder = "Input placeholder text";
    private string required = "required";
    private string size = "50";

    private Dictionary<string, object> InputAttributes { get; set; } =
        new()
        {
            { "maxlength", "10" },
            { "placeholder", "Input placeholder text" },
            { "required", "required" },
            { "size", "50" }
        };
}

<input>Web sayfasındaki işlenmiş öğeler aynıdır:

<input id="useIndividualParams"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

<input id="useAttributesDict"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

Rastgele öznitelikleri kabul etmek için, özelliği olarak ayarlanmış bir bileşen parametresi tanımlayın CaptureUnmatchedValues true :

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> InputAttributes { get; set; }
}

Shared/AttributeOrderChild1.razor:

<div @attributes="AdditionalAttributes" extra="5" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object> AdditionalAttributes { get; set; }
}

Pages/AttributeOrderParent1.razor:

@page "/attribute-order-parent-1"

<AttributeOrderChild1 extra="10" />

<div extra="5" />

Aşağıdaki örnekte, sırası extra ve @attributes alt bileşenin sırasıyla tersine çevrilir <div> :

Shared/AttributeOrderChild2.razor:

<div extra="5" @attributes="AdditionalAttributes" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object> AdditionalAttributes { get; set; }
}

Pages/AttributeOrderParent2.razor:

@page "/attribute-order-parent-2"

<AttributeOrderChild2 extra="10" />

<div>Üst bileşenin işlenmiş Web sayfasındaki extra="10" ek öznitelik ile geçirildiğinde şunları içerir:

<div extra="10" />

Bileşenlere başvuruları yakala

Bileşen başvuruları, komutları vermek için bir bileşen örneğine başvurmak için bir yol sağlar. Bir bileşen başvurusunu yakalamak için:

@refAlt bileşene bir öznitelik ekleyin.
Alt bileşenle aynı türde bir alan tanımlayın.

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

ReferenceChildÇağrıldığında bir iletiyi günlüğe kaydeden aşağıdaki bileşeni göz önünde bulundurun ChildMethod .

Shared/ReferenceChild.razor:

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

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

Bileşenin işlemesini tamamladıktan sonra bileşen başvurularını işlemek için, OnAfterRender veya OnAfterRenderAsync yöntemlerinikullanın.

Aşağıdaki lambda yaklaşımı önceki ReferenceChild bileşeni kullanır.

Pages/ReferenceParent1.razor:

@page "/reference-parent-1"

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

<ReferenceChild @ref="childComponent" />

@code {
    private ReferenceChild childComponent;
}

Aşağıdaki temsilci yaklaşımı önceki ReferenceChild bileşeni kullanır.

Pages/ReferenceParent2.razor:

@page "/reference-parent-2"

<button @onclick="callChildMethod">
    Call <code>ReferenceChild.ChildMethod</code> with an argument of 5
</button>

<ReferenceChild @ref="childComponent" />

@code {
    private ReferenceChild childComponent;
    private Action callChildMethod;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            callChildMethod = CallChildMethod;
        }
    }

    private void CallChildMethod()
    {
        childComponent.ChildMethod(5);
    }
}

Bir döngüdeki bileşenlere başvurmak için bir koleksiyon kullanın. Aşağıdaki örnekte:

Bileşenler bir öğesine eklenir List<T> .
İçindeki bileşen dizini tarafından ilgili bileşeni tetikleyen her bir bileşen için bir düğme oluşturulur ChildMethod List<T> .

Pages/ReferenceParent3.razor önceki bileşeni kullanma ReferenceChild :

@page "/reference-parent-3"

<ul>
    @for (int i = 0; i < 5; i++)
    {
        var index = i;
        var v = r.Next(1000);

        <li>
            <ReferenceChild @ref="childComponent" />
            <button @onclick="@(() => callChildMethod(index, v))">
                Component index @index: Call <code>ReferenceChild.ChildMethod(@v)</code>
            </button>
        </li>
    }
</ul>

@code {
    private Random r = new();
    private List<ReferenceChild> components = new();
    private Action<int, int> callChildMethod;

    private ReferenceChild childComponent
    {
        set => components.Add(value);
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            callChildMethod = CallChildMethod;
        }
    }

    private void CallChildMethod(int index, int value)
    {
        components.ElementAt(index).ChildMethod(value);
    }
}

Önemli

Eşitleme bağlamı

İş parçacığı engelleme çağrılarını önleyin

Not

Durumu güncelleştirmek için bileşen yöntemlerini dışarıdan çağır

Bir bileşenin bir süreölçer veya başka bir bildirim gibi dış bir olaya göre güncellenmesi gerekir, InvokeAsync kod yürütmeyi eşitleme bağlamına bağlayan yöntemi kullanın Blazor . Örneğin, güncelleştirilmiş durum hakkında bir dinleme bileşenine bildirimde bulunan aşağıdaki bildirim hizmetini göz önünde bulundurun. UpdateYöntemi, uygulamanın herhangi bir yerinden çağrılabilir.

TimerService.cs:

using System;
using System.Timers;
using Microsoft.Extensions.Logging;

public class TimerService : IDisposable
{
    private int elapsedCount;
    private readonly ILogger<TimerService> logger;
    private readonly NotifierService notifier;
    private Timer timer;

    public TimerService(NotifierService notifier, ILogger<TimerService> logger)
    {
        this.notifier = notifier;
        this.logger = logger;
    }

    public void Start()
    {
        if (timer is null)
        {
            timer = new();
            timer.AutoReset = true;
            timer.Interval = 10000;
            timer.Elapsed += HandleTimer;
            timer.Enabled = true;
            logger.LogInformation("Started");
        }
    }

    private async void HandleTimer(object source, ElapsedEventArgs e)
    {
        elapsedCount += 1;
        await notifier.Update("elapsedCount", elapsedCount);
        logger.LogInformation($"elapsedCount: {elapsedCount}");
    }

    public void Dispose()
    {
        timer?.Dispose();
    }
}

NotifierService.cs:

using System;
using System.Threading.Tasks;

public class NotifierService
{
    public async Task Update(string key, int value)
    {
        if (Notify != null)
        {
            await Notify.Invoke(key, value);
        }
    }

    public event Func<string, int, Task> Notify;
}

Hizmetleri kaydedin:

Bir Blazor WebAssembly uygulamada, Hizmetleri içine tekton olarak Kaydet Program.cs :

builder.Services.AddSingleton<NotifierService>();
builder.Services.AddSingleton<TimerService>();

Bir Blazor Server uygulamada, Hizmetleri kapsamına alındı olarak Kaydet Startup.ConfigureServices :
```
services.AddScoped<NotifierService>();
services.AddScoped<TimerService>();
```

NotifierServiceBir bileşeni güncelleştirmek için öğesini kullanın.

Pages/ReceiveNotifications.razor:

@page "/receive-notifications"
@implements IDisposable
@inject NotifierService Notifier
@inject TimerService Timer

<h1>Receive Notifications</h1>

<h2>Timer Service</h2>

<button @onclick="StartTimer">Start Timer</button>

<h2>Notifications</h2>

<p>
    Status:
    @if (lastNotification.key is not null)
    {
        <span>@lastNotification.key = @lastNotification.value</span>
    }
    else
    {
        <span>Awaiting first notification</span>
    }
</p>

@code {
    private (string key, int value) lastNotification;

    protected override void OnInitialized()
    {
        Notifier.Notify += OnNotify;
    }

    public async Task OnNotify(string key, int value)
    {
        await InvokeAsync(() =>
        {
            lastNotification = (key, value);
            StateHasChanged();
        });
    }

    private void StartTimer()
    {
        Timer.Start();
    }

    public void Dispose()
    {
        Notifier.Notify -= OnNotify;
    }
}

Yukarıdaki örnekte:

NotifierService bileşen OnNotify metodunu Blazor eşitleme bağlamı dışında çağırır. InvokeAsync doğru bağlama geçmek ve bir işlemeyi kuyruğa almak için kullanılır. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.
Bileşeni uygular IDisposable . OnNotifyTemsilci, Dispose bileşen atıldığı zaman Framework tarafından çağrılan yönteminde abone olunmaktadır. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

`@key`Öğelerin ve bileşenlerin korunmasını denetlemek için kullanın

Bir öğe veya bileşen listesi işlenirken ve öğeler ya da bileşenler daha sonra değiştiğinde, Blazor önceki öğelerin veya bileşenlerin ne zaman tutulacağına ve model nesnelerinin bunlara nasıl eşleneceğine karar vermelidir. Normalde, bu işlem otomatiktir ve yoksayılabilir, ancak işlemi denetlemek isteyebileceğiniz durumlar vardır.

Aşağıdakileri ve bileşenleri göz önünde bulundurun Details People :

DetailsBileşen, Data People bir öğesinde görünen üst bileşenden veri () alır <input> . Belirli bir görüntülenmiş <input> öğe, öğeden birini seçerken sayfanın odağını kullanıcıdan alabilir <input> .
PeopleBileşen, bileşeni kullanılarak görüntülenmek üzere kişi nesnelerinin bir listesini oluşturur Details . Her üç saniyede bir koleksiyona yeni bir kişi eklenir.

Bu gösterim şunları yapmanıza olanak sağlar:

<input>Birden çok işlenmiş bileşenden birini seçin Details .
Kişiler koleksiyonu otomatik olarak büyüdükçe sayfanın odağının davranışını inceleyin.

Shared/Details.razor:

<input value="@Data" />

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

Aşağıdaki People bileşende, içinde bir kişi eklemenin her yinelemesi, OnTimerCallback Blazor tüm koleksiyonu yeniden derlemeye neden olur. Sayfanın odağı, öğelerin Dizin konumunda kalır <input> , bu nedenle odak bir kişi eklendiğinde her seferinde kayar. Odağı kullanıcının seçtiği verilerden uzağa kaydırma, istenen davranış değildir. Aşağıdaki bileşenle zayıf davranış görüntülendikten sonra, @key Kullanıcı deneyimini geliştirmek için Directive özniteliği kullanılır.

Pages/People.razor:

@page "/people"
@using System.Timers
@implements IDisposable

@foreach (var person in people)
{
    <Details Data="@person.Data" />
}

@code {
    private Timer timer = new Timer(3000);

    public List<Person> people =
        new()
        {
            { new Person { Data = "Person 1" } },
            { new Person { Data = "Person 2" } },
            { new Person { Data = "Person 3" } }
        };

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            people.Insert(0,
                new Person
                {
                    Data = $"INSERTED {DateTime.Now.ToString("hh:mm:ss tt")}"
                });
            StateHasChanged();
        });
    }

    public void Dispose() => timer.Dispose();

    public class Person
    {
        public string Data { get; set; }
    }
}

Koleksiyonun içerikleri, people ekli, silinmiş veya yeniden sıralanmış girdilerle değişir. Rerendering, görünür davranış farklılıklarına yol açabilir. Koleksiyona bir kişi eklendiğinde people , o anda odaklanmış olan öğenin önceki öğesi odağı alır. Kullanıcının odağı kaybolur.

Bir koleksiyondaki öğelerin veya bileşenlerin eşleme işlemi, @key Directive özniteliğiyle denetlenebilir. Kullanımı, @key anahtarın değerine göre öğelerin veya bileşenlerin korunmasını garanti eder. DetailsYukarıdaki örnekteki bileşen öğede anahtarsa person , Blazor Details değiştirilmemiş rerendering bileşenlerini yoksayar.

PeopleBileşenini, @key koleksiyonuyla direktif özniteliğini kullanacak şekilde değiştirmek için people , <Details> öğesini şu şekilde güncelleştirin:

<Details @key="person" Data="@person.Data" />

peopleKoleksiyon değiştiğinde Details örnekler ve örnekler arasındaki ilişki person korunur. PersonKoleksiyonun başlangıcına eklendiğinde, Details ilgili konuma bir yeni örnek eklenir. Diğer örnekler değişmeden bırakılır. Bu nedenle, kullanıcılar koleksiyona eklendikçe kullanıcının odağı kaybedilmez.

Diğer koleksiyon güncelleştirmeleri, @key yönerge özniteliği kullanıldığında aynı davranışı sergiler:

Koleksiyondan bir örnek silinirse, yalnızca ilgili bileşen örneği kullanıcı arabiriminden kaldırılır. Diğer örnekler değişmeden bırakılır.
Koleksiyon girişleri yeniden sıralanmışsa, ilgili bileşen örnekleri kullanıcı arabiriminde korunur ve yeniden sıralanmış olur.

Önemli

Anahtarlar her kapsayıcı öğesi veya bileşeni için yereldir. Anahtarlar, belge genelinde genel olarak karşılaştırılamaz.

Ne zaman kullan `@key`

Genellikle, bir liste her işlenmiş olduğunda (örneğin, bir blokta) ve tanımlamak için @key uygun bir değer mevcut olduğunda kullanmak foreach @key mantıklıdır.

Aşağıdaki örneklerde de olduğu gibi, bir nesne değişmeden bir öğeyi veya bileşen alt @key ağacını korumak için de kullanabilirsiniz.

Örnek 1:

<li @key="person">
    <input value="@person.Data" />
</li>

Örnek 2:

<div @key="person">
    @* other HTML elements *@
</div>

Bir örnek person değişirse, öznitelik @key yönergesi şunları Blazor yapmak zorunda:

Veya ve <li> <div> altlarının tamamını atın.
Kullanıcı arabirimi içindeki alt ağacı yeni öğeler ve bileşenlerle yeniden oluşturma.

Bu, koleksiyon bir alt ağaç içinde değişiklik olduğunda hiçbir kullanıcı arabirimi durumunun korunmay güvence altına almak için yararlıdır.

Kapsamı: `@key`

Öznitelik @key yönergesi, üst öğesi içindeki kendi alt öğelerini kapsamına almaktadır.

Aşağıdaki örneği inceleyin. ve first second anahtarları, dış öğenin aynı kapsamında birbirlerine karşı <div> karşılaştırıldı:

<div>
    <div @key="first">...</div>
    <div @key="second">...</div>
</div>

<div>
    <div @key="first">...</div>
</div>
<div>
    <div @key="second">...</div>
</div>

Daha önce Details gösterilen bileşen için, aşağıdaki örnekler verileri person aynı kapsamda işler ve için tipik @key kullanım örneklerini @key gösterir:

<div>
    @foreach (var person in people)
    {
        <Details @key="person" Data="@person.Data" />
    }
</div>

@foreach (var person in people)
{
    <div @key="person">
        <Details Data="@person.Data" />
    </div>
}

<ol>
    @foreach (var person in people)
    {
        <li @key="person">
            <Details Data="@person.Data" />
        </li>
    }
</ol>

@foreach (var person in people)
{
    <div>
        <Details @key="person" Data="@person.Data" />
    </div>
}

<ol>
    @foreach (var person in people)
    {
        <li>
            <Details @key="person" Data="@person.Data" />
        </li>
    }
</ol>

Ne zaman kullanmamalı? `@key`

Için kullanmak üzere değerler `@key`

Genellikle için aşağıdaki değerlerden birini sağlamak @key mantıklıdır:

Nesne örneklerini modelleme. Örneğin, önceki Person örnekte örneği ( ) person kullanılmıştır. Bu, nesne başvurusu eşitliği temel alarak koruma sağlar.
Benzersiz tanımlayıcılar. Örneğin, benzersiz tanımlayıcılar , veya türünde birincil anahtar değerlerini int string temel alarak Guid olabilir.

Öznitelik uygulama

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

@page "/"
@attribute [Authorize]

Koşullu HTML öğesi öznitelikleri

HTML öğesi öznitelik özellikleri koşullu olarak .NET değerine göre ayarlanır. değer veya false null ise özelliği ayar değildir. Değer ise true özelliği ayarlanır.

Aşağıdaki örnekte, IsCompleted öğesinin <input> özelliğinin ayar olup checked olmadığını belirler.

Pages/ConditionalAttribute.razor:

@page "/conditional-attribute"

<label>
    <input type="checkbox" checked="@IsCompleted" />
    Is Completed?
</label>

<button @onclick="@(() => IsCompleted = !IsCompleted)">
    Change IsCompleted
</button>

@code {
    [Parameter]
    public bool IsCompleted { get; set; }
}

Daha fazla bilgi için bkz. RazorASP.NET Core için sözdizimi başvurusu.

Uyarı

gibi bazı HTML öznitelikleri , .NET türü olduğunda düzgün aria-pressed bool çalışmaz. Bu durumlarda, yerine string bir türü bool kullanın.

Ham HTML

Uyarı

Güvenilmeyen herhangi bir kaynaktan oluşturulmuş ham HTML işleme bir güvenlik riskidir ve her zaman kaçınılmalıdır.

Aşağıdaki örnek, bir MarkupString bileşenin işlenmiş çıkışına statik HTML içeriği bloğu eklemek için türünü kullanmayı gösterir.

Pages/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 Şablon

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

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

Aşağıdaki örnek, ve değerlerini belirtmeyi RenderFragment ve şablonları doğrudan bir RenderFragment<TValue> bileşende işlemeyi gösterir. İşleme parçaları, şablonlu bileşenlere bağımsız değişken olarak da geçirebilirsiniz.

Pages/RazorTemplate.razor:

@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ş çıktısı:

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

Statik varlıklar

Blazorstatik varlıklar için ASP.NET Core uygulama kuralına uygun olmalıdır. Statik varlıklar projenin ( ) klasöründe web root wwwroot veya klasörünün altındaki klasörlerde wwwroot bulunur.

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

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

Bileşenler tilde-slash() notalarını ~/ desteklemez.

Bir uygulamanın temel yolunu ayarlama hakkında bilgi için bkz. ASP.NET Core barındırma ve dağıtma Blazor .

Etiket Yardımcıları bileşenlerde desteklenmiyor

Tag Helpers bileşenlerde desteklenmiyor. içinde Etiket Yardımcısı gibi işlevsellik sağlamak için, Etiket Yardımcısı ile aynı işlevselliğe sahip bir bileşen Blazor oluşturun ve bunun yerine bileşenini kullanın.

Ölçeklenebilir Vektör Grafikleri (SVG) görüntüleri

HTML işleyene kadar Ölçeklenebilir Vektör Grafikleri Blazor (SVG) .svg görüntüleri ( ) dahil olmak üzere tarayıcı tarafından desteklenen görüntüler etiketiyle <img> de desteklenebilir:

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

Benzer şekilde, SVG görüntüleri bir stil sayfası dosyasının CSS kurallarında .css ( ):

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

Boşluk işleme davranışı

yönergesi @preservewhitespace değeriyle true kullanılmadıkça, aşağıdakiler için ek boşluk varsayılan olarak kaldırılır:

Bir öğenin içinde baştaki veya sonda.
Bir parametre içinde baştaki RenderFragment / RenderFragment<TValue> veya sonda yer alan (örneğin, başka bir bileşene geçirilen alt içerik).
veya gibi bir C# kod bloğu öncesinde veya ardından @if @foreach gelir.

Boşluk kaldırma, gibi bir CSS kuralı kullanırken işlenen çıkışı white-space: pre 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 @preservewhitespace true belirli bir bileşene uygulamak için dosyanın en üstüne ( ) Razor .razor yönergesi ekleyin.
Tercihi @preservewhitespace true bir alt dizine veya projenin tamamına uygulamak için bir _Imports.razor dosyanın içine yönergesini ekleyin.

Çoğu durumda, uygulamalar genellikle normal şekilde (ancak daha hızlı) davranmaya devam ettiği için herhangi bir eylem gerekmez. Boşluktan şeritleme belirli bir bileşen için işleme sorununa neden oluyorsa, bu @preservewhitespace true iyileştirmeyi devre dışı bırakmak için bu bileşeni kullanın.

Genel tür parametresi desteği

@typeparamyönergesi, oluşturulan bileşen sınıfı için genel bir tür parametresini belirtir:

@typeparam TItem

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

Bileşen sınıfları

Bileşenler, bileşen dosyalarında dosya uzantısıyla birlikte C# ve HTML Razor işaretlemesi birleşimi .razor kullanılarak uygulanır.

Razor Sözdizimi

Yönergeler:Bileşen işaretlemesini ayrıştırma veya işlevleri değiştirme. Örneğin, yönergesi bir yol şablonu ile yönlendirilebilir bir bileşen belirtir ve belirli bir URL'de tarayıcıda bir kullanıcının isteğiyle @page doğrudan ulaşabilirsiniz.
Yönerge öznitelikleri:Bileşen öğesinin ayrıştırma veya işlevlerini değiştirme. Örneğin, bir @bind öğenin yönerge <input> özniteliği, verileri öğenin değerine bağlar.

Adlar

Bir bileşenin adı büyük harfle başla olmalıdır:

ProductDetail.razor geçerli.
productDetail.razor geçersizdir.

Belgelerde Blazor kullanılan yaygın adlandırma kuralları Blazor şunlardır:

Bileşen dosya yolları, Pascal büyük/sn † kullanır ve bileşen kodu örneklerini göstermeden önce görünür. Yollar tipik klasör konumlarını gösteriyor. Örneğin, Pages/ProductDetail.razor bileşenin ProductDetail dosya adı olduğunu ve ProductDetail.razor uygulamanın klasöründe Pages olduğunu gösterir.
Yönlendirilebilir bileşenlerin bileşen dosya yolları, URL'leriyle, bir bileşenin yol şablonunda sözcükler arasında boşluklar için görünen kısa çizgilerle eşler. Örneğin, yol ProductDetail şablonu ( ) olan bir /product-detail @page "/product-detail" bileşen, göreli URL'sinde bir tarayıcıda istener. /product-detail

†Pascal büyük harfi (büyük ortası büyük harf), boşluk ve noktalama işareti olmayan ve her sözcüğün ilk harfi büyük olan ve ilk sözcük dahil olmak üzere bir adlandırma kuralıdır.

Yönlendirme

Pages/HelloWorld.razor:

@page "/hello-world"

<h1>Hello World!</h1>

Shared/NavMenu.razor:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="hello-world">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Hello World!
    </NavLink>
</li>

ve bileşenlerinin açıklamaları da dahil olmak üzere daha NavLink fazla NavMenu bilgi için bkz. ASP.NET Core Blazor Yönlendirme .

İşaretleme

Bileşen sınıfının üyeleri bir veya daha fazla blokta @code tanımlanır. Bloklarda @code bileşen durumu belirtilir ve C# ile işlenir:

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

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

Pages/Markup.razor:

@page "/markup"

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

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

Not

İç içe bileşenler

Bir başlığı Heading görüntülemek için diğer bileşenler tarafından kullanılmaktadır aşağıdaki bileşeni göz önünde bulundurabilirsiniz.

Shared/Heading.razor:

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

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

Bileşende aşağıdaki HeadingExample işaretleme, etiketin Heading göründüğü konumda önceki bileşeni <Heading /> işler.

Pages/HeadingExample.razor:

@page "/heading-example"

<Heading />

Bir bileşen, aynı ad alanı içindeki bir bileşen adıyla eşleşmez büyük harfli bir HTML öğesi içeriyorsa, öğenin beklenmeyen bir adı olduğunu belirten bir uyarı yayımlar. Bileşenin @using ad alanı için bir yönerge eklemek, bileşeni kullanılabilir yapar ve bu da uyarıyı çözer. Daha fazla bilgi için Ad Alanları bölümüne bakın.

Ad alanları

Bileşenin Counter ad alanı: BlazorSample.Pages .
Bileşenin tam tür adı: BlazorSample.Pages.Counter .

@using BlazorSample.Components

Not

@using dosyada yönergeleri _Imports.razor yalnızca dosyalara Razor uygulanır ( ), .razor C# dosyalarına değil ( .cs ).

<BlazorSample.Components.ProductDetail />

ile yazan bir bileşenin ad Razor alanı aşağıdakilere göre (öncelik sırasına göre) temel alınan bir ad alanıdır:

Dosyanın @namespace Razor işaretlemesinde yönergesi (örneğin, @namespace BlazorSample.CustomNamespace ).
Proje, RootNamespace proje dosyasındadır (örneğin, <RootNamespace>BlazorSample</RootNamespace> ).
Proje dosyasının dosya adına () alınan proje adı ve proje .csproj kökünden bileşene giden yol. Örneğin, çerçeve proje ad {PROJECT ROOT}/Pages/Index.razor alanı () ile BlazorSample BlazorSample.csproj bileşenin ad alanına BlazorSample.Pages Index çözümler. {PROJECT ROOT} , projenin kök yoludur. Bileşenler C# adı bağlama kurallarını takip eder. Bu Index örnekteki bileşen için kapsamda yer alan bileşenler tüm bileşenlerdir:
- Aynı Pages klasörde.
- Projenin kökünde bulunan ve açıkça farklı bir ad alanı belirtmeyen bileşenler.

Aşağıdakiler desteklenmiyor:

global::Nitelik.
Diğer ad deyimleriyle using bileşenleri içeri aktarma. Örneğin, @using Foo = Bar desteklenmiyor.
Kısmen uygun adlar. Örneğin, bir bileşene ek olarak @using BlazorSample uygulamanın NavMenu klasöründeki ( ) bileşenine ile Shared Shared/NavMenu.razor <Shared.NavMenu></Shared.NavMenu> başvurabilirsiniz.

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

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

Pages/Counter.razor:

@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 bileşen, kısmi sınıfa sahip bir arka kod dosyası kullanarak Counter Razor C# kodundan HTML ve işaretlemeyi böler:

Pages/CounterPartialClass.razor:

@page "/counter-partial-class"

<h1>Counter</h1>

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

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

Pages/CounterPartialClass.razor.cs:

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

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

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

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 klasörüne karşılık gelen ad alanını Shared da içerir:

using BlazorSample;
using BlazorSample.Shared;

Temel sınıf belirtme

Pages/BlazorRocks.razor:

@page "/blazor-rocks"
@inherits BlazorRocksBase

<h1>@BlazorRocksText</h1>

BlazorRocksBase.cs:

using Microsoft.AspNetCore.Components;

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

Bileşen parametreleri

PanelBody.cs:

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

Shared/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 PanelBody()
        {
            Text = "Set by child.",
            Style = "normal"
        };
}

Uyarı

İlk ParameterChild bileşen parametre bağımsız değişkenleri belirtmeden işlenir.
İkinci bileşen, özelliklerinin değerlerini ayarlamak için açık bir C# ifadesi kullanan bileşenden ve ParameterChild Title değerlerini Body ParameterParent PanelBody alır.

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

Not

Netlik sağlamak için işlenmiş CSS stili sınıfları aşağıdaki işlenmiş 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 C# alanını, özelliğini veya yönteminin bir yönteminin değerini, 'nin ayrılmış sembolünü kullanarak bir bileşen parametresine HTML Razor öznitelik değeri olarak @ attayın. Aşağıdaki ParameterParent2 bileşen, önceki bileşenin dört örneğini görüntüler ParameterChild ve parametre değerlerini olarak Title ayarlar:

Alanın title değeri.
GetTitleC# yönteminin sonucu.
ile uzun biçimde geçerli yerel ToLongDateString tarih, örtülü bir C# ifadesi kullanır.
panelDataNesnenin Title özelliği.

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

Bir bileşen parametresine bir C# üyesi atarken, üyeye sembol ön eki ve hiçbir zaman parametrenin @ HTML özniteliğine ön ek oluşturma.

Doğru:

<ParameterChild Title="@title" />

Yanlış:

<ParameterChild @Title="title" />

Sayfalarda Razor ( ) farklı .cshtml Blazor olarak, bir bileşeni işlerken bir ifadede Razor zaman uyumsuz çalışma gerçekleştiramaz. Bunun nedeni etkileşimli Blazor UI'leri işleme için tasarlanmış durumdadır. Etkileşimli bir kullanıcı arabiriminde ekran her zaman bir şey görüntülemeli, bu nedenle işleme akışını engellemek mantıklı değil. 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şlendi. Aşağıdaki Razor söz dizimi desteklenmiyor:

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

Önceki örnekte yer alan kod, uygulama derlenmiş olduğunda bir derleyici hatası üretir:

'await' işleci yalnızca zaman uyumsuz bir yöntem içinde kullanılabilir. Bu yöntemi 'async' değiştiricisi ile işaretlemeyi ve dönüş türünü 'Görev' olarak değiştirmeyi göz önünde bulundurarak.

Önceki örnekte parametre için zaman uyumsuz olarak bir değer elde etmek için, aşağıdaki örnekte de gösterdiği gibi bileşen yaşam Title döngüsü olayı kullanabilir: OnInitializedAsync

<ParameterChild Title="@title" />

@code {
    private string title;

    protected override async Task OnInitializedAsync()
    {
        title = await ...;
    }
}

Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Bir parametreye atama için bir ifade sonucuyla metinleri bir Razor şekilde birlendirmek için açık bir ifadenin kullanımı desteklenmiyor. Aşağıdaki örnek , " " metnini bir nesnenin özellik Set by değeriyle birletir. Bu söz dizimi bir sayfada ( ) desteklese de, bir bileşende alt Razor .cshtml parametreye atama Title için geçerli değildir. Aşağıdaki Razor söz dizimi desteklenmiyor:

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

Önceki örnekte yer alan kod, uygulama derlenmiş olduğunda bir derleyici hatası üretir:

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

Bir oluşan değerin ataması desteklemek için bir yöntem, alan veya özellik kullanın. Aşağıdaki örnek, C# yönteminde " " ve nesnesinin Set by özellik değerinin bir örneğini GetTitle gerçekleştirir:

Pages/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. RazorASP.NET Core için sözdizimi başvurusu.

Uyarı

Bileşen parametreleri otomatik özellikler olarak bildir olmalı, yani kendi veya erişimcilerinde özel mantık get set içermeleri gerekir. Örneğin, aşağıdaki StartData özellik bir otomatik özelliktir:

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

Bileşen parametreleri yalnızca bir üst bileşenin bir alt bileşene bilgi akışı için bir kanal olarak kullanılmak üzere tasarlanmış olduğundan, veya erişimcisinde özel get set mantık uygulama. Bir alt bileşen özelliğinin erişimcisi, üst bileşenin yeniden işlemeye neden olan mantığı set içeriyorsa, sonsuz bir işleme döngüsü sonucu verir.

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ülmüş verileri sağlamak için farklı bir özellik veya yöntem oluşturun.

Alınan OnParametersSetAsync bir parametreyi her yeni veri alınarak dönüştürmek için geçersiz kılın.

İlk değer atamaları'nın otomatik bileşen işlemesi ile etkilenemey olduğundan, bir bileşen parametresine Blazor başlangıç değeri yazmak desteklenebildi. ile geçerli yerel aşağıdaki DateTime ataması, DateTime.Now bir StartData bileşende geçerli söz dizimidir:

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

İlk atamadan DateTime.Now sonra, geliştirici kodunda için bir StartData değer atamayın. Daha fazla bilgi için bu makalenin Üzerine yazılan parametreler bölümüne bakın.

Yol parametreleri

Bileşenler yönergenin yol şablonunda yol parametrelerini @page belirtebilirsiniz. Blazor Yönlendirici, ilgili bileşen parametrelerini doldurmak için yol parametrelerini kullanır.

Pages/RouteParameter.razor:

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

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

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

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

İsteğe bağlı yol parametreleri destek uygulanmaz, bu @page nedenle önceki örnekte iki yönerge uygulanır. İlk @page yönerge, bileşende rota parametresi olmadan gezinmeye izin verilmiştir. İkinci @page yönerge yol {text} parametresini alır ve değeri özelliğine Text atar.

Birden çok klasör sınırı boyunca yolları yakalayan tüm yolları yakalama yol parametreleri ( {*pageRoute} ) hakkında bilgi için bkz. ASP.NET Core Blazor Yönlendirme .

Üzerine yazılan parametreler

Çerçeve Blazor genellikle güvenli bir üst-alt parametre ataması sağlar:

Parametrelerin üzerine beklenmedik bir şekilde yazılmaz.
Yan etkiler en aza indirgendi. Örneğin, sonsuz işleme döngüleri oluştursalar da ek işlemelerden kaçınılması gerekir.

Bir alt bileşen, üst bileşen yeniden incelenirken mevcut değerlerin üzerine yazarak yeni parametre değerleri alır. Bir alt bileşende parametre değerlerinin yanlışlıkla üzerine yazma, genellikle bir veya daha fazla veriye bağlı parametreyle bileşen geliştirirken gerçekleşir ve geliştirici doğrudan alt bileşende bir parametreye yazar:

Alt bileşen, üst bileşenden bir veya daha fazla parametre değeriyle işlenir.
Alt değer doğrudan bir parametrenin değerine yazar.
Üst bileşen, alt öğe parametresinin değerini yeniden inceler ve üzerine yazarak.

Parametre değerlerinin üzerine yazma potansiyeli, alt bileşenin özellik set erişimcilerine de genişletildi.

Önemli

Genel kılavuzumuz, bileşen ilk kez iş edildikten sonra doğrudan kendi parametrelerine yazacak bileşenler oluşturmamamızı sağlar.

Aşağıdaki hatalı bileşeni göz Expander önünde:

Alt içeriği işler.
Bir bileşen parametresiyle alt içeriği gösteren geçişler ( Expanded ).
Bileşen, üzerine yazılan parametrelerle ilgili sorunu gösteren ve Expanded kaçınılması gereken parametresine doğrudan yazar.

Aşağıdaki bileşen Expander bu senaryo için yanlış yaklaşımı gösterdiğinde, doğru yaklaşımı göstermek için değiştirilmiş bir bileşen Expander gösterilir. Aşağıdaki örnekler, açıklanan davranışların deneyimi için yerel bir örnek uygulamaya yer verilmiştir.

Shared/Expander.razor:

<div @onclick="Toggle" class="card bg-light mb-3" style="width:30rem">
    <div class="card-body">
        <h2 class="card-title">Toggle (<code>Expanded</code> = @Expanded)</h2>

        @if (Expanded)
        {
            <p class="card-text">@ChildContent</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public bool Expanded { get; set; }

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

    private void Toggle()
    {
        Expanded = !Expanded;
    }
}

Bileşeni Expander çağıran aşağıdaki ExpanderExample üst bileşene StateHasChanged eklenir:

Geliştirici kodunda çağrısı yapmak, bir bileşene durumunun değiştiğini gösterir ve genellikle kullanıcı arabirimini güncelleştirmek için bileşen yeniden StateHasChanged işleyicisini tetikler. StateHasChanged , ve içinde daha sonra daha ayrıntılı olarak RazorASP.NET Core bileşen yaşam döngüsü BlazorASP.NET Core bileşen işleme elelanmaktadır.
Düğmenin yönerge @onclick özniteliği, düğmenin olayına bir olay işleyicisi onclick iliştirer. Olay işleme daha sonra içinde daha ayrıntılı olarak ele ASP.NET Core Blazor olay işleme alındı.

Pages/ExpanderExample.razor:

@page "/expander-example"

<Expander Expanded="true">
    Expander 1 content
</Expander>

<Expander Expanded="true" />

<button @onclick="StateHasChanged">
    Call StateHasChanged
</button>

Başlangıçta, özellikleri Expander değiştiriken bileşenler Expanded bağımsız olarak davranır. Alt bileşenler, durumları beklendiği gibi korunur. Üst StateHasChanged öğede çağrıldıklarında, Expanded ilk alt bileşenin parametresi ilk değerine () geri sıfırlanır. true İkinci Expander bileşende Expanded hiçbir alt içerik işlanmaz olduğundan ikinci bileşenin değeri sıfırlanmaz.

Önceki senaryoda durumu korumak için bileşeninde iki durumlu durumunu Expander korumak üzere özel bir alan kullanın.

Aşağıdaki düzeltilmiş Expander bileşen:

Üst Expanded öğeden bileşen parametre değerini kabul eder.
Bileşenin parametre değerini olayında özel bir alana ( ) expanded OnInitialized atar.
Kendi iç geçiş durumunu korumak için özel alanını kullanır, bu da doğrudan bir parametreye yazmayı nasıl önleyeceğinizi gösterir.

Not

Bu bölümdeki öneri, bileşen parametresi erişimcilerinde benzer mantığa genişleterek set benzer, istenmeyen yan etkilere neden olabilir.

Shared/Expander.razor:

<div @onclick="Toggle" class="card bg-light mb-3" style="width:30rem">
    <div class="card-body">
        <h2 class="card-title">Toggle (<code>expanded</code> = @expanded)</h2>

        @if (expanded)
        {
            <p class="card-text">@ChildContent</p>
        }
    </div>
</div>

@code {
    private bool expanded;

    [Parameter]
    public bool Expanded { get; set; }

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

    protected override void OnInitialized()
    {
        expanded = Expanded;
    }

    private void Toggle()
    {
        expanded = !expanded;
    }
}

Daha fazla bilgi için bkz. Blazor Iki yönlü bağlama hatası (DotNet/aspnetcore #24599).

Alt içerik

Bileşenler, başka bir bileşenin içeriğini ayarlayabilir. Atama bileşeni, alt bileşenin açılış ve kapanış etiketleri arasında içerik sağlar.

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

Önemli

İçeriği alan özelliğin RenderFragment ChildContent kural tarafından adlandırılması gerekir.

Aşağıdaki RenderFragmentParent Bileşen, RenderFragmentChild içeriği alt bileşenin açılış ve kapanış etiketlerinin içine yerleştirerek işleme için içerik sağlar.

Pages/RenderFragmentParent.razor:

@page "/render-fragment-parent"

<h1>Render child content</h1>

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

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

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

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

Alternatif olarak, foreach döngüsü yerine bir döngüsü kullanın Enumerable.Range for . Aşağıdaki örnek, önceki RenderFragmentParent 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>
}

RenderFragmentBileşeninin bileşen Kullanıcı arabirimi için şablon olarak nasıl kullanılabileceği hakkında bilgi için aşağıdaki makalelere bakın:

Öznitelik döndürme ve rastgele parametreler

Aşağıdaki Splat bileşende:

İlk <input> öğesi ( id="useIndividualParams" ) bağımsız bileşen parametrelerini kullanır.
İkinci <input> öğe ( id="useAttributesDict" ) öznitelik splatesini kullanır.

Pages/Splat.razor:

@page "/splat"

<input id="useIndividualParams"
       maxlength="@maxlength"
       placeholder="@placeholder"
       required="@required"
       size="@size" />

<input id="useAttributesDict"
       @attributes="InputAttributes" />

@code {
    private string maxlength = "10";
    private string placeholder = "Input placeholder text";
    private string required = "required";
    private string size = "50";

    private Dictionary<string, object> InputAttributes { get; set; } =
        new Dictionary<string, object>()
        {
            { "maxlength", "10" },
            { "placeholder", "Input placeholder text" },
            { "required", "required" },
            { "size", "50" }
        };
}

<input>Web sayfasındaki işlenmiş öğeler aynıdır:

<input id="useIndividualParams"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

<input id="useAttributesDict"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

Rastgele öznitelikleri kabul etmek için, özelliği olarak ayarlanmış bir bileşen parametresi tanımlayın CaptureUnmatchedValues true :

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> InputAttributes { get; set; }
}

Shared/AttributeOrderChild1.razor:

<div @attributes="AdditionalAttributes" extra="5" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object> AdditionalAttributes { get; set; }
}

Pages/AttributeOrderParent1.razor:

@page "/attribute-order-parent-1"

<AttributeOrderChild1 extra="10" />

<div extra="5" />

Aşağıdaki örnekte, sırası extra ve @attributes alt bileşenin sırasıyla tersine çevrilir <div> :

Shared/AttributeOrderChild2.razor:

<div extra="5" @attributes="AdditionalAttributes" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object> AdditionalAttributes { get; set; }
}

Pages/AttributeOrderParent2.razor:

@page "/attribute-order-parent-2"

<AttributeOrderChild2 extra="10" />

<div>Üst bileşenin işlenmiş Web sayfasındaki extra="10" ek öznitelik ile geçirildiğinde şunları içerir:

<div extra="10" />

Bileşenlere başvuruları yakala

Bileşen başvuruları, komutları vermek için bir bileşen örneğine başvurmak için bir yol sağlar. Bir bileşen başvurusunu yakalamak için:

@refAlt bileşene bir öznitelik ekleyin.
Alt bileşenle aynı türde bir alan tanımlayın.

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

ReferenceChildÇağrıldığında bir iletiyi günlüğe kaydeden aşağıdaki bileşeni göz önünde bulundurun ChildMethod .

Shared/ReferenceChild.razor:

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

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

Bileşenin işlemesini tamamladıktan sonra bileşen başvurularını işlemek için, OnAfterRender veya OnAfterRenderAsync yöntemlerinikullanın.

Aşağıdaki lambda yaklaşımı önceki ReferenceChild bileşeni kullanır.

Pages/ReferenceParent1.razor:

@page "/reference-parent-1"

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

<ReferenceChild @ref="childComponent" />

@code {
    private ReferenceChild childComponent;
}

Aşağıdaki temsilci yaklaşımı önceki ReferenceChild bileşeni kullanır.

Pages/ReferenceParent2.razor:

@page "/reference-parent-2"

<button @onclick="callChildMethod">
    Call <code>ReferenceChild.ChildMethod</code> with an argument of 5
</button>

<ReferenceChild @ref="childComponent" />

@code {
    private ReferenceChild childComponent;
    private Action callChildMethod;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            callChildMethod = CallChildMethod;
        }
    }

    private void CallChildMethod()
    {
        childComponent.ChildMethod(5);
    }
}

Bir döngüdeki bileşenlere başvurmak için bir koleksiyon kullanın. Aşağıdaki örnekte:

Bileşenler bir öğesine eklenir List<T> .
İçindeki bileşen dizini tarafından ilgili bileşeni tetikleyen her bir bileşen için bir düğme oluşturulur ChildMethod List<T> .

Pages/ReferenceParent3.razor önceki bileşeni kullanma ReferenceChild :

@page "/reference-parent-3"

<ul>
    @for (int i = 0; i < 5; i++)
    {
        var index = i;
        var v = r.Next(1000);

        <li>
            <ReferenceChild @ref="childComponent" />
            <button @onclick="@(() => callChildMethod(index, v))">
                Component index @index: Call <code>ReferenceChild.ChildMethod(@v)</code>
            </button>
        </li>
    }
</ul>

@code {
    private Random r = new Random();
    private List<ReferenceChild> components = new List<ReferenceChild>();
    private Action<int, int> callChildMethod;

    private ReferenceChild childComponent
    {
        set => components.Add(value);
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            callChildMethod = CallChildMethod;
        }
    }

    private void CallChildMethod(int index, int value)
    {
        components.ElementAt(index).ChildMethod(value);
    }
}

Önemli

Eşitleme bağlamı

İş parçacığı engelleme çağrılarını önleyin

Not

Durumu güncelleştirmek için bileşen yöntemlerini dışarıdan çağır

Bir bileşenin bir süreölçer veya başka bir bildirim gibi dış bir olaya göre güncellenmesi gerekir, InvokeAsync kod yürütmeyi eşitleme bağlamına bağlayan yöntemi kullanın Blazor . Örneğin, güncelleştirilmiş durum hakkında bir dinleme bileşenine bildirimde bulunan aşağıdaki bildirim hizmetini göz önünde bulundurun. UpdateYöntemi, uygulamanın herhangi bir yerinden çağrılabilir.

TimerService.cs:

using System;
using System.Timers;
using Microsoft.Extensions.Logging;

public class TimerService : IDisposable
{
    private int elapsedCount;
    private readonly ILogger<TimerService> logger;
    private readonly NotifierService notifier;
    private Timer timer;

    public TimerService(NotifierService notifier, ILogger<TimerService> logger)
    {
        this.notifier = notifier;
        this.logger = logger;
    }

    public void Start()
    {
        if (timer is null)
        {
            timer = new();
            timer.AutoReset = true;
            timer.Interval = 10000;
            timer.Elapsed += HandleTimer;
            timer.Enabled = true;
            logger.LogInformation("Started");
        }
    }

    private async void HandleTimer(object source, ElapsedEventArgs e)
    {
        elapsedCount += 1;
        await notifier.Update("elapsedCount", elapsedCount);
        logger.LogInformation($"elapsedCount: {elapsedCount}");
    }

    public void Dispose()
    {
        timer?.Dispose();
    }
}

NotifierService.cs:

using System;
using System.Threading.Tasks;

public class NotifierService
{
    public async Task Update(string key, int value)
    {
        if (Notify != null)
        {
            await Notify.Invoke(key, value);
        }
    }

    public event Func<string, int, Task> Notify;
}

Hizmetleri kaydedin:

Bir Blazor WebAssembly uygulamada, Hizmetleri içine tekton olarak Kaydet Program.cs :

builder.Services.AddSingleton<NotifierService>();
builder.Services.AddSingleton<TimerService>();

Bir Blazor Server uygulamada, Hizmetleri kapsamına alındı olarak Kaydet Startup.ConfigureServices :
```
services.AddScoped<NotifierService>();
services.AddScoped<TimerService>();
```

NotifierServiceBir bileşeni güncelleştirmek için öğesini kullanın.

Pages/ReceiveNotifications.razor:

@page "/receive-notifications"
@implements IDisposable
@inject NotifierService Notifier
@inject TimerService Timer

<h1>Receive Notifications</h1>

<h2>Timer Service</h2>

<button @onclick="StartTimer">Start Timer</button>

<h2>Notifications</h2>

<p>
    Status:
    @if (lastNotification.key is not null)
    {
        <span>@lastNotification.key = @lastNotification.value</span>
    }
    else
    {
        <span>Awaiting first notification</span>
    }
</p>

@code {
    private (string key, int value) lastNotification;

    protected override void OnInitialized()
    {
        Notifier.Notify += OnNotify;
    }

    public async Task OnNotify(string key, int value)
    {
        await InvokeAsync(() =>
        {
            lastNotification = (key, value);
            StateHasChanged();
        });
    }

    private void StartTimer()
    {
        Timer.Start();
    }

    public void Dispose()
    {
        Notifier.Notify -= OnNotify;
    }
}

Yukarıdaki örnekte:

NotifierService bileşen OnNotify metodunu Blazor eşitleme bağlamı dışında çağırır. InvokeAsync doğru bağlama geçmek ve bir işlemeyi kuyruğa almak için kullanılır. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.
Bileşeni uygular IDisposable . OnNotifyTemsilci, Dispose bileşen atıldığı zaman Framework tarafından çağrılan yönteminde abone olunmaktadır. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

`@key`Öğelerin ve bileşenlerin korunmasını denetlemek için kullanın

Aşağıdakileri ve bileşenleri göz önünde bulundurun Details People :

DetailsBileşen, Data People bir öğesinde görünen üst bileşenden veri () alır <input> . Belirli bir görüntülenmiş <input> öğe, öğeden birini seçerken sayfanın odağını kullanıcıdan alabilir <input> .
PeopleBileşen, bileşeni kullanılarak görüntülenmek üzere kişi nesnelerinin bir listesini oluşturur Details . Her üç saniyede bir koleksiyona yeni bir kişi eklenir.

Bu gösterim şunları yapmanıza olanak sağlar:

<input>Birden çok işlenmiş bileşenden birini seçin Details .
Kişiler koleksiyonu otomatik olarak büyüdükçe sayfanın odağının davranışını inceleyin.

Shared/Details.razor:

<input value="@Data" />

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

Pages/People.razor:

@page "/people"
@using System.Timers
@implements IDisposable

@foreach (var person in people)
{
    <Details Data="@person.Data" />
}

@code {
    private Timer timer = new Timer(3000);

    public List<Person> people =
        new List<Person>()
        {
            { new Person { Data = "Person 1" } },
            { new Person { Data = "Person 2" } },
            { new Person { Data = "Person 3" } }
        };

    protected override void OnInitialized()
    {
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback()
    {
        _ = InvokeAsync(() =>
        {
            people.Insert(0,
                new Person
                {
                    Data = $"INSERTED {DateTime.Now.ToString("hh:mm:ss tt")}"
                });
            StateHasChanged();
        });
    }

    public void Dispose() => timer.Dispose();

    public class Person
    {
        public string Data { get; set; }
    }
}

PeopleBileşenini, @key koleksiyonuyla direktif özniteliğini kullanacak şekilde değiştirmek için people , <Details> öğesini şu şekilde güncelleştirin:

<Details @key="person" Data="@person.Data" />

Diğer koleksiyon güncelleştirmeleri, @key yönerge özniteliği kullanıldığında aynı davranışı sergiler:

Koleksiyondan bir örnek silinirse, yalnızca ilgili bileşen örneği kullanıcı arabiriminden kaldırılır. Diğer örnekler değişmeden bırakılır.
Koleksiyon girdileri yeniden Sıralansa, karşılık gelen bileşen örnekleri Kullanıcı arabiriminde korunur ve yeniden sıralanır.

Önemli

Anahtarlar her kapsayıcı öğesi veya bileşeni için yereldir. Anahtarlar belge genelinde küresel olarak karşılaştırılmaz.

Ne zaman kullanılır? `@key`

Genellikle, @key bir liste işlendiğinde (örneğin, bir foreach blokta) ve tanımlamak için uygun bir değer varsa, bu işlem kullanım açısından mantıklı olur @key .

Ayrıca @key , aşağıdaki örneklerde gösterildiği gibi bir nesne değişmezse bir öğeyi veya bileşen alt ağacını korumak için öğesini de kullanabilirsiniz.

Örnek 1:

<li @key="person">
    <input value="@person.Data" />
</li>

Örnek 2:

<div @key="person">
    @* other HTML elements *@
</div>

Bir person örnek değişirse, @key öznitelik yönergesi Blazor öğesine zorlar:

Tüm ve alt <li> <div> öğelerini atın.
Yeni öğe ve bileşenlerle Kullanıcı arabirimi içinde alt ağacı yeniden oluşturun.

Bu, koleksiyon alt ağaç içinde değiştiğinde hiçbir Kullanıcı arabirimi durumunun korunmayacağını güvence altına almak için yararlıdır.

Kapsamı `@key`

@keyÖznitelik yönergesi üst öğesi içindeki kendi eşdüzey öğelerinin kapsamına alınır.

Aşağıdaki örneği inceleyin. firstVe second anahtarları, dış öğe kapsamındaki aynı kapsamda birbirleriyle karşılaştırılır <div> :

<div>
    <div @key="first">...</div>
    <div @key="second">...</div>
</div>

Aşağıdaki örnek, birbirleriyle first second ilgisi olmayan ve birbirini etkilemeden kendi kapsamlarında ve anahtarları gösterir. Her @key kapsam, <div> üst öğeler üzerinde değil, yalnızca üst öğesi için geçerlidir <div> :

<div>
    <div @key="first">...</div>
</div>
<div>
    <div @key="second">...</div>
</div>

DetailsDaha önce gösterilen bileşen için aşağıdaki örnekler person aynı kapsamdaki verileri işler @key ve için tipik kullanım durumlarını gösterir @key :

<div>
    @foreach (var person in people)
    {
        <Details @key="person" Data="@person.Data" />
    }
</div>

@foreach (var person in people)
{
    <div @key="person">
        <Details Data="@person.Data" />
    </div>
}

<ol>
    @foreach (var person in people)
    {
        <li @key="person">
            <Details Data="@person.Data" />
        </li>
    }
</ol>

Aşağıdaki örnekler yalnızca @key <div> <li> her bir bileşen örneğini çevreleyen veya öğesinin kapsamına sahiptir Details . Bu nedenle, person koleksiyonun her üyesine ilişkin veriler people , person işlenmiş bileşenler genelindeki her bir örnekte anahtarlanmıştır Details . Kullanırken aşağıdaki desenlerden kaçının @key :

@foreach (var person in people)
{
    <div>
        <Details @key="person" Data="@person.Data" />
    </div>
}

<ol>
    @foreach (var person in people)
    {
        <li>
            <Details @key="person" Data="@person.Data" />
        </li>
    }
</ol>

Ne zaman kullanılmaz `@key`

İle işleme yaparken bir performans maliyeti vardır @key . Performans maliyeti büyük değildir, ancak yalnızca @key öğenin veya bileşenin korunması, uygulamanın avantajını korur.

@keyKullanılmasa bile, Blazor alt öğe ve bileşen örneklerini mümkün olduğunca korur. Kullanmanın tek avantajı @key model örneklerinin eşleme seçmek yerine, korunan bileşen örneklerine nasıl eşlendiğine ilişkin denetimdir Blazor .

İçin kullanılacak değerler `@key`

Genellikle, için aşağıdaki değerlerden birini sağlamak mantıklı olur @key :

Model nesne örnekleri. Örneğin, Person örnek ( person ) önceki örnekte kullanılmıştır. Bu, nesne başvurusu eşitliğine göre koruma sağlar.
Benzersiz tanımlayıcılar. Örneğin, benzersiz tanımlayıcılar, veya türündeki birincil anahtar değerlerini temel alabilir int string Guid .

Bu değerlerin çakışmayın için kullanıldığından emin olun @key . Aynı üst öğe içinde çakışan değerler algılanırsa, Blazor eski öğeleri veya bileşenleri yeni öğe veya bileşenlere kesin bir şekilde eşlemediğinden bir özel durum oluşturur. Yalnızca nesne örnekleri veya birincil anahtar değerleri gibi farklı değerleri kullanın.

Öznitelik uygulama

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

@page "/"
@attribute [Authorize]

Koşullu HTML öğesi öznitelikleri

HTML öğesi öznitelik özellikleri, .NET değerine göre koşullu olarak ayarlanır. Değer false veya ise null , özelliği ayarlı değildir. Değer ise true , özelliği ayarlanır.

Aşağıdaki örnekte, IsCompleted <input> öğesinin özelliğinin ayarlanmış olup olmadığını belirler checked .

Pages/ConditionalAttribute.razor:

@page "/conditional-attribute"

<label>
    <input type="checkbox" checked="@IsCompleted" />
    Is Completed?
</label>

<button @onclick="@(() => IsCompleted = !IsCompleted)">
    Change IsCompleted
</button>

@code {
    [Parameter]
    public bool IsCompleted { get; set; }
}

Daha fazla bilgi için bkz. RazorASP.NET Core için sözdizimi başvurusu.

Uyarı

aria-pressed.NET türü bir olduğunda, gibi bazı HTML öznitelikleri düzgün şekilde çalışmaz bool . Bu durumlarda, string yerine bir tür kullanın bool .

Ham HTML

Dizeler normalde DOM metin düğümleri kullanılarak işlenir. Bu, içerdikleri tüm biçimlendirmenin yok sayıldığı ve değişmez değer olarak kabul edildiği anlamına gelir. Ham HTML işlemek için, HTML içeriğini bir değerde sarın MarkupString . Değer HTML veya SVG olarak ayrıştırılır ve DOM 'a eklenir.

Uyarı

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

Aşağıdaki örnek, MarkupString bir bileşenin işlenmiş çıktısına STATIK HTML içeriği bloğunu eklemek için türünün kullanımını gösterir.

Pages/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 şablondan

Oluşturma parçaları, Razor BIR UI parçacığı tanımlamak için şablon sözdizimi kullanılarak tanımlanabilir. Razor Şablonlar aşağıdaki biçimi kullanır:

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

Pages/RazorTemplate.razor:

@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ş çıktısı:

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

Statik varlıklar

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

Bileşenler, tilde işareti gösterimini ( ~/ ) desteklemez.

Uygulamanın temel yolunu ayarlama hakkında daha fazla bilgi için bkz ASP.NET Core barındırma ve dağıtma Blazor ..

Etiket Yardımcıları bileşenlerde desteklenmiyor

Ölçeklenebilir vektör grafik (SVG) görüntüleri

İşleme Blazor HTML, ölçeklenebilir vektör GRAFIK (SVG) görüntüleri .svg de dahil olmak üzere tarayıcıda desteklenen görüntüler () etiketi aracılığıyla desteklenir <img> :

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

Benzer şekilde, SVG görüntüleri bir stil sayfası dosyasının () CSS kurallarında desteklenir .css :

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

Boşluk işleme davranışı

Boşluk, bileşenin kaynak biçimlendirmesinde tutulur. Görsel efekt olmasa bile yalnızca boşluk metin, tarayıcının DOM öğesinde işlenir.

Aşağıdaki bileşen işaretlemesini göz önünde bulundurun:

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

Yukarıdaki örnek aşağıdaki gereksiz boşluğu işler:

@foreachKod bloğunun dışında.
Öğesinin etrafında <li> .
Çıkışın @item.Text çevresinde.

100 öğenin listesi, 400'den fazla boşluk alanıyla sonuç verir. Ek boşluklardan hiçbiri işlenen çıkışı görsel olarak etkilemez.

Bileşenler için statik HTML işleme sırasında etiketin içindeki boşluk korunmaz. Örneğin, aşağıdaki etiketin işlenmiş çıktısını <img> bir bileşen dosyasında ( ) Razor .razor görüntüebilirsiniz:

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

Boşluk, önceki işaretlemeden korunmaz:

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

Genel tür parametresi desteği

@typeparamyönergesi, oluşturulan bileşen sınıfı için genel bir tür parametresi belirtir:

@typeparam TItem

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

RazorASP.NET Core Bileşen

Lütfen deneyiminizi değerlendirin

Bileşen sınıfları

Razor Sözdizimi

Adlar

Yönlendirme

İşaretleme

İç içe bileşenler

Ad alanları

Kısmi sınıf desteği

Temel sınıf belirtin

Bileşen parametreleri

Rota parametreleri

Üzerine yazılan parametreler

Alt içerik

Öznitelik döndürme ve rastgele parametreler

Bileşenlere başvuruları yakala

Eşitleme bağlamı

İş parçacığı engelleme çağrılarını önleyin

Durumu güncelleştirmek için bileşen yöntemlerini dışarıdan çağır

Öğelerin @key ve bileşenlerin korunmasını kontrol etmek için kullanın

Ne zaman kullan @key

Kapsamı: @key

Ne zaman kullanmamalı? @key

Için kullanmak üzere değerler @key

Öznitelik uygulama

Koşullu HTML öğesi öznitelikleri

Ham HTML

Razor Şablon

Statik varlıklar

Etiket Yardımcıları bileşenlerde desteklenmiyor

Ölçeklenebilir vektör grafik (SVG) görüntüleri

Boşluk işleme davranışı

Genel tür parametresi desteği

RazorJavaScript 'ten bileşenleri işleme

Blazor özel öğeler

Angular ve React bileşenleri oluşturma

Bileşen sınıfları

Razor sözdizimi

Adlar

Yönlendirme

İşaretleme

İç içe bileşenler

Ad alanları

Kısmi sınıf desteği

Temel sınıf belirtme

Bileşen parametreleri

Rota parametreleri

Üzerine yazılan parametreler

Alt içerik

Öznitelik döndürme ve rastgele parametreler

Bileşenlere başvuruları yakala

Eşitleme bağlamı

İş parçacığı engelleme çağrılarını önleyin

Durumu güncelleştirmek için bileşen yöntemlerini dışarıdan çağır

@keyÖğelerin ve bileşenlerin korunmasını denetlemek için kullanın

Ne zaman kullan @key

Kapsamı: @key

Ne zaman kullanmamalı? @key

Için kullanmak üzere değerler @key

Öznitelik uygulama

Koşullu HTML öğesi öznitelikleri

Ham HTML

Razor Şablon

Statik varlıklar

Etiket Yardımcıları bileşenlerde desteklenmiyor

Ölçeklenebilir Vektör Grafikleri (SVG) görüntüleri

Boşluk işleme davranışı

Genel tür parametresi desteği

Bileşen sınıfları

Razor Sözdizimi

Adlar

Yönlendirme

İşaretleme

İç içe bileşenler

Ad alanları

Kısmi sınıf desteği

Temel sınıf belirtme

Bileşen parametreleri

Yol parametreleri

Öğelerin `@key` ve bileşenlerin korunmasını kontrol etmek için kullanın

Ne zaman kullan `@key`

Kapsamı: `@key`

Ne zaman kullanmamalı? `@key`

Için kullanmak üzere değerler `@key`

`@key`Öğelerin ve bileşenlerin korunmasını denetlemek için kullanın

Ne zaman kullan `@key`

Kapsamı: `@key`

Ne zaman kullanmamalı? `@key`

Için kullanmak üzere değerler `@key`

`@key`Öğelerin ve bileşenlerin korunmasını denetlemek için kullanın

Ne zaman kullanılır? `@key`

Kapsamı `@key`

Ne zaman kullanılmaz `@key`

İçin kullanılacak değerler `@key`