ASP.NET Core Blazor temelleri

Temeller makaleleri, temel Blazor kavramları hakkında rehberlik sağlar. Bazı kavramlar, bu makalenin sonraki bölümünde daha ayrıntılı olarak açıklanan ve Razor makalelerinde ayrıntılı olarak ele alınan temel bileşenlerine yönelik bir anlayışla bağlantılıdır.

İstemci ve sunucu işleme kavramları

Belgeler boyuncaBlazor, kullanıcının sisteminde gerçekleşen etkinliğin istemci veya istemci tarafında gerçekleştiği söylenir. Bir sunucuda gerçekleşen etkinliğin sunucuda veya sunucu tarafında gerçekleştiği söylenir.

İşleme terimi, tarayıcıların görüntülediği HTML işaretlemesini üretmek anlamına gelir.

• İstemci tarafı işleme (CSR), son HTML işaretlemesinin istemcideki .NET WebAssembly çalışma zamanı tarafından oluşturulduğu anlamına gelir. Uygulamanın istemci tarafından oluşturulan kullanıcı arabirimi için bu tür bir işleme için sunucudan istemciye HTML gönderilmez. Kullanıcının sayfayla etkileşimi varsayılır. İstemci tarafında statik işleme diye bir kavram yoktur. CSR'nin etkileşimli olduğu varsayılır, bu nedenle sektör veya belgelerde "etkileşimli istemci tarafı işleme" ve "etkileşimli CSR" kullanılmaz.Blazor

• Sunucu tarafı işleme (SSR), son HTML işaretlemesinin sunucudaki ASP.NET Core çalışma zamanı tarafından oluşturulduğu anlamına gelir. HTML, istemcinin tarayıcısı tarafından görüntülenmesi için bir ağ üzerinden istemciye gönderilir. Uygulamanın sunucu tarafından oluşturulan kullanıcı arabirimi için bu işleme türünde istemci tarafından HTML oluşturulmaz. SSR iki çeşit olabilir:

  • Statik SSR: Sunucu, kullanıcı etkileşimi veya bileşen durumunu koruma sağlamayan Razor statik HTML üretir.
  • Etkileşimli SSR: Blazor olaylar kullanıcı etkileşimi sağlar ve Razor bileşen durumu çerçeve tarafından Blazor korunur.

• Ön kayıt , işlenen denetimler için olay işleyicilerini etkinleştirmeden başlangıçta sunucudaki sayfa içeriğini işleme işlemidir. Sunucu, uygulamanın kullanıcılara daha duyarlı hissetmesini sağlayan ilk isteğe yanıt olarak sayfanın HTML kullanıcı arabirimini mümkün olan en kısa sürede verir. Ön kayıt, arama motorlarının sayfa derecesini hesaplamak için kullandığı ilk HTTP yanıtının içeriğini işleyerek Arama Altyapısı İyileştirmesini (SEO) da geliştirebilir. Prerendering işlemi, her zaman sunucuda veya istemcide gerçekleşen son işleme ile tamamlanır.

Razor bileşenleri

Blazor uygulamaları genellikle yalnızca Razor olarak adlandırılan bileşenlerini temel alır. Bir bileşen, sayfa, iletişim kutusu veya veri girişi formu gibi bir kullanıcı arabirimi öğesidir. Bileşenler, .NET derlemelerinde yerleşik olarak bulunan .NET C# sınıflarıdır:

Razor, bileşenlerin genellikle istemci tarafı UI mantığı ve kompozisyonu için bir Razor işaretleme sayfası biçiminde nasıl yazıldığını ifade eder. Razor, HTML işaretlemesini geliştirici üretkenliği için tasarlanmış C# koduyla birleştirmeye yönelik bir söz dizimidir. Razor dosyaları .razor dosya uzantısını kullanır.

Bazı Blazor geliştiricileri ve çevrimiçi kaynaklar "Blazor bileşenleri" terimini kullansa da, belgelerde bu terim engellenir ve evrensel olarak "Razor bileşenleri" veya "bileşenler" kullanılır.

Blazor belgesi, bileşenleri göstermek ve tartışmak için çeşitli konvansiyonları benimser:

• Örnekler genellikle ASP.NET Core/C# kodlama kurallarına ve mühendislik yönergelerine bağlıdır. Daha fazla bilgi için aşağıdaki kaynaklara bakın:
  • ASP.NET Core çerçeve mühendislik yönergeleri (dotnet/aspnetcore GitHub deposu)
  • C# Kodlama Kuralları (C# kılavuzu)
• Proje kodu, dosya yolları ve adları, proje şablonu adları ve diğer özel terimler Amerikan İngilizcesi olarak yazılmıştır ve genellikle kod blokları içine alınmıştır.
• Bileşenlere genellikle C# sınıf adları (Pascal büyük/küçük harf) ve ardından "bileşen" sözcüğü denir. Örneğin, tipik bir dosya karşıya yükleme bileşeni "FileUpload bileşeni" olarak adlandırılır.
• Genellikle, bir bileşenin C# sınıf adı dosya adıyla aynıdır.
• Yönlendirilebilir bileşenler, genellikle kebab-case formatında olan göreli URL'lerini bileşenin sınıf adıyla ayarlarlar. Örneğin, bir FileUpload bileşeni, göreli /file-upload URL'de işlenen bileşene ulaşmak için yönlendirme yapılandırmasını içerir. Yönlendirme ve gezinti, ASP.NET Core Blazor yönlendirme ve gezinti kapsamındadır.
• Bir bileşenin birden çok sürümü kullanıldığında, bunlar sıralı olarak numaralandırılır. Örneğin, FileUpload3 bileşenine /file-upload-3 ulaşılır.
• Razor bir bileşen tanımının (.razor file) en üstündeki yönergeler şu sırayla yerleştirilir: @page, @rendermode (.NET 8 veya üzeri), @using deyimler, alfabetik sırada diğer yönergeler.
• Üyeler için private gerekli olmasa da, makale örneklerinde ve örnek uygulamalarda erişim değiştiricileri kullanılır. Örneğin private, maxAllowedFiles adlı bir alanı private int maxAllowedFiles = 3; olarak bildirmek için belirtilir.
• Bileşen parametre değerleri Razor ayrılmış @ sembolüyle başlar, ancak bu gerekli değildir. Değişmez değerler (örneğin, boole değerleri), anahtar sözcükler (örneğin, this) ve null bileşen parametre değerleri @ ile ön eklenmez, ancak bu yalnızca bir dokümantasyon geleneğidir. İsterseniz, kendi kodunuzda sabitlere @ ön eki ekleyebilirsiniz.
• C# sınıfları this anahtar sözcüğünü kullanır ve oluşturucularda atanan alanlara alt çizgi (_) ön eki eklemekten kaçınır; bu durum, ASP.NET Core framework mühendislik yönergeleri ile farklılık gösterir.
• Birincil oluşturucuları (C# 12 veya üzeri) kullanan örneklerde, birincil oluşturucu parametreleri genellikle doğrudan sınıf üyeleri tarafından kullanılır. Makale örneklerinde, yatay kaydırmayı azaltmak için kod satırları bölünür. Bu boşluklar yürütmeyi etkilemez, ancak projenize yapıştırırken kaldırılabilir.

bileşen söz dizimi hakkında ek bilgiler, ASP.NET Core bileşenlerinin söz dizimi bölümünde sağlanmaktadır.

Aşağıda örnek bir sayaç bileşeni ve Blazor proje şablonundan oluşturulan bir uygulamanın bir bölümü verilmiştir. Ayrıntılı bileşen kapsamı, belgelerin devamında yer alan Bileşenler makalelerinde bulunur. Aşağıdaki örnekte, belgelerin devamında Yer alan Bileşenler makalelerine ulaşmadan önce Temeller makalelerinde görülen Bileşenler kavramları gösterilmektedir.

Counter.razor:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

@page "/counter"

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

@page "/counter"

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

Önceki Counter bileşeni:

• İlk satırda @page yönergesi ile yolunu ayarlar.
• Sayfa başlığını ve üstbilgiyi ayarlar.
• Geçerli sayıyı @currentCount ile gösterir. currentCount, @code bloğunun C# kodunda tanımlanan bir tamsayı değişkenidir.
• IncrementCount bloğunda da bulunan ve @code değişkeninin değerini artıran currentCount yöntemini tetiklemek için bir düğme görüntüler.

Belge Nesne Modeli (DOM)

Belge Nesne Modeli başvuruları DOM kısaltmasını kullanır.

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

• DOM'a giriş (MDN belgeleri)
• Düzey 1 Belge Nesne Modeli Belirtimi (W3C)

Uygulamalar için Blazor WebAssembly .NET API'lerinin alt kümesi

Tarayıcıda Blazor WebAssembly tarafından desteklenen belirli .NET API'lerinin seçilmiş bir listesi mevcut değil. Ancak, WebAssembly'de desteklenmeyen .NET API'lerini bulmak için el ile [UnsupportedOSPlatform("browser")] ek açıklamalı .NET API'lerinin listesini arayabilirsiniz.

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

• Sınıf kitaplıkları: İstemci tarafı tarayıcı uyumluluk çözümleyicisi
• API'lere belirli platformlarda desteklenmeyen açıklama ekleme (dotnet/designs GitHub deposu

Örnek uygulamalar

Belge örnek uygulamaları, inceleme ve indirme için kullanılabilir:

Blazor GitHub örnek deposu (dotnet/blazor-samples)

İlk olarak üzerinde çalıştığınız .NET sürümüyle eşleşen sürüm klasörünü seçerek örnek bir uygulama bulun.

Daha fazla bilgi için, depodaki örneklerin listesi ve indirme yönergeleri için bkz. Blazor örnekleri GitHub deposu README dosyası.

ASP.NET Core deposunun Temel Test Uygulaması da çeşitli Blazor senaryolar için yararlı bir örnek kümesidir:

BasicTestApp ASP.NET Çekirdek başvuru kaynağında (dotnet/aspnetcore)

Bayt çarpanları

.NET bayt boyutları, 1024'ün kuvvetlerine dayanan ondalık olmayan bayt katlarını ifade etmek için metrik ön ekleri kullanır.

Destek istekleri

Yalnızca belgelerle ilgili sorunlar dotnet/AspNetCore.Docs deposu için uygundur. Ürün desteği için bir belge sorunu açmayın. Aşağıdaki destek kanallarından biri veya daha fazlası aracılığıyla yardım isteyin:

• Stack Overflow (etiketi: blazor)
• Genel ASP.NET Core Slack Ekibi
• Blazor Gitter

Çerçevede veya ürün geri bildiriminde olası bir hata için, dotnet/aspnetcore sorunlarında ASP.NET Core ürün birimi için bir sorun açın Hata raporları genellikle aşağıdakileri gerektirir:

• Sorunun net açıklaması: Sorunu açarken ürün birimi tarafından sağlanan GitHub sorun şablonundaki yönergeleri izleyin.
• Minimal yeniden oluşturma projesi: Ürün birimi mühendislerinin indirip çalıştırması için GitHub'a bir proje yerleştirin. Projeyi, sorunun açılış açıklamasına çapraz bağlayın.

Bir Blazor makalesiyle ilgili olası bir sorun için bir belge sorunu açın. Belge sorununu açmak için makalenin en altındaki Belge sorunu geri bildirimi aç bağlantısını kullanın. Sorununuza eklenen meta veriler izleme verileri sağlar ve makalenin yazarına otomatik olarak ping atar. Konu, belge sorununu açmadan önce ürün birimiyle tartışıldıysa, belge sorununun açılış açıklamasına mühendislik sorununa bir çapraz bağlantı yerleştirin.

Visual Studio ile ilgili sorunlar veya geri bildirim için Visual Studio'nun içinden Sorun Bildir veya Özellik Öner hareketlerini kullanın. Bu hareketler Visual Studio'nun iç sorunlarını açar. Daha fazla bilgi için bkz . Visual Studio Geri Bildirimi.

Visual Studio Code ile ilgili sorunlar için topluluk destek forumlarında destek isteyin. Hata raporları ve ürün geri bildirimi için microsoft/vscode GitHub deposunda bir sorun açın.

Blazor belgeleri için GitHub sorunları, Blazor.Docs projesinde önceliklendirme için otomatik olarak işaretlenir (dotnet/AspNetCore.Docs GitHub deposu). Lütfen, özellikle hafta sonları ve tatillerde yanıt için lütfen kısa bir süre bekleyin. Belge yazarları hafta içi genellikle 24 saat içinde yanıt verir.

Blazor kaynaklarına topluluk bağlantıları

Topluluk tarafından sağlanan Blazor kaynaklarına yönelik bağlantıların bir koleksiyonu için, Awesome Blazor adresini ziyaret edin.