Razor sınıf kitaplığı oluşturulması ve temel kavramlar
- 5 dakika
Web uygulamalarındaki bileşenler, geliştiricilere uygulama genelinde uygulama kullanıcı arabiriminin bölümlerini yeniden kullanma olanağı sağlar. Geliştiriciler Razor sınıf kitaplıklarını kullanarak bu bileşenleri birçok uygulamada paylaşabilir ve yeniden kullanabilir.
Bu ünitede Razor sınıf kitaplığı oluşturmayı öğreneceksiniz. Daha sonra Blazor uygulamalarının özelleştirmesi ve görüntülemesi için işlenmiş ve statik içerik paylaşmak için bu içeriği kullanırsınız.
Razor sınıf kütüphaneleri
Razor sınıf kitaplığı bir .NET proje türüdür. Razor bileşenleri, sayfalar, HTML, Basamaklı Stil Sayfası (CSS) dosyaları, JavaScript, görüntüler ve blazor uygulamasının başvurabileceği diğer statik web içeriğini içerir. Diğer .NET sınıf kitaplığı projelerinde olduğu gibi Razor sınıf kitaplıkları da NuGet paketi olarak paketlenebilir ve NuGet.org gibi NuGet paket depolarında paylaşılabilir.
Razor sınıf kitaplığı oluşturmak için varsayılan şablona bakalım.
Varsayılan şablonu kullanarak proje oluşturma
İsteğe bağlı olarak, Dosya>Yeni Proje'ni seçerek Visual Studio'da Razor sınıf kitaplığı oluşturmaya başlayabilirsiniz.
Aşağıdaki komutu çalıştırarak bir komut satırı arabiriminde projeler de oluşturabilirsiniz:
dotnet new razorclasslib -o MyProjectName
Bu şablon, bileşenlerinizin kullanabileceği birkaç önemli özelliği içeren Component1adlı bir ilk bileşen sunar:
- Component1.razorile aynı klasörde depolanan Component1.razor.cssadlı yalıtılmış basamaklı stil sayfası. Component1.razor.css dosyası, Component1başvuran bir Blazor uygulamasına koşullu olarak eklenir.
- Statik içerik, çalışma zamanında Blazor uygulaması tarafından kullanılabilen ve Component1içinde referans verilen, görüntüler ve JavaScript dosyaları gibi içerikleri içerir. Bu içerik, ASP.NET Core veya Blazor uygulamasındaki wwwroot klasörüyle aynı şekilde davranan bir wwwroot klasöründe teslim edilir.
- Dahil edilen JavaScript dosyasında bulunan işlevleri yürüten .NET kodu.
Sınıf kitaplığı ile Razor sınıf kitaplığı arasındaki farklar
Sınıf kitaplığı ,NET uygulamalarında ortak bir paket teslim yapısıdır ve Razor sınıf kitaplığı, proje dosyasında yapılandırılan diğer birkaç özellik ile benzer bir yapıya sahiptir.
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<SupportedPlatform Include="browser" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
</ItemGroup>
</Project>
- Proje dosyası, Razor içeriğini bir Razor sınıf kitaplığı olarak içerdiğini ve oluşturduğunu belirtmek için Microsoft.NET.Sdk.Razor SDK başvurusunu içerir.
-
SupportedPlatformgirdisi, bu kitaplığın WebAssembly adlı birbrowserplatformunda kullanılabileceğini bildirir. -
PackageReference'danMicrosoft.AspNetCore.Components.Webkitaplığına, çerçeveyle birlikte gönderilen temel Blazor bileşenlerine erişim sağlar. Bu erişim, daha karmaşık bileşenler oluşturmanıza yardımcı olması için bu basit bileşenleri kullanmanıza olanak tanır.
Razor bileşeni içeriği
Bu ilk Razor bileşeni basittir. Yalnızca kısa metin bloğuna sahip bir HTML div öğesi içerir:
<div class="my-component">
This component is defined in the <strong>FirstRazorLibrary</strong> library.
</div>
Bu bileşen, aynı projede teslim edilen bir bileşenin davranmasını beklediğiniz şekilde ona başvuran diğer Blazor bileşenleri ve sayfalarıyla etkileşim kurar. Başka bir ifadeyle, Component1.razor.css dosyasındaki CSS yalıtılmış betiği, application.css dosyasındaki uygulamanın CSS'sinin geri kalanıyla birlikte satır içinde işlenir.
Statik varlık teslimi
wwwroot klasörünün içeriğine, o klasörün diğer içerikleri arasında göreceli olarak başvurabilirsiniz. Ayrıca, bileşenlerin tek tek CSS dosyalarına ( Component1.razor.css gibi) aynı temel klasördeki dosyalar olarak da başvurabilirsiniz. Örneğin, varsayılan CSS iki piksel kesikli kırmızı kenarlık ve wwwroot klasöründekibackground.png görüntüsünü kullanan bir arka plan görüntüsü stili ekler. CSS'den, wwwroot klasöründe bulunan içeriğe yönelik bu başvuruyu yapmak için herhangi bir dosya yolu gerekmez.
.my-component {
border: 2px dashed red;
padding: 1em;
margin: 1em 0;
background-image: url('background.png');
}
wwwroot klasörünün içeriği, barındırılan Blazor uygulamaları tarafından şu biçimde mutlak klasör başvurusuyla başvurulabilecek şekilde kullanılabilir:
/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}
Razor sınıf kitaplığına referans verme
Razor sınıf kitaplığının kitaplığa başvuran blazor uygulamasının yanındaki diskte bulunduğu bir .NET çözümünde, standart Visual Studio Başvuru Ekle iletişim kutusunu kullanarak ve burada gösterildiği gibi .NET CLI add reference komutunu kullanarak Blazor uygulamasını Razor sınıf kitaplığına başvuracak şekilde güncelleştirebilirsiniz:
dotnet add reference ../MyClassLibrary
NuGet paket formunda teslim edilen kitaplıklar için, Visual Studio NuGet paket yükleyicisini veya burada gösterildiği gibi .NET CLI add package komutunu kullanarak bir başvuru ekleyebilirsiniz:
dotnet add package MyClassLibrary