ile yeniden kullanılabilir kullanıcı arabirimi bileşenleri oluşturma Blazor

İpucu

Bu içerik, Blazor .NET Docs'ta veya çevrimdışı olarak okunabilen ücretsiz indirilebilir bir PDF olarak sağlanan Azure için ASP NET Web Forms Geliştiricileri için e-Kitap'tan bir alıntıdır.

PDF'i indirin

Web Forms'ASP.NET ile ilgili en güzel şeylerden biri, yeniden kullanılabilir kullanıcı arabirimi (UI) kodu parçalarının yeniden kullanılabilir UI denetimlerine kapsüllemesini nasıl sağladığıdır. Özel kullanıcı denetimleri,.ascx dosyaları kullanılarak işaretlemede tanımlanabilir. Tam tasarımcı desteğiyle kodda ayrıntılı sunucu denetimleri de oluşturabilirsiniz.

Blazorayrıca bileşenler aracılığıyla kullanıcı arabirimi kapsüllemesini destekler. Bir bileşen:

• Kullanıcı arabiriminin kendi içinde yer alan bir öbektir.
• Kendi durumunu ve işleme mantığını korur.
• Kullanıcı arabirimi olay işleyicileri tanımlayabilir, giriş verilerine bağlanabilir ve kendi yaşam döngüsünü yönetebilir.
• Genellikle Razor söz dizimi kullanılarak bir .razor dosyasında tanımlanır.

Razor'a giriş

Razor, HTML ve C# tabanlı basit bir işaretleme şablon oluşturma dilidir. Razor ile, bileşen işleme mantığınızı tanımlamak için işaretleme ve C# kodu arasında sorunsuz geçiş yapabilirsiniz. .razor dosyası derlendiğinde, işleme mantığı .NET sınıfında yapılandırılmış bir şekilde yakalanır. Derlenen sınıfın adı .razor dosya adından alınır. Ad alanı, proje için varsayılan ad alanından ve klasör yolundan alınır veya @namespace yönergesini kullanarak ad alanını açıkça belirtebilirsiniz (aşağıdaki Razor yönergeleri hakkında daha fazla bilgi).

Bir bileşenin işleme mantığı, C# kullanılarak eklenen dinamik mantıkla normal HTML işaretlemesi kullanılarak yazılmıştır. @ Karakter, C# karakterine geçiş yapmak için kullanılır. Razor genellikle HTML'ye ne zaman geri döndüğünüz konusunda akıllıdır. Örneğin, aşağıdaki bileşen geçerli saatle birlikte bir <p> etiket oluşturur:

<p>@DateTime.Now</p>

C# ifadesinin başlangıcını ve sonunu açıkça belirtmek için parantezleri kullanın:

<p>@(DateTime.Now)</p>

Razor, işleme mantığınızda C# denetim akışını kullanmayı da kolaylaştırır. Örneğin, aşağıdaki gibi bazı HTML'leri koşullu olarak işleyebilirsiniz:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

Veya aşağıdaki gibi normal bir C# foreach döngüsü kullanarak öğelerin listesini oluşturabilirsiniz:

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

ASP.NET Web Forms'daki yönergeler gibi Razor yönergeleri, Razor bileşeninin nasıl derlenmiş olduğunu birçok açıdan denetler. Bileşene örnek olarak şunlar verilebilir:

• Ad Alanı
• Temel sınıf
• Uygulanan arabirimler
• Genel parametreler
• İçeri aktarılan ad alanları
• Yollar

Razor yönergeleri @ karakteriyle başlar ve genellikle dosyanın başında yeni bir satırın başlangıcında kullanılır. Örneğin yönergesi @namespace bileşenin ad alanını tanımlar:

@namespace MyComponentNamespace

Aşağıdaki tabloda, Blazor içinde kullanılan çeşitli Razor yönergeleri ve varsa ASP.NET Web Forms eşdeğerleri özetlenmektedir.

