Birden çok barındırılan ASP.NET Core Blazor WebAssembly uygulaması

Makale
02/09/2024

Not

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

Bu makalede, barındırılan Blazor WebAssembly bir uygulamanın birden çok Blazor WebAssembly uygulamayı barındıracak şekilde nasıl yapılandırılır açıklanmaktadır.

Yapılandırma

Bu makalenin barındırma gereksinimlerinizle eşleşen sürümünü seçin; bağlantı noktası/etki alanı barındırma (örneğin, :5001:5002/veya ) veya firstapp.com/secondapp.comyol alt yol barındırma (örneğin, /FirstApp ve )./SecondApp

Geçerli barındırma seçiminde, bu makale bağlantı noktası/etki alanı barındırmayı (örneğin, :5001/:5002 veya firstapp.com/secondapp.com) kapsar.

Aşağıdaki örneklerde:

Barındırılan Blazor WebAssembly uygulamanın proje adı adlı MultipleBlazorAppsbir klasördedirMultipleBlazorApps.
İkinci bir istemci uygulaması eklenmeden önce çözümdeki Client üç proje klasörde, Server MultipleBlazorApps.Server klasörde ve MultipleBlazorApps.Shared klasörde bulunur MultipleBlazorApps.Client Shared.
İlk (ilk) istemci uygulaması, proje şablonundan oluşturulan çözümün Blazor WebAssembly varsayılan istemci projesidir.
çözüme MultipleBlazorApps.SecondClient adlı SecondClientbir klasöre ikinci bir istemci uygulaması eklenir.
İsteğe bağlı olarak, sunucu projesi (MultipleBlazorApps.Server) sayfaları veya görünümleri Sayfalar veya MVC uygulaması olarak Razor hizmet verebilir.
İlk istemci uygulamasına 5001 numaralı bağlantı noktasından veya konağı olan bir tarayıcıdan firstapp.comerişilebilir. İkinci istemci uygulamasına 5002 numaralı bağlantı noktasından veya bir konağı secondapp.comolan bir tarayıcıda erişilebilir.

Geçerli seçimle, bu makale yol alt yolu barındırmayı (örneğin ve /FirstApp /SecondApp) kapsar.

Aşağıdaki örneklerde:

Barındırılan Blazor WebAssembly uygulamanın proje adı adlı MultipleBlazorAppsbir klasördedirMultipleBlazorApps.
İkinci bir istemci uygulaması eklenmeden önce çözümdeki Client üç proje klasörde, Server MultipleBlazorApps.Server klasörde ve MultipleBlazorApps.Shared klasörde bulunur MultipleBlazorApps.Client Shared.
İlk (ilk) istemci uygulaması, proje şablonundan oluşturulan çözümün Blazor WebAssembly varsayılan istemci projesidir.
çözüme MultipleBlazorApps.SecondClient adlı SecondClientbir klasöre ikinci bir istemci uygulaması eklenir.
İsteğe bağlı olarak, sunucu projesi (MultipleBlazorApps.Server) sayfaları veya görünümleri resmi Razor sayfalar veya MVC uygulaması olarak hizmet verebilir.
Her iki istemci uygulaması da proje Properties/launchSettings.json dosyası applicationUrl tarafından MultipleBlazorApps.Server tanımlanan varsayılan bağlantı noktasını kendi değerinde kullanır. İlk istemci uygulamasına alt yoldaki bir tarayıcıda /FirstApp erişilebilir. İkinci istemci uygulamasına alt yoldaki bir tarayıcıda /SecondApp erişilebilir.

Bu makalede gösterilen örnekler için ek yapılandırma gerekir:

Uygulamalara doğrudan örnek konak etki alanlarında firstapp.com ve secondapp.comadresinden erişin.
TLS/HTTPS güvenliğini etkinleştirmek için istemci uygulamalarına yönelik sertifikalar.
Aşağıdaki özellikler için sunucu uygulamasını Sayfalar Razor uygulaması olarak yapılandırma:
- Razor Bileşenlerin sayfalara veya görünümlere tümleştirilmesi.
- Razor Bileşenleri önceden oluşturma.

