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 Bileşenler makalelerinde ayrıntılı olarak ele alınan temel Razor 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ü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:
  • 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 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:

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

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

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.

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.

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)

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

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

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.