ASP.NET Core 6/Statik İçeriğin ve İstemci Taraflı Kütüphanelerin Kullanımı

Web uygulamalarında gelen bir talebe statik içerikle cevap verilmesi yaygın bir durumdur. Statik içeriğe resimler, CSS ve Javascript dosyaları ve statik HTML sayfaları örnek verilebilir. ASP.NET Core uygulamalrında statik içerik geleneksel olarak wwwroot klasöründe depolanır.

Web uygulamamızdaki statik içeriği sunacak middleware UseStaticFiles'tır ve aşağıdaki şekilde request pipeline'a eklenir (Program.cs dosyası):

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseStaticFiles();
app.MapGet("/", ()=>"Merhaba dünya");
app.Run();

Programımıza http://localhost:5000/statik_dosya.html şeklinde bir talep geldiğinde UseStaticFiles middleware'i wwwroot klasöründeki statik_dosya.html dosyasıyla geri döner ve request pipeline'a kısa devre yaptırır. UseStaticFiles middleware'i çoğunlukla request pipeline'a ilk eklenen middleware'lerdendir.

UseStaticFiles middleware'inin konfigüre edilmesi

UseStaticFiles middleware'inin çalışması UseStaticFiles() metoduna StaticFileOptions tipinde parametre verilerek özelleştirilebilir. StaticFileOptions sınıfının önemli özellikleri şunlardır:

ContentTypeProvider: Sunulacak dosyanın tipini belirleyecek sağlayıcıyı belirtmeye yarar. Varsayılan sağlayıcı dosyanın uzantısına bakarak tipini belirler.
DefaultContentType: Eğer belirtilen sağlayıcı (veya varsayılan sağlayıcı) dosyanın tipini belirleyemiyorsa kullanılacak bir fallback dosya tipi belirtmeye yarar.
FileProvider: İstenen dosyanın nerede aranacağını belirtmeye yarar. Aşağıda örnek kullanımı verilmiştir.
OnPrepareResponse: Statik içeriğin sunulmasından hemen önce çalışacak metodu belirtmeye yarar.
RequestPath: Middleware'in hangi path'a gelen request'lere cevap vereceğini belirtir. Aşağıda örnek kullanımı gösterilmiştir.
ServeUnknownFileTypes: Varsayılan durumda tipi belirlenemeyen dosyalar sunulmaz. Bu varsayılan davranışı değiştirmeye yarar.

Örnek (Program.cs dosyası):

using Microsoft.Extensions.FileProviders;
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseStaticFiles();
var env = app.Environment;
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider($"{env.ContentRootPath}/staticfiles"),
    RequestPath = "/files"
});
app.MapGet("/", ()=>"Merhaba dünya");
app.Run();

Burada yapılan ayar şudur: /files path'ına gelen isteklerdeki dosyaları bulmak için /staticfiles klasörüne bak. Bu örneğimizde mevcut UseStaticFiles middleware'i de korunmuştur. Bunun anlamı / pathîna gelen dosya isteklerinin bulunması için halen wwwroot klasörüne bakılacağıdır. Parametre almayan UseStaticFiles() metodu daha önce çağrılmıştır. Bunun anlamı wwwroot kalsöründeki files isimli klsördeki dosya.html isimli dosyanın staticfiles klasöründeki dosya.html isimle dosyaya göre öncelikli olacağıdır. Böyle bir durumda parametre almayan UseStaticFiles middleware'i request pipeline'a kısa devre yaptırmakta ve sıra kendisine gelmesi durumunda çalışabilecek durumda olan parametre alan UseStaticFiles middleware'inin çalışmasını engellemektedir.

NOT: UseStaticFiles() metodunun tek bir string parametre alan bir versiyonu da vardır. Bu string paremetre RequestPath özelliğini ayarlar ve ilgili path'a gelen dosya isteklerinin wwwroot klasöründeki dosyalarla karşılanmasını sağlar.

İstemci taraflı kütüphanelerin kullanılması

Uygulama geliştirirken JQuery ve Bootstrap gibi istemci taraflı kütüphanelere ihtiyaç duyabiliriz. Uygulamamıza istemci taraflı kütüphane yüklemek için Visual Studio'da projemize sağ tıklarız. Açılan bağlam menüsünden "Add" kategorisinin altındaki "Client-Side Library" seçeneğini tıklarız. Açılan "Add Client-Side Library" penceresinde "Library" alanına istediğimiz istemci taraflı kütüphanenin adını yazarız. Örneğin bootstrap paketinin 5.1.3 sürümün kurmak istiyorsak "bootstrap@5.1.3" yazarız. Daha sonra "Install" düğmesine tıklarız. Ayrıca burada paketin yükleneceği klasörü de belirtebiliriz, ancak bu klasörü değiştirmemenizi tavsiye ediyorum. İstemci taraflı kütüphaneler varsayılan durumda wwwroot/lib/paket_ismi klasörüne kurulur. wwwroot klasörü dışında bir yere paketin kurulması durumunda UseStaticFiles middleware'i varsayılan yapılandırma ile request pipeline'a eklendiyse paketi bulamayacaktır.

Kurulan istemci taraflı kütüphanenin kullanılması

Kurulan istemci taraflı kütüphaneyi kullanmak için HTML içinden ilgili pakete referans veririz. Örneğin bir bootstrap dosyasını HTML içinde kullanmak için HTML dosyasının <head> bölümüne aşağıdaki ifadeyi yazarız:

<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />

Burada adres belirtirken wwwroot klasörünün belirtilmediğine dikkat edilmelidir.