ASP.NET Core'da sınıf kitaplığı projesini Razor kullanarak yeniden kullanılabilir kullanıcı arabirimi oluşturma

Gönderen Rick Anderson

Razor görünümler, sayfalar, denetleyiciler, sayfa modelleri, Razor bileşenler, Görünüm bileşenleri ve veri modelleri bir Razor sınıf kitaplığında (RCL) yerleşik olarak 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, web uygulamasındaki Razor işaretleme (.cshtml dosya) öncelikli olur.

Npm ve webpack'i RCL için derleme işlemiyle tümleştirme hakkında bilgi için bkz. Sınıf Kitaplığınız Razoriçin istemci web varlıkları oluşturma.

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

Visual Studio

• Visual Studio'dan Yeni proje oluştur'u seçin.
• Sınıf Kitaplığı>İleri'yi seçin.Razor
• Kitaplığı adlandırın (örneğin, "RazorClassLib"), >Oluştur. Oluşturulan görünüm kitaplığıyla dosya adı çakışmasını önlemek için, kitaplık adının ile .Viewsbitmiyor olduğundan emin olun.
• Kitaplığın sayfaları ve/veya görünümleri içermesi gerekiyorsa Destek sayfaları ve görünümleri'ni seçin. Varsayılan olarak, yalnızca Razor bileşenler desteklenir. Oluştur'u belirleyin.

Razor Sınıf Kitaplığı şablonu varsayılan olarak bileşen geliştirme olarak Razor kullanılır. Sayfaları ve görünümleri destekle seçeneği sayfaları ve görünümleri destekler. içindeki BlazorRCL desteği hakkında daha fazla bilgi için bkz. Sınıf kitaplığından Razor (RCL) ASP.NET Core Razor bileşenlerini kullanma.

.NET CLI

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

dotnet new razorclasslib -o RazorUIClassLib

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

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

RCL'ye dosya ekleyin Razor .

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

RCL içeriğine başvurma

RCL'ye şu şekilde başvurabilirsiniz:

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

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 Razor Sayfa bulunduğunda, web uygulamasındaki Razor işaretleme (.cshtml dosya) öncelikli olur. Örneğin, WebApp1'e ekleyin WebApp1/Areas/MyFeature/Pages/Page1.cshtml ve WebApp1'deki Sayfa1, RCL'deki Sayfa1'den önceliklidir.

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

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml Kısmi görünümü öğesine WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtmlkopyalayın. İşaretlemeyi yeni konumu gösterecek şekilde güncelleştirin. Uygulamanın kısmi sürümünün kullanıldığını doğrulamak için uygulamayı derleyin ve çalıştırın.

RCL Pages kullanıyorsa Razor barındırma uygulamasında Pages hizmetlerini ve uç noktalarını etkinleştirin Razor :

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

RCL Sayfaları düzeni

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

• RazorUIClassLib/Pages
• RazorUIClassLib/Pages/Shared

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

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

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

@{
    Layout = "_Layout";
}

Statik varlıklarla RCL oluşturma

RCL, RCL veya RCL'nin tüketen uygulaması tarafından başvurulabilen yardımcı statik varlıklar gerektirebilir. ASP.NET Core, tüketen bir uygulamanın kullanabileceği statik varlıkları içeren RCL'ler oluşturmaya olanak tanır.

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

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

dotnet pack NuGet.exe sürümü nuget packyerine komutunu kullanın.

Derleme işlemine istemci web varlıkları ekleme

İstemci web varlıklarını derleme işlem hattıyla tümleştirmek kolay değildir. Daha fazla bilgi için bkz. Sınıf Kitaplığınız Razor için istemci web varlıkları oluşturma.

Statik varlıkları dışlama

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

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

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

Typescript tümleştirmesi

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

1. Projede Microsoft.TypeScript.MSBuild NuGet paketine başvurun.

   Not

   .NET uygulamalarına paket ekleme hakkında yönergeler için, Paket tüketimi iş akışında (NuGet belgeleri) paketleri yüklemek ve yönetmek altındaki makalelere bakın. NuGet.org'da doğru paket sürümlerini onaylayın.

2. TypeScript dosyalarını (.ts) klasörün dışına wwwroot yerleştirin. Örneğin, dosyaları bir Client klasöre yerleştirin.

3. Klasörün TypeScript derleme çıkışını wwwroot yapılandırın. TypescriptOutDir Proje dosyasında içindeki özelliğini PropertyGroup ayarlayın:

   <TypescriptOutDir>wwwroot</TypescriptOutDir>
   

4. Proje dosyasına aşağıdaki hedefi ekleyerek TypeScript hedefini PropertyGroup hedefin PrepareForBuildDependsOn bağımlılığı olarak ekleyin:

   <PrepareForBuildDependsOn>
     CompileTypeScript;
     GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
   </PrepareForBuildDependsOn>
   

Başvuruda bulunan RCL'den içerik kullanma

RCL klasöründe yer wwwroot alan dosyalar RCL'ye veya ön ekinin _content/{PACKAGE ID}/altındaki tüketen uygulamaya sunulur. Örneğin, derleme adına Razor.Class.Lib sahip ve proje dosyasında belirtilmemiş bir <PackageId> kitaplık, konumundaki _content/Razor.Class.Lib/statik içeriğe giden bir yola neden olur. NuGet paketi oluştururken ve derleme adı paket kimliğiyle aynı olmadığında (<PackageId> kitaplığın proje dosyasında), için {PACKAGE ID}proje dosyasında belirtilen paket kimliğini kullanın.

Tüketen uygulama, kitaplık tarafından sağlanan statik varlıklara , <style>, <img>ve diğer HTML etiketleriyle <script>başvurur. Tüketen uygulamanın şu durumlarda statik dosya desteği etkinleştirilmelidir:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

Kullanan uygulamayı derleme çıkışından ()dotnet run çalıştırırken, geliştirme ortamında statik web varlıkları varsayılan olarak etkinleştirilir. Derleme çıkışından çalışırken diğer ortamlardaki varlıkları desteklemek için içindeki konak oluşturucusunu Program.csçağırınUseStaticWebAssets:

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Yayımlanan çıkıştan (dotnet publish) bir uygulama çalıştırılırken çağrı UseStaticWebAssets yapılması gerekmez.

Çok projeli geliştirme akışı

Tüketen uygulama çalıştırıldığında:

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

RCL oluşturulduğunda, statik web varlığı konumlarını açıklayan bir bildirim oluşturulur. Kullanan uygulama, başvuruda bulunan proje ve paketlerdeki varlıkları kullanmak için çalışma zamanında bildirimi okur. RCL'ye yeni bir varlık eklendiğinde, tüketen bir uygulamanın yeni varlığa erişebilmesi için önce RCL'nin bildirimini güncelleştirmek için yeniden oluşturulması gerekir.

Yayımlama

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

Ek kaynaklar

• Örnek kodu görüntüleme veya indirme (indirme)

• ASP.NET Core Razor bileşenlerini bir Razor sınıf kitaplığından (RCL) kullanma

• çekirdek Blazor CSS yalıtımını ASP.NET