Yönerge	Açıklama	Örnek	Web Forms eşdeğeri
@attribute	Bileşene sınıf düzeyi özniteliği ekler	@attribute [Authorize]	Hiçbiri
@code	Bileşene sınıf üyeleri ekler	@code { ... }	<script runat="server">...</script>
@implements	Belirtilen arabirimi uygular	@implements IDisposable	Arka planda kod kullanma
@inherits	Belirtilen temel sınıftan devralır	@inherits MyComponentBase	<%@ Control Inherits="MyUserControlBase" %>
@inject	Bileşene bir hizmet ekler	@inject IJSRuntime JS	Hiçbiri
@layout	Bileşen için bir yerleşim bileşeni belirtir	@layout MainLayout	<%@ Page MasterPageFile="~/Site.Master" %>
@namespace	Bileşen için ad alanını ayarlar	@namespace MyNamespace	Hiçbiri
@page	Bileşenin yolunu belirtir	@page "/product/{id}"	<%@ Page %>
@typeparam	Bileşen için genel bir tür parametresi belirtir	@typeparam TItem	Arka planda kod kullanma
@using	Kapsama eklenecek ad alanını belirtir	@using MyComponentNamespace	web.config'e ad alanı ekle

Razor bileşenleri ayrıca bileşenlerin nasıl derlenmiş olduğunu (olay işleme, veri bağlama, bileşen ve öğe başvuruları vb.) çeşitli yönlerini denetlemek için öğelerde yönerge özniteliklerinin kapsamlı bir şekilde kullanılmasını sağlar. Yönerge özniteliklerinin tümü, parantez içindeki değerlerin isteğe bağlı olduğu genel bir söz dizimini izler:

@directive(-suffix(:name))(="value")

Aşağıdaki tabloda, içinde Blazorkullanılan Razor yönergelerinin çeşitli öznitelikleri özetlemektedir.

Öznitelik	Açıklama	Örnek
@attributes	Öznitelikler sözlüğünü oluşturur	<input @attributes="ExtraAttributes" />
@bind	İki yönlü veri bağlaması oluşturur	<input @bind="username" @bind:event="oninput" />
@on{event}	Belirtilen olay için bir olay işleyicisi ekler	<button @onclick="IncrementCount">Click me!</button>
@key	Bir koleksiyondaki öğeleri korumak için fark algoritması tarafından kullanılacak anahtarı belirtir	<DetailsEditor @key="person" Details="person.Details" />
@ref	Bileşene veya HTML öğesine referans alır	<MyDialog @ref="myDialog" />

Blazor, @onclick, @bind, @ref tarafından kullanılan çeşitli yönerge öznitelikleri aşağıdaki bölümlerde ve sonraki bölümler de ele alınmıştır.

.aspx ve .ascx dosyalarında kullanılan söz dizimlerinin çoğunun Razor'da paralel söz dizimleri vardır. Aşağıda, ASP.NET Web Forms ve Razor söz dizimlerinin basit bir karşılaştırması yer almaktadır.

Özellik	Web Formları	Sözdizimi	Jilet	Sözdizimi
Yönergeler	<%@ [directive] %>	<%@ Page %>	@[directive]	@page
Kod blokları	<% %>	<% int x = 123; %>	@{ }	@{ int x = 123; }
İfadeler (HTML ile kodlanmış)	<%: %>	<%:DateTime.Now %>	Örtülü: @ Açık: @()	@DateTime.Now @(DateTime.Now)
Açıklamalar	<%-- --%>	<%-- Commented --%>	@* *@	@* Commented *@
Veri bağlama	<%# %>	<%# Bind("Name") %>	@bind	<input @bind="username" />

Razor bileşen sınıfına üye eklemek için yönergesini @code kullanın. Bu teknik, ASP.NET Web Forms kullanıcı denetiminde veya sayfasında kullanılan <script runat="server">...</script> blok benzeridir.

@code {
    int count = 0;

    void IncrementCount()
    {
        count++;
    }
}

Razor C# tabanlı olduğundan, C# projesi (.csproj) içinden derlenmelidir. Visual Basic projesinden (.vbproj) .razor dosyalarını derleyemezsiniz. Visual Basic projelerine Blazor projenizden hâlâ referans verebilirsiniz. Tam tersi de geçerlidir.

