ASP.NET Core Blazor temelleri
Uyarı
ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.
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 Bileşenler makalelerinde ayrıntılı olarak ele alınan temel Razor bileşenlerine yönelik bir anlayışla bağlantılıdır.
Statik ve etkileşimli işleme kavramları
Razor bileşenleri statik olarak işlenir veya etkileşimli olarak işlenir.
Statik veya statik işleme , bileşenin kullanıcı ile .NET/C# kodu arasında etkileşim için kapasite olmadan işlendiği anlamına gelen sunucu tarafı bir senaryodur. JavaScript ve HTML DOM olayları etkilenmez, ancak istemcideki hiçbir kullanıcı olayı sunucuda çalışan .NET ile işlenemez.
Etkileşimli veya etkileşimli işleme , bileşenin C# kodu aracılığıyla .NET olaylarını işleme kapasitesine sahip olduğu anlamına gelir. .NET olayları, ASP.NET Core çalışma zamanı tarafından sunucuda veya WebAssembly tabanlı Blazor çalışma zamanı tarafından istemcideki tarayıcıda işlenir.
Önemli
Web Uygulaması kullanırken Blazor , belge örneği bileşenlerinin Blazor çoğu, makalelerde ele alınan kavramların çalışması ve gösterilmesi için etkileşim gerektirir . Bir makale tarafından sağlanan örnek bir bileşeni test ederken, uygulamanın genel etkileşimi benimsediğinden veya bileşenin etkileşimli işleme modunu benimsediğinden emin olun.
Bu kavramlar ve statik ve etkileşimli işlemeyi denetleme hakkında daha fazla bilgi için belgelerin devamında yer alan ASP.NET Core Blazor işleme modları makalesinde Blazor bulabilirsiniz.
İ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ülendiği HTML işaretlemesini üretme anlamına gelir.
İstemci tarafı işleme (CSR), son HTML işaretlemesinin istemcideki Blazor 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. Statik istemci tarafı işleme gibi 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. Bu işleme türü için istemci tarafından uygulamanın sunucu tarafından oluşturulan kullanıcı arabirimi için 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 her zaman sunucuda veya istemcide son işleme tarafından takip edilir.
Razor bileşenleri
Blazor uygulamaları genellikle yalnızca bileşenler olarak adlandırılan Razor 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 belgeleri, bileşenleri göstermek ve tartışmak için çeşitli kuralları benimser:
- Proje kodu, dosya yolları ve adları, proje şablonu adları ve diğer özel terimler Birleşik Devletler İngilizcesidir ve genellikle kod çevrelenmiştir.
- 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 göreli URL'lerini kebab-case içindeki bileşenin sınıf adına ayarlar. Ö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, bileşenine
FileUpload3
adresinden/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. Yönerge sıralama hakkında Razor ek bilgiler, ASP.NET Core Razor bileşenlerinin söz dizimi bölümünde bulunurRazor. - Erişim değiştiricileri makale örneklerinde kullanılır. Örneğin,
private
alanlar için varsayılandır ancak bileşen kodunda açıkça bulunur. Örneğinprivate
,maxAllowedFiles
adlı bir alanıprivate int maxAllowedFiles = 3;
olarak bildirmek için belirtilir. - Bileşen parametre değerleri ayrılmış
@
bir Razor simgeyle sonuç verir, ancak gerekli değildir. Değişmez değerler (örneğin, boole değerleri), anahtar sözcükler (örneğin,this
) venull
bileşen parametre değerleri ön@
eklenmediğinden, bu yalnızca bir belge kuralıdır. İsterseniz kendi kodunuz ile sabit değerleri@
ön ekleyebilir. - Ö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:
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
:
Bileşen, etkileşimli işleme modunun bir üst bileşenden devralındığını veya uygulamaya genel olarak uygulandığını varsayar.
@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 başlığını ayarlar.
- Geçerli sayıyı
@currentCount
ile işler.currentCount
,@code
bloğunun C# kodunda tanımlanan bir tamsayı değişkenidir. @code
bloğunda da bulunan vecurrentCount
değişkeninin değerini artıranIncrementCount
yöntemini tetiklemek için bir düğme görüntüler.
İşleme modları
Temel Bilgiler düğümündeki makaleler işleme modları kavramına başvuruda bulunur. Bu konu, makalelerin Temel bilgiler düğümünden sonra görünen Bileşenler düğümündeki ASP.NET Core Blazor işleme modları makalesinde ayrıntılı olarak ele alınmıştır.
Makalelerin bu düğümünde işleme modu kavramlarına yönelik erken başvurular için şu anda yalnızca aşağıdakilere dikkat edin:
Web Uygulamasındaki Blazor her bileşen, kullandığı barındırma modelini, nerede işlendiğini ve sunucuda statik olarak işlenip işlenmediğini, sunucuda kullanıcı etkileşimi için veya istemcide kullanıcı etkileşimi için işlenip işlenmediğini belirlemek için bir işleme modu benimser (genellikle sunucuda oturum açma ile).
Blazor Serverve Blazor WebAssembly .NET 8 öncesi ASP.NET Core sürümlerine yönelik uygulamalar, işleme modlarına değil barındırma modeli kavramlarına bağlı kalır. İşleme modları kavramsal olarak .NET 8 veya sonraki sürümlerde Web Apps'e Blazor uygulanır.
Aşağıdaki tabloda, Bir Blazor Web Uygulamasındaki bileşenleri işlemek Razor için kullanılabilir işleme modları gösterilmektedir. İşleme modları, bileşen örneğinde veya bileşen @rendermode
tanımında yönergesiyle bileşenlere uygulanır. Uygulamanın tamamı için bir işleme modu ayarlamak da mümkündür.
Veri Akışı Adı | Açıklama | İşleme konumu | Etkileşimli |
---|---|---|---|
Statik Sunucu | Statik sunucu tarafı işleme (statik SSR) | Sunucu | Hayır |
Etkileşimli Sunucu | kullanarak etkileşimli sunucu tarafı işleme (etkileşimli SSR) Blazor Server | Sunucu | Evet |
Etkileşimli WebAssembly | † kullanarak Blazor WebAssemblyistemci tarafı işleme (CSR) | İstemci | Evet |
Etkileşimli Otomatik | Başlangıçta kullanarak Blazor Server etkileşimli SSR ve paket indirildikten sonra Blazor sonraki ziyaretlerde CSR | Sunucu, ardından istemci | Evet |
†İstemci tarafı işlemenin (CSR) etkileşimli olduğu varsayılır. "Etkileşimli istemci tarafı işleme" ve "etkileşimli CSR" sektör tarafından veya belgelerde Blazor kullanılmaz.
İşleme modlarıyla ilgili önceki bilgiler, Temel Bilgiler düğümü makalelerini anlamak için bilmeniz gereken tek şeydir. İçindekiler tablosunu aşağı doğru yeni kullanmaya ve makale okumaya yeniysenizBlazor, Bileşenler düğümündeki ASP.NET Core Blazor işleme modları makalesine ulaşana kadar işleme modları hakkında ayrıntılı bilgi tüketmeyi geciktirebilirsiniz.Blazor
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:
Uygulamalar için Blazor WebAssembly .NET API'lerinin alt kümesi
için tarayıcıda Blazor WebAssembly desteklenen belirli .NET API'lerinin seçilmiş listesi kullanılamaz. Ancak, WebAssembly'de desteklenmeyen .NET API'lerini bulmak için açıklama ekli [UnsupportedOSPlatform("browser")]
.NET API'lerinin listesini el ile arayabilirsiniz.
Not
.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).
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 örnekler GitHub 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.
Depodaki uygulamaları örnekler:
- Blazor Web Uygulaması
- Blazor WebAssembly
- Blazor Ile Web Uygulaması EF Core (Entity Framework Core ile ASP.NET Core Blazor (EF Core))
- Blazor ile SignalR Web Uygulaması (ile ASP.NET Core SignalR Blazorkullanın)
- İki Blazor Web Uygulaması ve web (sunucu) API'lerini çağırmak için bir Blazor WebAssembly uygulama (ASP.NET Core Blazor uygulamasından web API'sini çağırma)
- Blazor OIDC ile Web Uygulaması (BFF ve BFF olmayan desenler) (OpenID Connect (OIDC) ile ASP.NET Core Blazor Web Uygulamasının güvenliğini sağlama)
- Blazor WebAssembly kapsamlar etkin günlüğe kaydetme (ASP.NET Çekirdek Blazor günlüğü)
- Blazor WebAssemblyASP.NET Core ile (ASP.NET Core ile Güvenli ASP.NET ÇekirdekBlazor WebAssembly Identity)Identity
- .NET MAUIBlazor HybridWeb Uygulaması ve sınıf kitaplığı (RCL) tarafından sağlanan paylaşılan kullanıcı arabirimine sahip uygulama (Web Uygulaması ile Blazor uygulama oluşturma.NET MAUIBlazor Hybrid)Razor Blazor
Örnek depo iki tür örnek içerir:
- Kod parçacığı örnek uygulamaları, makalelerde görünen kod örneklerini sağlar. Bu uygulamalar derlenebilir ancak çalıştırılabilir uygulamalar olmayabilir. Bu uygulamalar yalnızca makalelerde görünen örnek kodu elde etmek için kullanışlıdır.
- Aşağıdaki senaryolar için derleme ve çalıştırma makalelerine eşlik Blazor edecek uygulamaları örnekler:
- Blazor Server ile EF Core
- SignalR ile Blazor Server ve Blazor WebAssembly
- Blazor WebAssembly kapsamları etkin günlüğe kaydetme
Daha fazla bilgi için bkz Blazor . GitHub deposu README.md dosyası örnekleri.
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
)
Not
.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).
Örnek uygulamaları indirmek için:
- Blazor Örnek deposu ZIP dosyasını indirin.
- Dosyanın sıkıştırmasını açın.
Bayt katları
.NET bayt boyutları, 1024'ün güçlerine göre ondalık olmayan bayt katları için ölçüm ön eklerini kullanır.
Ad (kısaltma) | Size | Örnek |
---|---|---|
Kilobayt (KB) | 1.024 bayt | 1 KB = 1.024 bayt |
Megabayt (MB) | 1.0242 bayt | 1 MB = 1.048.576 bayt |
Gigabayt (GB) | 1.0243 bayt | 1 GB = 1.073.741.824 bayt |
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:
Ç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 altındaki Bu sayfa geri bildirimi düğmesini ile formunu kullanın ve açılış açıklamasını oluştururken meta verileri yerinde bırakın. Meta veriler izleme verileri sağlar ve makalenin yazarına otomatik olarak ping işlemi oluşturur. Konu ürün birimiyle tartışıldıysa, belge sorununun açılış açıklamasına mühendislik sorununun çapraz bağlantısını 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.
Not
Microsoft, Awesome Blazor adresinde ile burada açıklanan ve bağlanan topluluk ürün ve hizmetlerinin çoğuna sahip değildir, bakımını yapmaz veya desteklemez.
ASP.NET Core
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin