ASP.NET Core'de sınıf Razor kitaplığı projesini kullanarak yeniden kullanılabilir kullanıcı arabirimi ASP.NET Core

Makale
10/14/2021
Okumak için 6 dakika

Razorgörünümler, sayfalar, denetleyiciler, sayfa Razor modelleri, bileşenler,Görünüm bileşenleri ve veri modelleri bir sınıf Razor kitaplığında (RCL) yerleşik olarak kullanılabilir. RCL paket olabilir ve yeniden kullanılabilir. Uygulamalar RCL'yi içerebilir ve içerdiği görünümleri ve sayfaları geçersiz kılamaz. Hem web uygulamasında hem de RCL'de bir görünüm, kısmi görünüm veya Sayfa bulunursa, web uygulamasındaki işaretleme Razor Razor .cshtml (dosya) önceliklidir.

Örnek kodu görüntüleme veya indirme ( nasılindir)

Kullanıcı arabirimi içeren bir sınıf kitaplığı Razor oluşturma

Visual Studio
.NET Core CLI

Yeni Visual Studio oluştur'a seçin.
Sonraki Razor sınıf kitaplığını > seçin.
Kitaplığı (örneğin, " Razor ClassLib"), > oluşturun. > Oluşturulan görünüm kitaplığıyla dosya adı çakışması önlemek için kitaplık adının ile bitmay olduğundan emin .Views olun.
Hedef Çerçeve'yi seçin. Görünümleri ☑ için Destek sayfalarını ve görünümlerini kontrol edin. Varsayılan olarak yalnızca Razor bileşenler de desteklemektedir. Oluştur’u seçin.

Sınıf Razor kitaplığı (RCL) şablonu varsayılan olarak bileşen Razor geliştirmeyi varsayılan olarak kullanır. Destek sayfaları ve görünümleri seçeneği sayfaları ve görünümleri destekler.

Komut satırdan komutunu dotnet new razorclasslib çalıştırın. Örneğin:

dotnet new razorclasslib -o RazorUIClassLib

Sınıf Razor kitaplığı (RCL) şablonu varsayılan olarak bileşen Razor geliştirmeyi varsayılan olarak kullanır. Sayfalar ve --support-pages-and-views görünümler için destek sağlamak için seçeneğini ( dotnet new razorclasslib --support-pages-and-views ) iletir.

Daha fazla bilgi için bkz. dotnet new. Oluşturulan görünüm kitaplığıyla dosya adı çakışması önlemek için kitaplık adının ile bitmay olduğundan emin .Views olun.

RazorRCL'ye dosya ekleme.

Şablon ASP.NET Core RCL içeriğinin klasöründe olduğunu Areas varsayıyor. yerine içeriğini ortaya çıkaran bir RCL oluşturmak için bkz. RCL Sayfaları ~/Pages ~/Areas/Pages düzeni.

RCL içeriğine başvuru

RCL'ye şu şekilde başvurul olabilir:

NuGet paketi. Bkz. NuGet paketleri oluşturma ve dotnet add package ve Create and publish a NuGet package.
{ProjectName}.csproj. Bkz. dotnet-add reference.

Görünümleri, kısmi görünümleri ve sayfaları geçersiz kılma

Hem web uygulamasında hem de RCL'de bir görünüm, kısmi görünüm veya Sayfa bulunursa, web uygulamasındaki işaretleme Razor Razor .cshtml (dosya) önceliklidir. Örneğin, WebApp1/Areas/MyFeature/Pages/Page1.cshtml WebApp1'e ekleyin ve WebApp1'de Page1 RCL'de Page1'den önceliklidir.

Örnek indirmede, önceliğe WebApp1/Areas/MyFeature2 test etmek için olarak yeniden WebApp1/Areas/MyFeature adlandıryın.

Kısmi RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml görünümü'ne WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml kopyalayın. Işaretlemeyi yeni konumu belirtmek için güncelleştirin. Uygulamanın kısmi sürümünün çalıştığını doğrulamak için uygulamayı derleme ve çalıştırma.

RCL Sayfaları düzeni

RCL içeriğine web uygulamasının klasörünün parçası gibi başvuru yapmak Pages için RCL projesini aşağıdaki dosya yapısıyla oluşturun:

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

İki RazorUIClassLib/Pages/Shared kısmi dosya içerdiğini varsayalım: _Header.cshtml ve _Footer.cshtml . Etiketler <partial> dosyaya _Layout.cshtml eklenebilir:

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

Konak _ViewStart.cshtml web uygulamasından dosyayı kullanmak için dosyayı RCL Pages _Layout.cshtml projesinin klasörüne ekleyin:

@{
    Layout = "_Layout";
}

Statik varlıklarla RCL oluşturma

RCL, RCL veya RCL'nin tüketen uygulaması tarafından başvurulan yardımcı statik varlıklar gerektirir. ASP.NET Core, tüketen bir uygulama tarafından kullanılabilen statik varlıkları içeren RCL'ler oluşturulmasına olanak sağlar.

Bir RCL'nin parçası olarak yardımcı varlıkları dahil etmek için, sınıf kitaplığında bir klasör wwwroot oluşturun ve gerekli dosyaları bu klasöre dahil edin.

Bir RCL'yi paketlerken, klasördeki wwwroot tüm yardımcı varlıklar pakete otomatik olarak dahil edilir.

komut dotnet pack satırı sürümü yerine NuGet.exe nuget pack kullanın.

Statik varlıkları dışlama

Statik varlıkları dışlamak için proje dosyasındaki özellik $(DefaultItemExcludes) grubuna istenen dışlama yolunu ekleyin. Girişleri noktalı virgülle ( ) ; ayırın.

Aşağıdaki örnekte, klasördeki stil sayfası statik varlık olarak kabul alınmaz ve yayımlanmış lib.css wwwroot RCL'ye dahil değildir:

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Typescript tümleştirmesi

TypeScript dosyalarını bir RCL'ye eklemek için:

TypeScript dosyalarını ( .ts ) klasörün dışına wwwroot yer. Örneğin, dosyaları bir klasöre Client yer.
Klasör için TypeScript derleme çıkışını wwwroot yapılandırma. Proje TypescriptOutDir dosyasındaki içinde PropertyGroup özelliğini ayarlayın:
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```

Proje dosyasına aşağıdaki hedefi içine ekleyerek TypeScript hedefini ResolveCurrentProjectStaticWebAssets hedefin bağımlılığı PropertyGroup olarak dahil etmek:

<ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

Başvurulan RCL'den içerik tüketme

RCL'nin klasörüne dahil edilen dosyalar, ön ek altında wwwroot RCL'ye veya tüketen uygulamaya açık _content/{PACKAGE ID}/ olur. Örneğin, proje dosyasında belirtilmemiş ve derleme adına sahip bir kitaplık, statik içerik yolu Razor.Class.Lib <PackageId> ile sonuç _content/Razor.Class.Lib/ verir. Bir NuGet paketi üretiliyorsa ve derleme adı paket kimliğiyle ( kitaplığın proje dosyasındaki) aynı değilse, için proje dosyasında belirtilen <PackageId> paket kimliğini {PACKAGE ID} kullanın.

Tüketen uygulama , , ve diğer HTML etiketleriyle kitaplık tarafından <script> <style> sağlanan statik <img> varlıklara başvurur. Tüketen uygulamanın içinde statik dosya desteğinin etkinleştirilmiş olması Startup.Configure gerekir:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

Derleme çıkışından tüketen uygulamayı ( dotnet run ) çalıştırarak statik web varlıkları Geliştirme ortamında varsayılan olarak etkinleştirilir. Derleme çıkışından çalıştırarak diğer ortamlardaki varlıkları desteklemek için içinde UseStaticWebAssets konak oluşturucuda çağrısı yapın: Program.cs

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}

Yayımlanan UseStaticWebAssets çıktıdan ( ) bir uygulama çalıştırıldıken çağrısı dotnet publish gerekmez.

Çok projeli geliştirme akışı

Tüketen uygulama çalıştır olduğunda:

RCL'de varlıklar özgün klasörlerinde kalır. Varlıklar, tüketen uygulamaya taşınmaz.
RCL'nin klasöründeki tüm değişiklik, RCL yeniden oluşturulduktan sonra ve tüketen uygulamayı yeniden oluşturmadan tüketen wwwroot uygulamaya yansıtıldı.

RCL dönüştürülebilir olduğunda, statik web varlığı konumlarını açıklayan bir bildirim üretir. Tüketen uygulama, başvurulan projelerden ve paketlerden varlıkları tüketmek için bildirimi çalışma zamanında okur. Bir RCL'ye yeni bir varlık ekleniyorsa, tüketen bir uygulamanın yeni var buraya erişmesi için önce RCL'nin bildirimini güncelleştirmek için yeniden oluşturulmuş olması gerekir.

Yayımlama

Uygulama yayımlanırken, başvurulan tüm projelerden ve paketlerden yardımcı varlıklar, altında yayımlanan wwwroot uygulamanın klasörüne _content/{PACKAGE ID}/ kopyalanır. Bir NuGet paketi oluştururken ve derleme adı paket kimliğiyle ( kitaplığın proje dosyasındaki) aynı değilse, yayımlanan varlıklar için klasörü incelerken proje dosyasında belirtilen paket kimliğini <PackageId> {PACKAGE ID} wwwroot kullanın.

Ek kaynaklar

Razorsınıf kitaplıklarından ASP.NET Core bileşenleri Razor kullanma

Örnek kodu görüntüleme veya indirme ( nasılindir)

Kullanıcı arabirimi içeren bir sınıf kitaplığı Razor oluşturma

Visual Studio
.NET Core CLI

Dosya Visual Studio Yeni dosya'Project. >
Web ASP.NET Core'ı seçin.
Kitaplığı (örneğin, " Razor ClassLib") > tamam. Oluşturulan görünüm kitaplığıyla dosya adı çakışması önlemek için kitaplık adının ile bitmay olduğundan emin .Views olun.
2.1 veya ASP.NET Core'nin seçili olduğunu doğrulayın.
Sınıf Razor Kitaplığı Tamam'ı > seçin.

RCL aşağıdaki proje dosyasına sahip:

<Project Sdk="Microsoft.NET.Sdk.Razor">

    <PropertyGroup>
        <TargetFramework>netcoreapp3.1</TargetFramework>
        <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
    </PropertyGroup>

    <ItemGroup>
        <FrameworkReference Include="Microsoft.AspNetCore.App" />
    </ItemGroup>


</Project>

Komut satırından komutunu çalıştırın dotnet new razorclasslib . Örneğin:

dotnet new razorclasslib -o RazorUIClassLib

Daha fazla bilgi için bkz. DotNet New. Oluşturulan görünüm kitaplığıyla bir dosya adı çarpışmasını önlemek için, kitaplık adının bitmediğinden emin olun .Views .

RazorRCL 'ye dosya ekleyin.

ASP.NET Core şablonları rcl içeriğinin klasörde olduğunu varsayar Areas . ' De içeriğini kullanıma sunan bir RCL oluşturmak için RCL Pages düzenine bakın ~/Pages ~/Areas/Pages .

RCL içeriğine başvur

RCL 'ye şu şekilde başvurulabilir:

NuGet paketi. bkz. NuGet paketleri oluşturma ve dotnet paket ekleme ve bir NuGet paketi oluşturma ve yayımlama.
{ProjectName}.csproj. Bkz. DotNet-başvuru Ekle.

İzlenecek yol: bir RCL projesi oluşturma ve bir Razor Sayfalar projesinden kullanma

Tüm projeyi indirebilir ve oluşturmak yerine test edebilirsiniz. Örnek indirme, projenin test olmasını kolaylaştıran ek kod ve bağlantılar içerir. bu GitHub sorunu , karşıdan yükleme örnekleri ve adım adım yönergeler hakkında açıklamalarınızla birlikte geri bildirimde bulunabilir.

İndirme uygulamasını test etme

Tamamlanmış uygulamayı indirmediyseniz ve gözden geçirme projesi oluşturmak istiyorsanız, sonraki bölümeatlayın.

Visual Studio
.NET Core CLI

.slnDosyayı Visual Studio açın. Uygulamayı çalıştırın.

Dizindeki bir komut isteminden cli RCL ve Web uygulamasını oluşturun.

dotnet build

WebApp1Dizine gidin ve uygulamayı çalıştırın:

dotnet run

Test WebApp1 içindeki yönergeleri izleyin

RCL oluşturma

Bu bölümde bir RCL oluşturulur. Razor dosyalar RCL 'ye eklenir.

Visual Studio
.NET Core CLI

RCL projesini oluşturun:

Visual Studio dosya menüsünden yeni > Project' nı seçin.
ASP.NET Core Web uygulaması' nı seçin.
Uygulamayı Razor uıısslib olarak adlandırın > .
ASP.NET Core 2,1 veya sonraki bir sürümü seçildiğini doğrulayın.
Razor Sınıf kitaplığı > Tamam ' ı seçin.
RazorAdlı kısmi bir görünüm dosyası ekleyin RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml .

Komut satırından aşağıdakileri çalıştırın:

dotnet new razorclasslib -o RazorUIClassLib
dotnet new page -n _Message -np -o RazorUIClassLib/Areas/MyFeature/Pages/Shared
dotnet new viewstart -o RazorUIClassLib/Areas/MyFeature/Pages

Önceki komutlar:

RazorUIClassLibRCL 'yi oluşturur.
Bir Razor _Message sayfası oluşturur ve RCL 'ye ekler. -npParametresi, sayfasını bir olmadan oluşturur PageModel .
Bir _ViewStart.cshtml dosya oluşturur ve RCL 'ye ekler.

_ViewStart.cshtmlDosya, Razor Sayfalar projesinin yerleşimini (bir sonraki bölüme eklenen) kullanmak için gereklidir.

RazorProjeye dosya ve klasör ekleme

İçindeki biçimlendirmeyi RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml aşağıdaki kodla değiştirin:
```
<h3>_Message.cshtml partial view.</h3>

<p>RazorUIClassLib\Areas\MyFeature\Pages\Shared\_Message.cshtml</p>
```
İçindeki biçimlendirmeyi RazorUIClassLib/Areas/MyFeature/Pages/Page1.cshtml aşağıdaki kodla değiştirin:
```
@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h2>Hello from a Razor UI class library!</h2>
<p> From  RazorUIClassLib\Areas\MyFeature\Pages\Page1.cshtml</p>

<partial name="_Message" />
```
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers kısmi görünümü kullanmak için gerekir ( <partial name="_Message" /> ). Yönergesini dahil etmek yerine @addTagHelper bir _ViewImports.cshtml dosya ekleyebilirsiniz. Örneğin:
```
dotnet new viewimports -o RazorUIClassLib/Areas/MyFeature/Pages
```
Hakkında daha fazla bilgi için _ViewImports.cshtml bkz. paylaşılan yönergeleri içeri aktarma
Derleyici hatası olmadığını doğrulamak için sınıf kitaplığı oluşturun:
```
dotnet build RazorUIClassLib
```

Derleme çıkışı ve içerir RazorUIClassLib.dll RazorUIClassLib.Views.dll . RazorUIClassLib.Views.dll derlenen içeriği içerir Razor .

RazorBir sayfalar projesinden UI kitaplığını kullanma Razor

Visual Studio
.NET Core CLI

RazorSayfalar Web uygulaması oluşturma:

Çözüm Gezgini > yeni Project eklemek > çözüme sağ tıklayın.
ASP.NET Core Web uygulaması' nı seçin.
Uygulamayı WebApp1 olarak adlandırın.
ASP.NET Core 2,1 veya sonraki bir sürümü seçildiğini doğrulayın.
Web uygulaması > Tamam ' ı seçin.
Çözüm Gezgini, WebApp1 ' ye sağ tıklayın ve Başlangıç Project olarak ayarla' yı seçin.
Çözüm Gezgini, WebApp1 ' ye sağ tıklayın ve > bağımlılıklar Project oluştur ' u seçin.
Razor Uıısslib öğesini WebApp1 bağımlılığı olarak denetleyin.
Çözüm Gezgini, WebApp1 ' a sağ tıklayın ve başvuru Ekle ' yi seçin > .
Başvuru Yöneticisi iletişim kutusunda Razor uıısslib Tamam ' ı işaretleyin > .

Uygulamayı çalıştırın.

Sayfalar Razor Razor uygulaması ve RCL içeren bir sayfa Web uygulaması ve bir çözüm dosyası oluşturun:

dotnet new webapp -o WebApp1
dotnet new sln
dotnet sln add WebApp1
dotnet sln add RazorUIClassLib
dotnet add WebApp1 reference RazorUIClassLib

Web uygulamasını derleyin ve çalıştırın:

cd WebApp1
dotnet run

Test WebApp1

/MyFeature/Page1UI sınıf kitaplığının kullanımda olduğunu doğrulamak için öğesine gidin Razor .

Görünümleri, kısmi görünümleri ve sayfaları geçersiz kıl

Hem Web uygulamasında hem de RCL 'de bir görünüm, kısmi görünüm veya Razor sayfa bulunduğunda, Razor Web uygulamasındaki biçimlendirme ( .cshtml dosya) öncelik kazanır. Örneğin, WebApp1/Areas/MyFeature/Pages/Page1.cshtml WebApp1 öğesine ekleyin ve WebApp1 Içindeki Sayfa1, RCL 'Deki Sayfa1 'ten öncelikli olur.

Örnek indirme sırasında, WebApp1/Areas/MyFeature2 WebApp1/Areas/MyFeature önceliğini test etmek için olarak yeniden adlandırın.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtmlKısmi görünümü içine kopyalayın WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml . Biçimlendirmeyi yeni konumu belirtecek şekilde güncelleştirin. Uygulamanın kısmi sürümünün kullanılmakta olduğunu doğrulamak için uygulamayı derleyin ve çalıştırın.

RCL sayfaları düzeni

RCL içeriğine, Web uygulamasının klasörünün bir parçası olmasına rağmen başvurmak için Pages , aşağıdaki dosya YAPıSıYLA RCL projesini oluşturun:

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

RazorUIClassLib/Pages/Sharedİki kısmi dosya içerdiğini varsayalım: _Header.cshtml ve _Footer.cshtml . <partial>Etiketler _Layout.cshtml dosyaya eklenebilir:

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

Razorgörünümler, sayfalar, denetleyiciler, sayfa modelleri, Razor Bileşenler, Görünüm bileşenlerive veri modelleri bir Razor sınıf kitaplığı (RCL) halinde oluşturulabilir. RCL paketlenebilir ve yeniden kullanılabilir. Uygulamalar RCL 'yi içerebilir ve içerdiği görünümleri ve sayfaları geçersiz kılabilir. Hem Web uygulamasında hem de RCL 'de bir görünüm, kısmi görünüm veya Razor sayfa bulunduğunda, Razor Web uygulamasındaki biçimlendirme ( .cshtml dosya) öncelik kazanır.

Örnek kodu görüntüleme veya indirme (nasıl indirileceği)

UI içeren bir sınıf kitaplığı oluşturma Razor

Visual Studio
.NET Core CLI

Visual Studio yeni bir proje oluştur' u seçin.
Razor Sınıf kitaplığı > İleri ' yi seçin.
Kitaplığı adlandırın (örneğin, " Razor ClassLib"), > Oluştur. Oluşturulan görünüm kitaplığıyla bir dosya adı çarpışmasını önlemek için, kitaplık adının bitmediğinden emin olun .Views .
Görünümleri desteketmeniz gerekiyorsa destek sayfaları ve görünümleri ' ni seçin. Varsayılan olarak, yalnızca Razor Sayfalar desteklenir. Oluştur’u seçin.

RazorSınıf kitaplığı (RCL) şablonu Razor Varsayılan olarak varsayılan olarak bileşen geliştirme olur. Destek sayfaları ve görünümleri seçeneği sayfaları ve görünümleri destekler.

Komut satırından komutunu çalıştırın dotnet new razorclasslib . Örneğin:

dotnet new razorclasslib -o RazorUIClassLib

RazorSınıf kitaplığı (RCL) şablonu Razor Varsayılan olarak varsayılan olarak bileşen geliştirme olur. --support-pages-and-views dotnet new razorclasslib --support-pages-and-views Sayfalar ve görünümler için destek sağlamak üzere seçeneğini () geçirin.

Daha fazla bilgi için bkz. DotNet New. Oluşturulan görünüm kitaplığıyla bir dosya adı çarpışmasını önlemek için, kitaplık adının bitmediğinden emin olun .Views .

RazorRCL 'ye dosya ekleyin.

ASP.NET Core şablonları rcl içeriğinin klasörde olduğunu varsayar Areas . ' De içeriğini kullanıma sunan bir RCL oluşturmak için aşağıdaki RCL Pages düzenine bakın ~/Pages ~/Areas/Pages .

RCL içeriğine başvur

RCL 'ye şu şekilde başvurulabilir:

NuGet paketi. bkz. NuGet paketleri oluşturma ve dotnet paket ekleme ve bir NuGet paketi oluşturma ve yayımlama.
{ProjectName}.csproj. Bkz. DotNet-başvuru Ekle.

Görünümleri, kısmi görünümleri ve sayfaları geçersiz kıl

Örnek indirme sırasında, WebApp1/Areas/MyFeature2 WebApp1/Areas/MyFeature önceliğini test etmek için olarak yeniden adlandırın.

RCL Razor sayfaları kullanıyorsa, Razor barındırma uygulamasındaki sayfa hizmetlerini ve uç noktalarını etkinleştirin:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        endpoints.MapRazorPages();
    });
}

RCL sayfaları düzeni

RCL içeriğine, Web uygulamasının klasörünün bir parçası olmasına rağmen başvurmak için Pages , aşağıdaki dosya YAPıSıYLA RCL projesini oluşturun:

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

RazorUIClassLib/Pages/Sharedİki kısmi dosya içerdiğini varsayalım: _Header.cshtml ve _Footer.cshtml . <partial>Etiketler _Layout.cshtml dosyaya eklenebilir:

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

Dosyayı, _ViewStart.cshtml Pages _Layout.cshtml ana bilgisayar Web uygulamasından kullanmak için RCL projesinin klasörüne ekleyin:

@{
    Layout = "_Layout";
}

Statik varlıklar içeren bir RCL oluşturma

RCL, RCL 'nin RCL veya tüketen uygulaması tarafından başvurulabilen, yardımcı statik varlıklar gerektirebilir. ASP.NET Core, tüketen bir uygulama tarafından kullanılabilen statik varlıkları içeren rcls oluşturulmasına izin verir.

Yardımcı varlıkları RCL 'nin bir parçası olarak dahil etmek için, wwwroot sınıf kitaplığında bir klasör oluşturun ve gerekli dosyaları bu klasöre ekleyin.

Bir RCL paketlemesi yaparken, klasördeki tüm yardımcı varlıklar wwwroot pakete otomatik olarak eklenir.

dotnet packNuGet.exe sürümü yerine komutunu kullanın nuget pack .

Statik varlıkları hariç tut

Statik varlıkları dışlamak için, istenen dışlama yolunu $(DefaultItemExcludes) Proje dosyasındaki özellik grubuna ekleyin. Girişleri noktalı virgül () ile ayırın ; .

Aşağıdaki örnekte, lib.css klasöründeki stil sayfası wwwroot statik bir varlık olarak değerlendirilmez ve yayımlanan RCL 'ye dahil değildir:

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

TypeScript tümleştirmesi

TypeScript dosyalarını RCL 'ye eklemek için:

TypeScript dosyalarını ( .ts ) klasörün dışına yerleştirin wwwroot . Örneğin, dosyaları bir Client klasöre yerleştirin.
Klasör için TypeScript derleme çıkışını yapılandırın wwwroot . TypescriptOutDirProje dosyasındaki öğesinin içindeki özelliğini ayarlayın PropertyGroup :
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```
ResolveCurrentProjectStaticWebAssetsProje dosyasında bir öğesinin içine aşağıdaki hedefi ekleyerek TypeScript hedefini hedefin bağımlılığı olarak ekleyin PropertyGroup :
```
<ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
```

Başvurulan bir RCL 'den içerik tüketme

wwwrootRCL 'nin klasörüne eklenen dosyalar, ön ek altında RCL veya tüketen uygulamaya sunulur _content/{PACKAGE ID}/ . Örneğin, bir derleme adı Razor.Class.Lib ve proje dosyasında belirtilen olmayan bir kitaplık, <PackageId> öğesinde statik içeriğe yol açmaya neden olur _content/Razor.Class.Lib/ . bir NuGet paketi üretirken ve derleme adı paket kimliğiyle aynı olmadığında ( <PackageId> kitaplığın proje dosyasında), için proje dosyasında belirtilen paket kimliğini kullanın {PACKAGE ID} .

Tüketen uygulama,,, <script> <style> <img> ve diğer HTML etiketleriyle kitaplık tarafından sunulan statik varlıklara başvurur. Kullanan uygulamada statik dosya desteğinin etkinleştirilmesi gerekir Startup.Configure :

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

Yapı çıktısından () kullanan uygulamayı çalıştırırken dotnet run , varsayılan olarak, statik Web varlıkları geliştirme ortamında etkinleştirilmiştir. Derleme çıktılarından çalışırken diğer ortamlardaki varlıkları desteklemek için, UseStaticWebAssets içindeki konak Oluşturucu üzerinde öğesini çağırın Program.cs :

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}

UseStaticWebAssetsYayımlanan çıktısından () bir uygulama çalıştırılırken çağırma gerekmez dotnet publish .

Çoklu projeli geliştirme akışı

Kullanan uygulama şu şekilde çalışır:

RCL içindeki varlıklar özgün klasörlerinde kalır. Varlıklar, tüketim uygulamasına taşınmaz.
RCL 'nin klasörü içindeki tüm değişiklikler wwwroot , RCL yeniden oluşturulduktan ve tüketen uygulamayı yeniden oluşturmadan önce tüketen uygulamaya yansıtılır.

RCL yapılandırıldığında, statik Web varlık konumlarını açıklayan bir bildirim oluşturulur. Tüketen uygulama, başvurulan proje ve paketlerden varlıkları kullanmak için çalışma zamanında bildirimi okur. Bir RCL 'ye yeni bir varlık eklendiğinde, bir uygulamanın yeni varlığa erişebilmesi için bildirim güncellemek üzere RCL 'nin yeniden oluşturulması gerekir.

Yayımlama

Uygulama yayımlandığında, tüm başvurulan projeler ve paketlerin yardımcı varlıkları wwwroot altında yayımlanan uygulamanın klasörüne kopyalanır _content/{PACKAGE ID}/ . bir NuGet paketi üretirken ve derleme adı paket kimliğiyle aynı olmadığında ( <PackageId> kitaplığın proje dosyasında), {PACKAGE ID} wwwroot yayımlanan varlıkların klasörü incelenirken proje dosyasında belirtilen paket kimliğini kullanın.

