ASP.NET MVC'de /home/index'e Gidince CSS, JS ve Görseller Yüklenmiyor mu?

Uzun zamandır yaşadığım bir sorunu sonunda kendim çözdüm. Aradım, taradım, bulamadım. İşin komik tarafı şu: çözümü Stack Overflow'da paylaşmak üzereyken sorunun orada hem sorulduğunu hem de çözüldüğünü fark ettim. Yani bu sorunu tarif etmek bile zor. Bu yüzden aynı sorunu yaşayan herkesin bu başlıkla çözüme ulaşacağını düşündüm.

Sorun Ne?

Siteyi localhost:7148 gibi ana adresten açınca her şey yerinde. Ama /home/index'e gidince sayfa çırılçıplak kalıyor: ne CSS var, ne JavaScript, ne de görseller. Yukarıdaki görsel gibi, düz bir HTML sayfası.

Tarayıcının geliştirici araçlarını açıp sayfayı incelerseniz bir sürü GET hatası görürsünüz: şu dosya bulunamadı, bu görsel bulunamadı.

Neden Oluyor?

Evet, bu bir dosya yolu sorunu. Ana adresteyken wwwroot klasörüyle aynı seviyedesiniz; /home/index'teyken değilsiniz. Tarayıcı dosyayı, o an bulunduğunuz adrese göre arar ve bulamaz. View'larınızdaki dosya yolları büyük ihtimalle şöyle:

<img src="img/profilephoto.jpeg" />
<img src="/img/profilephoto.jpeg" />
<img src="../img/profilephoto.jpeg" />

Örneğin /home/index'teyken img/profilephoto.jpeg yolu, /home/img/profilephoto.jpeg olarak istenir. Böyle bir dosya yok. Başında / olan yol sitenin köküne gider; ama uygulama bir alt klasörde çalışıyorsa (örneğin IIS'te sanal dizinde) o da yanlış yeri gösterir.

Assets klasöründeki JS ve CSS dosyalarınızı da muhtemelen aynı şekilde vermişsinizdir.

Çözüm: Tilde (~)

Bu sorunun iki çözümü var. Birincisi statik dosyaları, tıpkı servis ekler gibi elle tanıtmak. İnanın buna hiç gerek yok. wwwroot dışında bir klasör kullanıyorsanız ihtiyaç duyabilirsiniz, ama böyle bir şeyi sakın yapmayın: bütün statik dosyalarınızı wwwroot klasörünün içine koyun.

İkinci ve asıl çözüm: View'lardaki dosya yollarında "bu dosyaları her zaman wwwroot içinde ara" demek. Bunu sadece ~ işaretiyle yapıyoruz:

<img src="~/img/profilephoto.jpeg" />
<script src="~/js/script.js"></script>
<link rel="stylesheet" href="~/css/site.css" />

Her dosya yolunun başına ~/ yazın. Böylece sayfa hangi adresten açılırsa açılsın, Razor dosyayı her zaman wwwroot klasöründe arar. Uygulama bir alt klasörde çalışsa bile doğru adresi üretir.

Anlayacağınız tilde çok önemli. script, img ve link etiketlerinde dosya yolu verirken tilde kullanmaya dikkat edin. Emin olun bu sorunu bir daha yaşamazsınız.

İyi çalışmalar.