Önceki yapılandırmalar bu makalenin kapsamı dışındadır. Daha fazla bilgi edinmek için aşağıdaki kaynaklara bakın:

.NET CLI kullanıyorsanız seçeneğini geçirerek veya proje IDE'de Blazor WebAssembly oluşturulduğunda Visual Studio'da ASP.NET Çekirdek Barındırılan onay kutusunu seçerek mevcut barındırılan Blazor WebAssemblyçözümü kullanın veya proje şablonundan yeni bir barındırılan Blazor WebAssembly çözüm oluşturun.-ho|--hosted

Çözüm için adlı MultipleBlazorApps bir klasör kullanın ve projeyi MultipleBlazorAppsadlandırın.

Çözümde adlı SecondClientyeni bir klasör oluşturun. Yeni klasöre adlı MultipleBlazorApps.SecondClientikinci Blazor WebAssembly bir istemci uygulaması ekleyin. Projeyi tek başına Blazor WebAssembly uygulama olarak ekleyin. Tek başına Blazor WebAssembly uygulama oluşturmak için.NET CLI kullanıyorsanız veya Visual Studio kullanıyorsanız ASP.NET Core Hosted onay kutusunu kullanmayın seçeneğini kullanmayın-ho|--hosted.

Projede aşağıdaki değişiklikleri MultipleBlazorApps.SecondClient yapın:

FetchData Bileşeni (Pages/FetchData.razor) klasöründen Client/Pages klasörüne SecondClient/Pages kopyalayın. Tek başına Blazor WebAssembly bir uygulama hava durumu verileri için projenin Server denetleyicisini çağırmadığından, statik bir veri dosyası kullandığından bu adım gereklidir. İkinci istemci uygulaması, bileşeni eklenen projeye kopyalayarak FetchData hava durumu verileri için sunucu API'sine bir web API çağrısı da yapar.
Klasördeki SecondClient/wwwroot/sample-data weather.json dosya kullanılmadığından klasörü silin.

Aşağıdaki tabloda, klasör ve proje eklendikten sonra çözümün SecondClient klasörleri ve MultipleBlazorApps.SecondClient proje adları açıklanmaktadır.

Fiziksel klasör	Proje adı	Açıklama
`Client`	`MultipleBlazorApps.Client`	Blazor WebAssembly istemci uygulaması
`SecondClient`	`MultipleBlazorApps.SecondClient`	Blazor WebAssembly istemci uygulaması
`Server`	`MultipleBlazorApps.Server`	ASP.NET Core sunucu uygulaması
`Shared`	`MultipleBlazorApps.Shared`	Paylaşılan kaynaklar projesi

Proje, MultipleBlazorApps.Server iki Blazor WebAssembly istemci uygulamasına hizmet verir ve MVC denetleyicisi aracılığıyla istemci uygulamalarının FetchData bileşenlerine hava durumu verileri sağlar. İsteğe bağlı olarak, MultipleBlazorApps.Server proje sayfaları veya görünümleri geleneksel Razor Sayfalar veya MVC uygulaması olarak da hizmet verebilir. Sayfaların veya görünümlerin sunulmasını etkinleştirme adımları bu makalenin devamında ele alınmıştır.

Not

Bu makaledeki tanıtımda, proje ve SecondApp MultipleBlazorApps.SecondClient proje için MultipleBlazorApps.Client statik web varlığı yolu adları FirstApp kullanılır. "" ve "FirstAppSecondApp" adları yalnızca tanıtım amaçlıdır. diğer adlar, , Client1Client2/,/21 veya benzer adlandırma düzenleri gibi App1/App2istemci uygulamalarını ayırt etmek için kabul edilebilir.

İstemci uygulamalarına istekleri bir bağlantı noktası veya etki alanıyla yönlendirirken, "FirstApp" ve "SecondApp" statik varlıklar için istekleri yönlendirmek ve yanıtları sunmak için dahili olarak kullanılır ve tarayıcının adres çubuğunda görünmez.

Not

İstekler bu adlar kullanılarak iki istemci uygulamasına yönlendirildiğinden, "FirstApp" ve "SecondApp" de tarayıcının adres çubuğunda görünür. Diğer geçerli URL yol kesimleri desteklenir ve yol kesimlerinin statik web varlıklarını dahili olarak yönlendirmek için kullanılan adlarla kesinlikle eşleşmesi gerekmez. Hem iç statik varlık yönlendirmesi hem de uygulama isteği yönlendirmesi için "FirstApp" ve "SecondApp" kullanmak yalnızca bu makalenin örneklerinde toplanmak içindir.

İlk istemci uygulamasının proje dosyasında ()MultipleBlazorApps.Client.csproj değerine sahip bir FirstApp özelliği <PropertyGroup> ekleyerek <StaticWebAssetBasePath> projenin statik varlıkları için temel yolu ayarlayın:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient Uygulamanın proje dosyasında (MultipleBlazorApps.SecondClient.csproj):

<StaticWebAssetBasePath> değerine SecondAppsahip bir <PropertyGroup> özelliği ekleyin:
```
<StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
```

projesi için MultipleBlazorApps.Shared bir <ItemGroup>proje başvurusu ekleyin:

<ItemGroup>
  <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
</ItemGroup>

Sunucu uygulamasının proje dosyasında ()Server/MultipleBlazorApps.Server.csproj içinde eklenen MultipleBlazorApps.SecondClient istemci uygulaması için bir <ItemGroup>proje başvurusu oluşturun:

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

Sunucu uygulamasının Properties/launchSettings.json dosyasında, profilin Kestrel (MultipleBlazorApps.Server) öğesini 5001 ve 5002 bağlantı noktalarındaki istemci uygulamalarına erişecek şekilde yapılandırınapplicationUrl. Yerel ortamınızı örnek etki alanlarını kullanacak şekilde yapılandırırsanız, url'leri applicationUrl bağlantı noktalarını kullanabilir firstapp.com ve secondapp.com kullanamaz.

Not

Bu tanıtımda bağlantı noktalarının kullanılması, web tarayıcılarının istemci uygulamalarına ana bilgisayar yapılandırmaları ve secondapp.comaracılığıyla erişebilmesi için yerel bir barındırma ortamı yapılandırmaya gerek kalmadan yerel bir tarayıcıda istemci projelerine firstapp.com erişim sağlar. Üretim senaryolarında tipik bir yapılandırma, istemci uygulamalarını ayırt etmek için alt etki alanlarını kullanmaktır.

Örneğin:

Bağlantı noktaları bu gösterimin yapılandırmasından bırakılır.
Konaklar, site ziyaretçileri ve admin.contoso.com yöneticiler gibi alt etki alanları kullanacak şekilde www.contoso.com değiştirilir.
Ek istemci uygulamaları için ek konaklar eklenebilir ve sunucu uygulaması aynı zamanda sayfalar veya görünümler sunan bir Sayfalar veya MVC uygulamasıysa en az bir Razor konak daha gerekir.

Sunucu uygulamasından sayfa veya görünümler sunmayı planlıyorsanız, dosyada Properties/launchSettings.json aşağıdaki applicationUrl ayarı kullanın ve bu ayar aşağıdaki erişime izin verir:

İsteğe bağlı olarak, Razor Sayfalar veya MVC uygulaması (MultipleBlazorApps.Server proje) 5000 numaralı bağlantı noktasındaki isteklere yanıt verir.
İlk istemci (MultipleBlazorApps.Client proje) için isteklere yanıtlar 5001 numaralı bağlantı noktasındadır.
İkinci istemciye (MultipleBlazorApps.SecondClient proje) yönelik isteklere yanıtlar 5002 numaralı bağlantı noktasındadır.

"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

Sunucu uygulamasının sayfalara veya görünümlere hizmet vermesini ve yalnızca istemci uygulamalarına hizmet vermesini Blazor WebAssembly planlamıyorsanız, aşağıdaki erişime izin veren aşağıdaki ayarı kullanın:

İlk istemci uygulaması 5001 numaralı bağlantı noktasında yanıt verir.
İkinci istemci uygulaması 5002 numaralı bağlantı noktasında yanıt verir.

"applicationUrl": "https://localhost:5001;https://localhost:5002",

