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

Yazan 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 sürecine tümleştirme hakkında bilgi almak için, Sınıf Kitaplığınız için istemci web varlıkları oluşturmaRazor bölümüne bakın.

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.
• Razor Sınıf Kitaplığı'nı seçin>İleri.
• 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'i seçin.

Razor Sınıf Kitaplığı şablonu, varsayılan olarak Razor bileşen geliştirme için ayarlanmıştır. Sayfaları ve görünümleri destekle seçeneği sayfaları ve görünümleri destekler. RCL desteği hakkında daha fazla bilgi için Blazor içindeki Razor sınıf kitaplığından ASP.NET Core Razor bileşenlerini kullanma bölümüne bakın.

.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 Razor bileşen geliştirme için ayarlanmıştır. Sayfalar ve görünümler için destek sağlamak üzere --support-pages-and-views 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 Razor dosyaları ekleyin.

ASP.NET Core şablonları, RCL içeriğinin Areas klasörde olduğunu varsayar. Aşağıda, RCL Sayfaları düzeni'ni kullanarak, ~/Pages yerine ~/Areas/Pages içeriğini kullanıma sunan bir RCL oluşturun.

RCL içeriğine referans

RCL şu şekillerde referans alınabilir:

• NuGet paketi. Bkz NuGet paketleri oluşturma ve dotnet add package ve NuGet paketi oluşturma ve yayımlama.
• {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 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/MyFeature2 öğesini WebApp1/Areas/MyFeature olarak yeniden adlandırın.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml kısmi görünümü WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml üzerine kopyalayı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 Razor Pages kullanıyorsa, barındırma uygulamasında Razor Pages hizmetlerini ve uç noktalarını etkinleştirin.

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. <partial> etiketleri _Layout.cshtml dosyasına eklenebilir.

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

_ViewStart.cshtml dosyasını, konak web uygulamasından Pages dosyasını kullanmak amacıyla, RCL projesinin _Layout.cshtml klasörüne ekleyin.

@{
    Layout = "_Layout";
}

Statik varlıklarla RCL oluşturma

RCL, hem kendi hem de RCL'yi kullanan uygulama tarafından başvurulabilecek 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 sürecine istemci web varlıklarını ekleyin

İstemci web varlıklarını derleme süreci ile bütünleştirmek oldukça karmaşık bir iştir. Daha fazla bilgi için Sınıf Kitaplığınız için istemci web varlıkları oluşturma Razor konusuna bakın.

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 entegrasyonu

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

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

  Note

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

• TypeScript dosyalarını .tswwwroot klasörünün dışına yerleştirin. Örneğin, dosyaları bir Client klasöre yerleştirin.

• Proje dosyasına aşağıdaki işaretlemeyi ekleyin:

  • wwwroot özelliğiyle TypescriptOutDir klasörü için TypeScript derleme çıkışını yapılandırın.
  • TypeScript hedefini PrepareForBuildDependsOn hedefinin bağımlılığı olarak ekleyin.
  • wwwroot folder çıktısını kaldırın.

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

  <PropertyGroup>
    // Markup removed for brevity.
    <TypescriptOutDir>wwwroot</TypescriptOutDir>
    <PrepareForBuildDependsOn>
      CompileTypeScriptWithTSConfig;
      GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
    </PrepareForBuildDependsOn>
  </PropertyGroup>

  <ItemGroup>
    <Content Remove="wwwroot\{path-to-typescript-outputs}" />
  </ItemGroup>

</Project>

Referans edilen bir RCL'den içerik tüketmek

RCL klasöründeki wwwroot dosyalar, _content/{PACKAGE ID}/ ön eki altında RCL'ye veya tüketici uygulamaya sunulur. Örneğin, Razor.Class.Lib adlı ve proje dosyasında <PackageId> belirtilmemiş bir kitaplık, _content/Razor.Class.Lib/ konumundaki statik içerik yolunu ortaya çıkarır. Bir NuGet paketi oluştururken ve derleme adı paket kimliğiyle aynı olmadığında (<PackageId> kitaplığın proje dosyasında), {PACKAGE ID} proje dosyasında belirtilen paket kimliğini kullanın.

Tüketen uygulama, kitaplık tarafından sağlanan statik varlıklara <script>, <style>, <img> ve diğer HTML etiketleriyle 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();

Derleme çıkışından (dotnet run) uygulamayı çalıştırırken, Geliştirme ortamında statik web varlıkları varsayılan olarak etkinleştirilir. Diğer ortamlardaki varlıkları desteklemek için derleme çıktısından çalışırken, UseStaticWebAssets içinde, konak oluşturucuda Program.cs'u çağırın.

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 (UseStaticWebAssets) bir uygulama çalıştırılırken dotnet publish çağrısı yapılması gerekmez.

Çok projeli geliştirme akışı

Tüketici uygulama çalıştığı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. Uygulama, başvurulan proje ve paketlerden varlıkları kullanmak için çalışma anında manifest dosyasını okur. RCL'ye yeni bir varlık eklendiğinde, RCL'nin bildirimini güncellemek amacıyla yeniden oluşturulması gerekir, böylece tüketen bir uygulama yeni varlığa erişebilir.

Publish

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 bulunduğu klasörü incelerken {PACKAGE ID} belirtilen paket kimliğini wwwroot için proje dosyasında 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

• ASP.NET Core Blazor CSS yalıtımı