Ek kaynaklar

<XREF: blazor/Components/Class-Libraries
ASP.NET Core Blazor CSS yalıtımı

ASP.NET Core'de sınıf Razor kitaplığı projesini kullanarak yeniden kullanılabilir kullanıcı arabirimi ASP.NET Core

Lütfen deneyiminizi değerlendirin

Kullanıcı arabirimi içeren bir sınıf kitaplığı Razor oluşturma

RCL içeriğine başvuru

Görünümleri, kısmi görünümleri ve sayfaları geçersiz kılma

RCL Sayfaları düzeni

Statik varlıklarla RCL oluşturma

Statik varlıkları dışlama

Typescript tümleştirmesi

Başvurulan RCL'den içerik tüketme

Çok projeli geliştirme akışı

Yayımlama

Ek kaynaklar

Kullanıcı arabirimi içeren bir sınıf kitaplığı Razor oluşturma

RCL içeriğine başvur

İzlenecek yol: bir RCL projesi oluşturma ve bir Razor Sayfalar projesinden kullanma

İndirme uygulamasını test etme

RCL oluşturma

RazorProjeye dosya ve klasör ekleme

RazorBir sayfalar projesinden UI kitaplığını kullanma Razor

Test WebApp1

Görünümleri, kısmi görünümleri ve sayfaları geçersiz kıl

RCL sayfaları düzeni

UI içeren bir sınıf kitaplığı oluşturma Razor

RCL içeriğine başvur

Görünümleri, kısmi görünümleri ve sayfaları geçersiz kıl

RCL sayfaları düzeni

Statik varlıklar içeren bir RCL oluşturma

Statik varlıkları hariç tut

TypeScript tümleştirmesi

Başvurulan bir RCL 'den içerik tüketme

Çoklu projeli geliştirme akışı

Yayımlama

Ek kaynaklar