Sunucu uygulamasının Program.cs dosyasında, çağrısından UseHttpsRedirectionsonra görüntülenen aşağıdaki kodu kaldırın:

Sunucu uygulamasından sayfa veya görünümler göndermeyi planlıyorsanız aşağıdaki kod satırlarını silin:
```
- app.UseBlazorFrameworkFiles();
```
```
- app.MapFallbackToFile("index.html");
```
Sunucu uygulamasının yalnızca istemci uygulamalarına hizmet vermesini Blazor WebAssembly planlıyorsanız aşağıdaki kodu silin:
```
- app.UseBlazorFrameworkFiles();

...

- app.UseRouting();

- app.MapRazorPages();
- app.MapControllers();
- app.MapFallbackToFile("index.html");
```
Statik Dosya Ara Yazılımını yerinde bırakın:
```
app.UseStaticFiles();
```

İstekleri istemci uygulamalarına eşleyen ara yazılım ekleyin. Aşağıdaki örnek, istek bağlantı noktası ilk istemci uygulaması için 5001 veya ikinci istemci uygulaması için 5002 olduğunda ya da firstapp.com istek ana bilgisayarı ilk istemci uygulaması veya secondapp.com ikinci istemci uygulaması için olduğunda ara yazılımı çalışacak şekilde yapılandırılır.

Not

Yerel bir sistemdeki konakların (firstapp.com/secondapp.com) yerel bir tarayıcıyla kullanılması, bu makalenin kapsamı dışında ek yapılandırma gerektirir. Bu senaryonun yerel testi için bağlantı noktalarını kullanmanızı öneririz. Tipik üretim uygulamaları, site ziyaretçileri ve admin.contoso.com yöneticiler gibi www.contoso.com alt etki alanları kullanacak şekilde yapılandırılır. Bu makalenin kapsamı dışında olan ve kullanılan teknolojilere bağlı olan uygun DNS ve sunucu yapılandırmasıyla, uygulama aşağıdaki kodda adlandırılan konaklarda isteklere yanıt verir.

satırından app.UseBlazorFrameworkFiles(); satırı Program.cskaldırdığınız yere aşağıdaki kodu yerleştirin:
```
app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || 
    ctx.Request.Host.Equals("firstapp.com"), first =>
{
    first.Use((ctx, nxt) =>
    {
        ctx.Request.Path = "/FirstApp" + ctx.Request.Path;
        return nxt();
    });

    first.UseBlazorFrameworkFiles("/FirstApp");
    first.UseStaticFiles();
    first.UseStaticFiles("/FirstApp");
    first.UseRouting();

    first.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", 
            "FirstApp/index.html");
    });
});

app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || 
    ctx.Request.Host.Equals("secondapp.com"), second =>
{
    second.Use((ctx, nxt) =>
    {
        ctx.Request.Path = "/SecondApp" + ctx.Request.Path;
        return nxt();
    });

    second.UseBlazorFrameworkFiles("/SecondApp");
    second.UseStaticFiles();
    second.UseStaticFiles("/SecondApp");
    second.UseRouting();

    second.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", 
            "SecondApp/index.html");
    });
});
```
Uyarı

ve RequireHostgibi HttpRequest.Host Konak üst bilgisini kullanan API, istemciler tarafından olası kimlik sahtekarlığına tabidir.

Konak ve bağlantı noktası kimlik sahtekarlığına engel olmak için aşağıdaki yaklaşımlardan birini kullanın:
- BağlantıConnectionInfo.LocalPort noktalarının denetlendiği yeri () kullanın HttpContext.Connection .
- Konak filtrelemeyi kullanın.

İstekleri istemci uygulamalarına eşleyen ara yazılım ekleyin. Aşağıdaki örnek, ara yazılımı, istek alt yolu /FirstApp ilk istemci uygulaması veya /SecondApp ikinci istemci uygulaması için olduğunda çalışacak şekilde yapılandırılır.

