Aracılığıyla paylaş

ASP.NET Core Blazor temelleri

  • Makale

Not

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

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.

Önemli

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

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

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

kullanırken Blazor Web App, 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 .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. 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:

  • Ö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:
  • 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-3ulaşı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 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) ve null 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.
  • C# sınıfları anahtar sözcüğünüthis kullanır ve ASP.NET Core çerçevesi mühendislik yönergelerinden farklı olan oluşturucularda atanmış alt çizgi (_) içeren alanlara ön ek eklemekten kaçının.
  • 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.

Bileşen söz dizimi hakkında Razor ek bilgiler, ASP.NET Çekirdek Razor bileşenlerinin söz dizimi bölümünde sağlanırRazor.

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

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 ve currentCount değişkeninin değerini artıran IncrementCount 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:

içindeki Blazor Web App 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 işlenip işlenmeyeceğini veya istemcide kullanıcı etkileşimi için işlenip işlenmediğini belirlemek için bir işleme modu benimser (genellikle sunucuda ön 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 s'ye Blazor Web Appuygulanır.

Aşağıdaki tabloda, içindeki Blazor Web Appbileş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
Etkileşimli Sunucu kullanarak etkileşimli sunucu tarafı işleme (etkileşimli SSR) Blazor Server Sunucu
Etkileşimli WebAssembly † kullanarak Blazor WebAssemblyistemci tarafı işleme (CSR) İstemci
Etkileşimli Otomatik Başlangıçta kullanarak Blazor Server etkileşimli SSR ve paket indirildikten sonra Blazor sonraki ziyaretlerde CSR Sunucu, ardından istemci

†İ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:

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

Ö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 ve depodaki örneklerin listesi için bkz Blazor . Örnekler GitHub deposu README.md 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)

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:

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 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 işlemi oluşturur. 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.

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.