Razor söz dizimi için tam başvuruyu görmek için ASP.NET Core için Razor söz dizimi başvurusu sayfasına bakın.

Bileşenleri kullanma

Normal HTML'nin yanı sıra, bileşenler işleme mantığının bir parçası olarak diğer bileşenleri de kullanabilir. Razor'da bileşen kullanma söz dizimi, ASP.NET Web Forms uygulamasında kullanıcı denetimi kullanmaya benzer. Bileşenler, bileşenin tür adıyla eşleşen bir öğe etiketi kullanılarak belirtilir. Örneğin, aşağıdakine benzer bir Counter bileşen ekleyebilirsiniz:

<Counter />

ASP.NET Web Forms'un aksine, içindeki Blazorbileşenler:

• Öğe ön eki kullanmayın (örneğin, asp:).
• Sayfada veya web.config dosyasında kayıt gerektirmez.

Razor bileşenlerini .NET türleri gibi düşünün, çünkü bunlar tam olarak budur. Bileşeni içeren derlemeye başvurulursa, bileşen kullanılabilir. Bileşenin ad alanını kapsama getirmek için şu yönergeyi @using uygulayın:

@using MyComponentLib

<Counter />

Varsayılan Blazor projelerde görüldüğü gibi, @using yönergelerinin bir _Imports.razor dosyasına yerleştirilip aynı dizindeki ve alt dizinlerdeki tüm .razor dosyalarına içeriye aktarılması yaygındır.

Bir bileşenin ad alanı kapsam içinde değilse, C# dilinde olduğu gibi tam tür adını kullanarak bir bileşen belirtebilirsiniz:

<MyComponentLib.Counter />

Bileşenlerden sayfa başlığını değiştirme

SPA stili uygulamalar oluştururken, sayfanın tamamını yeniden yüklemeden sayfanın bölümlerinin yeniden yüklenmesi yaygın olarak görülür. Yine de, sayfanın başlığının o anda hangi bileşenin yüklendiğine bağlı olarak değiştirilmesi yararlı olabilir. Bu, etiketi bileşenin <PageTitle> Razor sayfasına ekleyerek gerçekleştirilebilir:

@page "/"
<PageTitle>Home</PageTitle>

Bu öğenin içeriği dinamik olabilir; örneğin, geçerli ileti sayısını gösterir:

<PageTitle>@MessageCount messages</PageTitle>

Belirli bir sayfadaki birkaç bileşen etiket içeriyorsa <PageTitle> yalnızca sonuncunun görüntüleneceğini unutmayın (her biri öncekinin üzerine yazılacağından).

Bileşen parametreleri

ASP.NET Web Forms'da, ortak özellikleri kullanarak parametreleri ve verileri denetimlere akıtabilirsiniz. Bu özellikler, öznitelikler kullanılarak işaretleme olarak ayarlanabilir veya doğrudan kodda ayarlanabilir. Razor bileşenleri benzer şekilde çalışır, ancak bileşen özelliklerinin de bileşen parametreleri olarak kabul edilmesi için özniteliğiyle [Parameter] işaretlenmesi gerekir.

Aşağıdaki Counter bileşeni, düğmeye her tıklandığında Counter artırılacak miktarı belirtmek amacıyla kullanılan IncrementAmount adlı bir bileşen parametresini tanımlar.

<h1>Counter</h1>

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

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

@code {
    int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

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

içinde Blazorbir bileşen parametresi belirtmek için, ASP.NET Web Forms'da olduğu gibi bir öznitelik kullanın:

<Counter IncrementAmount="10" />

Sorgu dizesi parametreleri

Razor bileşenleri, parametre kaynağı olarak işlendikleri sayfanın sorgu dizesinden de yararlanabilir. Bunu etkinleştirmek için özniteliğini parametresine ekleyin [SupplyParameterFromQuery] . Örneğin, aşağıdaki parametre tanımı değerini ?IncBy=2 şeklindeki istekten alır.

[Parameter]
[SupplyParameterFromQuery(Name = "IncBy")]
public int IncrementAmount { get; set; } = 1;

Özelleştirilmiş bir Name değeri, [SupplyParameterFromQuery] özniteliğinde sağlamazsanız, varsayılan olarak özellik adıyla (bu örnekte IncrementAmount) eşleşecektir.

Bileşenler ve hata sınırları

Varsayılan olarak, Blazor uygulamalar işlenmeyen özel durumları algılar ve sayfanın alt kısmında ek ayrıntı içermeyen bir hata iletisi gösterir. Uygulamanın işlenmeyen bir hatadan etkilenen bölümlerini kısıtlamak, örneğin etkiyi tek bir bileşenle sınırlamak için etiket, <ErrorBoundary> bileşen bildirimleri etrafında sarmalanabilir.

Örneğin, Counter bileşeninden gelebilecek olası özel durumlardan korunmak için bunu bir <ErrorBoundary> içinde tanımlayın ve bir özel durum oluşursa görüntülenecek bir ileti isteğe bağlı olarak belirtin.

<ErrorBoundary>
    <ChildContent>
        <Counter />
    </ChildContent>
    <ErrorContent>
        Oops! The counter isn't working right now; please try again later.
    </ErrorContent>
</ErrorBoundary>

Özel hata içeriği belirtmeniz gerekmiyorsa, bileşeni doğrudan sarmalayabilirsiniz:

<ErrorBoundary>
  <Counter />
</ErrorBoundary>

Sarmalanan bileşende işlenmeyen bir özel durum oluşursa " Hata oluştu" ifadesini belirten varsayılan bir ileti görüntülenir.

Olay işleyicileri

Hem Web Forms'ASP.NET hem Blazor de kullanıcı arabirimi olaylarını işlemek için olay tabanlı bir programlama modeli sağlar. Bu tür olaylara örnek olarak düğme tıklamaları ve metin girişi verilebilir. ASP.NET Web Forms'da, DOM tarafından kullanıma sunulan ui olaylarını işlemek için HTML sunucusu denetimlerini kullanırsınız veya web sunucusu denetimleri tarafından kullanıma sunulan olayları işleyebilirsiniz. Olaylar, form geri gönderim istekleri biçiminde sunucuda görünür hâle gelir. Aşağıdaki Web Forms düğmesi tıklama örneğini göz önünde bulundurun:

Counter.ascx

<asp:Button ID="ClickMeButton" runat="server" Text="Click me!" OnClick="ClickMeButton_Click" />

Counter.ascx.cs

public partial class Counter : System.Web.UI.UserControl
{
    protected void ClickMeButton_Click(object sender, EventArgs e)
    {
        Console.WriteLine("The button was clicked!");
    }
}

içinde Blazor, formunun @on{event}yönerge özniteliklerini kullanarak DOM UI olayları için işleyicileri doğrudan kaydedebilirsiniz. Yer tutucu, {event} olayın adını temsil eder. Örneğin, düğme tıklamalarını şu şekilde dinleyebilirsiniz:

<button @onclick="OnClick">Click me!</button>

@code {
    void OnClick()
    {
        Console.WriteLine("The button was clicked!");
    }
}

Olay işleyicileri, olaya özgü, isteğe bağlı bir bağımsız değişkeni kabul ederek olay hakkında daha fazla bilgi sağlayabilir. Örneğin, fare olayları bir MouseEventArgs bağımsız değişken alabilir, ancak gerekli değildir.

<button @onclick="OnClick">Click me!</button>

@code {
    void OnClick(MouseEventArgs e)
    {
        Console.WriteLine($"Mouse clicked at {e.ScreenX}, {e.ScreenY}.");
    }
}

Olay işleyicisi için yöntem grubuna başvurmak yerine lambda ifadesi kullanabilirsiniz. Lambda ifadesi, diğer kapsam içi değerleri kapatmanıza olanak tanır.

@foreach (var buttonLabel in buttonLabels)
{
    <button @onclick="() => Console.WriteLine($"The {buttonLabel} button was clicked!")">@buttonLabel</button>
}

Olay işleyicileri zaman uyumlu veya zaman uyumsuz olarak yürütülebilir. Örneğin, aşağıdaki OnClick olay işleyicisi zaman uyumsuz olarak yürütülür:

<button @onclick="OnClick">Click me!</button>

@code {
    async Task OnClick()
    {
        var result = await Http.GetAsync("api/values");
    }
}

Bir olay işlendikten sonra, bileşen, bileşen durumu değişikliklerini hesaba katmak için işlenir. Zaman uyumsuz olay işleyicileri ile bileşen, işleyici yürütme tamamlandıktan hemen sonra işlenir. Zaman uyumsuz Task tamamlandıktan sonra bileşen yeniden render edilir. Bu asenkron yürütme modu, asenkron Task hâlâ devam ederken uygun bir kullanıcı arabirimi göstermek için bir fırsat sağlar.

<button @onclick="ShowMessage">Get message</button>

@if (showMessage)
{
    @if (message == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <p>The message is: @message</p>
    }
}

@code
{
    bool showMessage = false;
    string message;

    public async Task ShowMessage()
    {
        showMessage = true;
        message = await MessageService.GetMessageAsync();
    }
}

Bileşenler, türünde EventCallback<TValue>bir bileşen parametresi tanımlayarak kendi olaylarını da tanımlayabilir. Olay geri çağırmaları, DOM UI olay işleyicilerinin tüm çeşitlemelerini destekler: isteğe bağlı bağımsız değişkenler, zaman uyumlu veya zaman uyumsuz, yöntem grupları veya lambda ifadeleri.

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

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }
}