satırından app.UseBlazorFrameworkFiles(); satırı Program.cskaldırdığınız yere aşağıdaki kodu yerleştirin:

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", 
    StringComparison.OrdinalIgnoreCase), first =>
{
    first.UseBlazorFrameworkFiles("/FirstApp");
    first.UseStaticFiles();
    first.UseStaticFiles("/FirstApp");
    first.UseRouting();

    first.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}",
            "FirstApp/index.html");
    });
});

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", 
    StringComparison.OrdinalIgnoreCase), second =>
{
    second.UseBlazorFrameworkFiles("/SecondApp");
    second.UseStaticFiles();
    second.UseStaticFiles("/SecondApp");
    second.UseRouting();

    second.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}",
            "SecondApp/index.html");
    });
});

Her istemci uygulamasında temel yolu ayarlayın:

İlk istemci uygulamasının index.html dosyasında ()Client/wwwroot/index.html etiket değerini alt yolu yansıtacak şekilde güncelleştirin <base> . Sondaki eğik çizgi gereklidir:
```
<base href="/FirstApp/" />
```
İkinci istemci uygulamasının index.html dosyasında ()SecondClient/wwwroot/index.html etiket değerini alt yolu yansıtacak şekilde güncelleştirin <base> . Sondaki eğik çizgi gereklidir:
```
<base href="/SecondApp/" />
```

hakkında UseStaticFilesdaha fazla bilgi için bkz . ASP.NET Core Blazor statik dosyaları.

ve MapFallbackToFilehakkında UseBlazorFrameworkFiles daha fazla bilgi için aşağıdaki kaynaklara bakın:

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

İstemci uygulamalarından /WeatherForecast sunucu API'sine gönderilen istekler, isteği hangi istemci uygulamasının yaptığına /FirstApp/WeatherForecast bağlıdır /SecondApp/WeatherForecast . Bu nedenle, sunucu API'sinden hava durumu verilerini döndüren denetleyici yolları, yol kesimlerini dahil etmek için bir değişiklik gerektirir.

Sunucu uygulamasının hava durumu tahmin denetleyicisinde (Controllers/WeatherForecastController.cs ) için var olan yolu ([Route("[controller]")]) WeatherForecastController istemci isteği yollarını dikkate alan aşağıdaki yollarla değiştirin:

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

Sunucu uygulamasından sayfa göndermeyi planlıyorsanız, sunucu uygulamasının Pages klasörüne bir IndexRazor sayfa ekleyin:

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Not

Yukarıdaki Index sayfa, yalnızca gösterim amacıyla en düşük örnektir. Uygulama düzen, stiller, betikler ve içeri aktarmalar gibi ek Razor Sayfalar varlıkları gerektiriyorsa, bunları Sayfalar proje şablonundan oluşturulan bir uygulamadan Razor alın. Daha fazla bilgi için bkz. ASP.NET Core'da Sayfalara Razor Giriş.

MVC görünümlerini sunucu uygulamasından sunmak istiyorsanız bir Index görünüm ve denetleyici Home ekleyin:

Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index() => View();
}

Not

Yukarıdaki Index görünüm, yalnızca gösterim amacıyla en düşük örnektir. Uygulama düzen, stiller, betikler ve içeri aktarmalar gibi ek MVC varlıkları gerektiriyorsa, bunları MVC proje şablonundan oluşturulan bir uygulamadan alın. Daha fazla bilgi için bkz . ASP.NET Core MVC kullanmaya başlama.

İstemci uygulamalarından Razor herhangi birinin bileşenlerini sunucu uygulamasının sayfalarında veya görünümlerinde kullanma hakkında daha fazla bilgi için bkz . Prerender ve ASP.NET Core Razor bileşenlerini tümleştirme.

Uygulamayı çalıştırma

MultipleBlazorApps.Server Projeyi çalıştırın:

konumundaki ilk istemci uygulamasına https://localhost:5001erişin.
eklenen istemci uygulamasına adresinden https://localhost:5002erişin.
Sunucu uygulaması sayfalara veya görünümlere hizmet vermek üzere yapılandırılmışsa sayfasından veya görünümünden sayfaya veya görünüme https://localhost:5000erişinIndex.

