Merhaba MVC Severler,
Önceki yazımda sizlere ASP.NET MVC 4 RC ile gelen yeni şablonlardan bahsettim. Bu yazımda da jQuery ile bir sayfadaki ve uygulama bütünündeki gerçerli olan CSS dosyasını nasıl değiştirebiliriz. Aslında bu işlem genel olarak css ve jquery ile yapılan bir işlemdir. Fakat MVC içerisinde diğer sayfalarda geçerli hale getirmek için bir takım işlemler yapmamız gerekecek.
Hazırlık
Uygulamamızı Visual Studio 2012 RC Ultimate sürümü üzerinde yapacağız. Visual Studio 2012 RC Ultimate’i buradan, ASP.NET MVC 4 RC’yi ise buradan indirebilirip yükleyebilirsiniz. Project Template olarak Basic’i kullacağız.
Giriş
Aslında kullanıcıya sitenizi kullanırken gerek renk, gerek arka plan vs değiştirmesi için tercihler sunabiliyoruz geliştiştiriciler olarak. Bazende geliştirme sürerken farklı CSS dosyalarının site üzerinde nasıl yansıdını görmek isteyebiliriz. Eğer bu tarz senaryolara ihtiyaç duyduysanız bu yazımda bu ihtiyaçlarını gidereceksiniz.
Uygulama
1) ASP.NET MVC 4 RC Razor Basic Project Template açarak uygulamamıza başlıyoruz.
2) Home adında bir Controller oluşturuyoruz.
3) HomeController içerisine iki adet geriye View döndüren ActionResult tipinde metot oluşturuyoruz:
4) Index ve About View’lerimizi _Layout.cshtml’i layout olacak şekilde oluşturuyoruz:
5) Content klasörünün altına StyleSheets diye bir klasör oluşturuyoruz:
6) Yukarıda oluşturduğumuz StyleSheets klasörünün içerisinde default.css adında bir dosya oluşturuyoruz ve içerisine aşağıdaki kodları yazıyoruz:
7) Views klasörü altındaki Shared klasörü içerisinde yer alan _Layout.cshtml dosyasını aşağıdaki gibi düzenliyoruz:
8) Head tag’leri arasına aşağıdaki kodu yazıyoruz:
<script type=”text/javascript”>
function ChangeCSS(css) {
$(‘link[rel=”stylesheet”][href^=”/Content/StyleSheets/”]’).attr({ href: “/Content/StyleSheets/” + css + “.css” });
}
</script>
Bizim için aslında tüm işlemi yapan yukarıdaki kod çünkü buradaki selector sayesinde biz ilgili eklenmiş css dosyasını seçiyor ve ona göre değiştiriyoruz.
9) İşte sonuc:
İndirme
Uygulamayı buradan indirebilirsiniz.
Umarım faydalı bir yazı olmuştur.
İyi çalışmalar
MVC ile kalın.