Veri bağlama

Blazor kullanıcı arabirimi bileşenindeki verileri bileşenin durumuna bağlamak için basit bir mekanizma sağlar. Bu yaklaşım, veri kaynaklarından kullanıcı arabirimi denetimlerine veri bağlamaya yönelik ASP.NET Web Forms'daki özelliklerden farklıdır. Verilerle ilgilenme bölümünde farklı veri kaynaklarından verileri işlemeyi ele alacağız.

Ui bileşeninden bileşenin durumuna iki yönlü veri bağlaması oluşturmak için yönerge özniteliğini @bind kullanın. Aşağıdaki örnekte, onay kutusunun değeri alana bağlıdır isChecked .

<input type="checkbox" @bind="isChecked" />

@code {
    bool isChecked;
}

Bileşen işlendiğinde, onay kutusunun değeri isChecked alanının değerine ayarlanır. Kullanıcı onay kutusunu değiştirdiğinde olay onchange tetiklenir ve isChecked alan yeni değere ayarlanır. @bind Bu durumda söz dizimi aşağıdaki işaretlemeye eşdeğerdir:

<input value="@isChecked" @onchange="(UIChangeEventArgs e) => isChecked = e.Value" />

Bağlama için kullanılan olayı değiştirmek için özniteliğini @bind:event kullanın.

<input @bind="text" @bind:event="oninput" />
<p>@text</p>

@code {
    string text;
}

Bileşenler, parametrelerine veri bağlamayı da destekleyebilir. Veri bağlama için, bağlanabilir parametreyle aynı ada sahip bir olay geri çağırma parametresi tanımlayın. İsme "Değiştirildi" soneki eklenir.

PasswordBox.razor

Password: <input
    value="@Password"
    @oninput="OnPasswordChanged"
    type="@(showPassword ? "text" : "password")" />

<label><input type="checkbox" @bind="showPassword" />Show password</label>

@code {
    private bool showPassword;

    [Parameter]
    public string Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        Password = e.Value.ToString();
        return PasswordChanged.InvokeAsync(Password);
    }
}

Veri bağlamasını temel alınan bir UI öğesine zincirlemek için değeri ayarlayın ve olayı doğrudan UI öğesi üzerinde işlem, @bind özniteliğini kullanmak yerine gerçekleştirilmelidir.

Bileşen parametresine bağlanmak için, bağlamak istediğiniz parametreyi belirtmek için özniteliğini @bind-{Parameter} kullanın.