konumundaki ilk istemci uygulamasına https://localhost:{DEFAULT PORT}/FirstApperişin.
eklenen istemci uygulamasına adresinden https://localhost:{DEFAULT PORT}/SecondApperişin.
Sunucu uygulaması sayfalara veya görünümlere hizmet vermek üzere yapılandırılmışsa sayfasından veya görünümünden sayfaya veya görünüme https://localhost:{DEFAULT PORT}erişinIndex.

Yukarıdaki örnek URL'lerde yer tutucu, {DEFAULT PORT} proje Properties/launchSettings.json dosyasında applicationUrl kendi değerinde tanımlanan MultipleBlazorApps.Server varsayılan bağlantı noktasıdır.

Önemli

Uygulamayı (veya dotnet run) komutuyla dotnet watch (.NET CLI) çalıştırırken, komut kabuğunun çözümün Server klasöründe açık olduğunu onaylayın.

Uygulamayı çalıştırmak için Visual Studio'nun başlangıç düğmesini kullanırken, projenin başlangıç projesi olarak ayarlandığını MultipleBlazorApps.Server onaylayın (Çözüm Gezgini vurgulanır).

Statik varlıklar

Bir varlık bir istemci uygulamasının wwwroot klasöründeyken, bileşenlerde statik varlık istek yolunu sağlayın:

<img alt="..." src="{PATH AND FILE NAME}" />

{PATH AND FILE NAME} yer tutucusu, wwwroot altındaki yol ve dosya adıdır.

Örneğin, klasöründeki wwwrootbir Jeep görüntüsünün vehicle (jeep-yj.png) kaynağı:

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

Razor sınıf kitaplığı (RCL) desteği

Sınıf kitaplığını Razor (RCL) çözüme yeni bir proje olarak ekleyin:

Çözüm Gezgini'da çözüme sağ tıklayın ve Yeni Proje Ekle'yi>seçin.
Razor Projeyi oluşturmak için Sınıf Kitaplığı proje şablonunu kullanın. Bu bölümdeki örneklerde, RCL'nin derleme adı ComponentLibraryolan proje adı kullanılır. Destek sayfaları ve görünümleri onay kutusunu seçmeyin.

Barındırılan Blazor WebAssembly her istemci uygulaması için, Çözüm Gezgini'daki her istemci projesine sağ tıklayıp Proje Başvurusu Ekle'yi> seçerek RCL projesi için bir proje başvurusu oluşturun.

aşağıdaki yaklaşımlardan biriyle istemci uygulamalarında RCL'deki bileşenleri kullanın:

RCL'nin ad alanı için bileşenin en üstüne bir @using yönerge yerleştirin ve bileşen için söz dizimi ekleyin Razor . Aşağıdaki örnek, derleme adına ComponentLibrarysahip bir RCL içindir:
```
@using ComponentLibrary

...

<Component1 />
```
RCL'nin ad alanını bileşenin Razor söz dizimi ile birlikte sağlayın. Bu yaklaşım, bileşen dosyasının en üstünde bir @using yönerge gerektirmez. Aşağıdaki örnek, derleme adına ComponentLibrarysahip bir RCL içindir:
```
<ComponentLibrary.Component1 />
```

Not

Bir @using yönerge de her istemci uygulamasının _Import.razor dosyasına yerleştirilebilir ve bu da RCL'nin ad alanını bu projedeki bileşenler için genel olarak kullanılabilir hale getirir.

RCL klasöründe başka bir statik varlık varsawwwroot, ASP.NET Core ile sınıf kitaplıklarında yeniden kullanılabilir Razor kullanıcı arabirimi kılavuzuna göre istemci uygulamasındaki statik varlığa başvurun:

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

Yer {PACKAGE ID} tutucu RCL'nin paket kimliğidir. Proje dosyasında <PackageId> belirtilmediyse varsayılan olarak projenin derleme adı paket kimliği olur. Yer {PATH AND FILE NAME} tutucu, altında wwwrootyol ve dosya adıdır.

Aşağıdaki örnekte RCL klasörünün klasöründeki vehicle jeep görüntüsü (jeep-yj.png) için işaretleme gösterilmektedirwwwroot. Aşağıdaki örnek, derleme adına ComponentLibrarysahip bir RCL içindir:

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

Aracılığıyla paylaş