<PasswordBox @bind-Password="password" />

@code {
    string password;
}

Durum değişiklikleri

Bileşenin durumu normal bir UI olayı veya geri çağrı işlevi dışında değiştiyse, bileşenin yeniden işlenmesi gerektiğini manuel olarak belirtmesi gerekir. Bir bileşenin durumunun değiştiğini belirtmek için bileşeninde StateHasChanged yöntemini çağırın.

Aşağıdaki örnekte, bir bileşen bir hizmetten gelen ve uygulamanın diğer bölümleri tarafından güncelleştirilebilen bir AppState ileti görüntüler. Bileşen, mesaj güncellendiğinde bileşenin işlenmesi sağlanması için StateHasChanged yöntemini AppState.OnChange olayıyla ilişkilendirir.

public class AppState
{
    public string Message { get; }

    // Lets components receive change notifications
    public event Action OnChange;

    public void UpdateMessage(string message)
    {
        Message = message;
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

@inject AppState AppState

<p>App message: @AppState.Message</p>

@code {
    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged
    }
}

Bileşen yaşam döngüsü

ASP.NET Web Forms çerçevesi modüller, sayfalar ve denetimler için iyi tanımlanmış yaşam döngüsü yöntemlerine sahiptir. Örneğin, aşağıdaki denetim , Initve Load yaşam döngüsü olayları için UnLoadolay işleyicileri uygular:

Counter.ascx.cs

public partial class Counter : System.Web.UI.UserControl
{
    protected void Page_Init(object sender, EventArgs e) { ... }
    protected void Page_Load(object sender, EventArgs e) { ... }
    protected void Page_UnLoad(object sender, EventArgs e) { ... }
}

Razor bileşenleri de iyi tanımlanmış bir yaşam döngüsüne sahiptir. Bileşenin yaşam döngüsü, bileşen durumunu başlatmak ve gelişmiş bileşen davranışları uygulamak için kullanılabilir.

BlazorTüm bileşen yaşam döngüsü yöntemlerinin hem zaman uyumlu hem de zaman uyumsuz sürümleri vardır. Bileşen render etme eşzamanlı. Bileşen işlemenin bir parçası olarak zaman uyumsuz mantık çalıştıramazsınız. Tüm zaman uyumsuz mantık bir async yaşam döngüsü yönteminin parçası olarak yürütülmelidir.

OnInitialized

OnInitialized ve OnInitializedAsync yöntemleri, bileşeni başlatmak için kullanılır. Bir bileşen genellikle ilk defa görüntülendikten sonra başlatılır. Bir bileşen başlatıldıktan sonra, sonunda atılmadan önce birden fazla kez görüntülenebilir. OnInitialized yöntemi, ASP.NET Web Forms sayfaları ve denetimlerindeki olaya benzerPage_Load.

protected override void OnInitialized() { ... }
protected override async Task OnInitializedAsync() { await ... }

OnParametersSet

OnParametersSet ve OnParametersSetAsync yöntemleri, bir bileşen üst öğesinden parametre aldığında ve değer özelliklere atandığında çağrılır. Bu yöntemler, bileşen başlatma işleminden sonra ve bileşen her işlendiğinde yürütülür.

protected override void OnParametersSet() { ... }
protected override async Task OnParametersSetAsync() { await ... }

OnAfterRender (Rendirme Sonrası İşlem)

OnAfterRender ve OnAfterRenderAsync yöntemleri, bir bileşenin işlenmesi tamamlandıktan sonra çağrılır. Öğe ve bileşen referansları bu noktada atanır (aşağıdaki kavramlarla ilgili daha fazla bilgi verilecektir). Bu noktada tarayıcıyla etkileşim etkinleştirilir. DOM ve JavaScript yürütme ile etkileşimler güvenli bir şekilde gerçekleşebilir.

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        ...
    }
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await ...
    }
}

OnAfterRender ve OnAfterRenderAsyncön işleme sırasında sunucuda çağrılmaz.

firstRender parametresi, bileşen ilk kez işlendiğinde true; aksi takdirde değeri false olur.

IDisposable (atılabilir arayüz)

Bileşen kullanıcı arabiriminden kaldırıldığında, Razor bileşenleri kaynakları temizlemek için IDisposable uygulayabilir. Razor bileşeni, IDispose gerçekleştirmek için @implements yönergesini kullanabilir:

@using System
@implements IDisposable

...

@code {
    public void Dispose()
    {
        ...
    }
}

Bileşen bağlantılarını yakalama

ASP.NET Web Forms'da, bir denetim örneğinin kimliğine başvurarak doğrudan kodda işlemesi yaygın bir durum olur. Blazor içinde, çok daha az yaygın olsa da bir bileşene referans yakalayıp işlem yapmak mümkündür.

Blazor içinde bir bileşen başvurusu yakalamak için @ref yönerge özniteliğini kullanın. özniteliğinin değeri, başvuruda bulunan bileşenle aynı türde bir ayarlanabilir alanın adıyla eşleşmelidir.

<MyLoginDialog @ref="loginDialog" ... />

@code {
    MyLoginDialog loginDialog = default!;

    void OnSomething()
    {
        loginDialog.Show();
    }
}

Ana bileşen işlendiğinde, alan alt bileşen örneğiyle doldurulur. Daha sonra bileşen örneğinde yöntemleri çağırabilir veya başka bir şekilde işleyebilirsiniz.

Bileşen durumlarını doğrudan bileşen başvurularını kullanarak düzenleme önerilmez. Bunun yapılması, bileşenin doğru zamanlarda otomatik olarak işlenmesini engeller.

Eleman referanslarını yakalama

Razor bileşenleri bir öğeye referansları yakalayabilir. ASP.NET Web Forms'daki HTML sunucusu denetimlerinin aksine, içinde bir öğe başvurusu kullanarak DOM'yi Blazordoğrudan işleyemezsiniz. Blazor DOM fark bulma algoritmasını kullanarak sizin için DOM etkileşimlerinin çoğunu işler. içindeki Blazor yakalanan öğe başvuruları opaktır. Ancak, JavaScript birlikte çalışma çağrısında belirli bir öğe referansı geçirmek için kullanılır. JavaScript birlikte çalışma hakkında daha fazla bilgi için bkz . ASP.NET Core Blazor JavaScript birlikte çalışma.

Şablonlu bileşenler

ASP.NET Web Forms'da şablonlu denetimler oluşturabilirsiniz. Şablonlu denetimler, geliştiricinin kapsayıcı denetimini işlemek için kullanılan HTML'nin bir bölümünü belirtmesini sağlar. Şablonlu sunucu denetimleri oluşturmanın mekanizması karmaşıktır, ancak verileri kullanıcı tarafından özelleştirilebilir bir şekilde işlemek için güçlü senaryolar sağlar. Şablonlu denetimler arasında Repeater ve DataList örnek olarak verilebilir.

Razor bileşenleri, RenderFragment veya RenderFragment<T> türünde bileşen parametreleri tanımlanarak da şablonlanabilir. RenderFragment , daha sonra bileşen tarafından işlenebilen Razor işaretlemesinin bir öbeğini temsil eder. A RenderFragment<T> , işleme parçası işlenirken belirtilebilen bir parametre alan Razor işaretlemesinin bir öbektir.

Alt öge içeriği

Razor bileşenleri, alt içeriklerini RenderFragment olarak yakalayıp bu içeriği bileşen işlemeyi bir parçası olarak işleyebilir. Alt içeriği yakalamak için RenderFragment türünde bir bileşen parametresi tanımlayın ve ChildContent olarak adlandırın.

ChildContentComponent.razor

<h1>Component with child content</h1>

<div>@ChildContent</div>

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

Bir ebeveyn bileşen daha sonra normal Razor söz dizimini kullanarak alt içerik sağlayabilir.

<ChildContentComponent>
    <ChildContent>
        <p>The time is @DateTime.Now</p>
    </ChildContent>
</ChildContentComponent>

Şablon parametreleri

Şablonlu bir Razor bileşeni, RenderFragment veya RenderFragment<T> türünde birden çok bileşen parametresi tanımlayabilir. Bir RenderFragment<T> parametresi, çağrıldığında belirtilebilir. Bir bileşen için genel tür parametresi belirtmek için Razor yönergesini @typeparam kullanın.

SimpleListView.razor

@typeparam TItem

@Heading

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

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

    [Parameter]
    public RenderFragment<TItem> ItemTemplate { get; set; }

    [Parameter]
    public IEnumerable<TItem> Items { get; set; }
}

Şablonlu bir bileşen kullanılırken, şablon parametreleri, parametrelerin adlarıyla eşleşen alt öğeler kullanılarak belirtilebilir. Öğe olarak geçirilen RenderFragment<T> türündeki bileşen bağımsız değişkenlerinin context adlı örtük bir parametresi vardır. Alt öğedeki Context özniteliğini kullanarak bu uygulama parametresinin adını değiştirebilirsiniz. Herhangi bir genel tür parametresi, tür parametresinin adıyla eşleşen bir öznitelik kullanılarak belirtilebilir. Tür parametresi mümkünse çıkarılır:

<SimpleListView Items="messages" TItem="string">
    <Heading>
        <h1>My list</h1>
    </Heading>
    <ItemTemplate Context="message">
        <p>The message is: @message</p>
    </ItemTemplate>
</SimpleListView>

Bu bileşenin çıkışı şöyle görünür:

<h1>My list</h1>
<ul>
    <li><p>The message is: message1</p></li>
    <li><p>The message is: message2</p></li>
<ul>

Arka plan kod

Razor bileşeni genellikle tek bir .razor dosyasında yazar. Ancak arka planda kod dosyası kullanarak kodu ve işaretlemeyi ayırmak da mümkündür. Arka planda kod dosyası kullanmak için, bileşen dosyasının dosya adıyla eşleşen ancak .cs uzantısı eklenmiş (Counter.razor.cs) bir C# dosyası ekleyin.

Tercih edilen yaklaşım, arka planda kod sınıfını bileşenle aynı ada sahip bir partial sınıf olarak bildirmektir. Razor bileşen dosyası zaten aynı ada sahip bir kısmi sınıf oluşturduğundan, derleme zamanında iki bölüm birleştirilir ve yönergesine @inherits ihtiyacınız yoktur.

Counter.razor

<h1>Counter</h1>

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

<button @onclick="IncrementCount">Click me</button>

Counter.razor.cs

public partial class Counter
{
    private int currentCount = 0;

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

Kısmi sınıf yaklaşımında, üyelerin protected olmaları gerekmez. private üyeleri erişilebilir durumdadır çünkü kısmi sınıfın her iki bölümü de aynı sınıf içine derlenir.

Alternatif olarak, bir temel sınıf kullanabilirsiniz. ComponentBase'dan türetilen bir temel sınıf tanımlayın, ardından Razor bileşen dosyasına temel sınıfı belirtmek için @inherits yönergesini ekleyin. Temel sınıfı, bileşen adından sonra Base soneki ile adlandırmak yaygındır.

Counter.razor

@inherits CounterBase

<h1>Counter</h1>

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

<button @onclick="IncrementCount">Click me</button>

Counter.razor.cs

public class CounterBase : ComponentBase
{
    protected int currentCount = 0;

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

Temel sınıftaki üyelerin görünürlüğü, bileşen sınıfı tarafından görülebilmesi için protected veya public olmalıdır. Ayrıca, temel sınıf yaklaşımıyla IDE hem bileşeni hem de temel sınıfıNı IntelliSense listelerinde gösterebilir. Bu yinelemeyi önlemek için kısmi sınıf yaklaşımını kullanın.

Ek kaynaklar

Yukarıdaki, Razor bileşenlerinin tüm yönlerine yönelik kapsamlı bir işlem değildir. ASP.NET Core Razor bileşenlerini oluşturma ve kullanma hakkında daha fazla bilgi için belgelere Blazor bakın.

Geriİleri