ASP.NET MVC 4 RC’de JavaScript Kullanarak Sayfanın ve Uygulamanın CSS Dosyasını Değiştirme (link[rel=href])

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:

body

{

font-family: Calibri;

font-size: 16px;

margin: 0px;

padding: 0px;

background-color: #f1eeee;

}

ul, li,h2,h3

{

padding: 0px;

margin: 0px;

list-style-type: none;

}

#wrapper

{

width: 700px;

margin: 0px auto;

padding: 0 5px 5px;

background-color: #00a5ff;

}

#wrapperContent

{

background-color: #fff;

}

#menu

{

text-align: center;

border-bottom: 2px solid #00a5ff;

}

#menu ul

{

list-style-type: none;

}

#menu ul li

{

display: inline-block;

padding: 5px;

}

#menu ul li a:hover

{

color: orange;

}

#content

{

padding: 5px;

}

#leftMenu

{

padding:5px;

border-right:2px solid #00a5ff;

}

#leftMenu a

{

cursor: pointer;

}

#footer

{

text-align:center;

background-color:#999;

}

.fl

{

float: left;

}

.clear

{

clear: both;

}

{

text-decoration: none;

color: inherit;

}

7) Views klasörü altındaki Shared klasörü içerisinde yer alan _Layout.cshtml dosyasını aşağıdaki gibi düzenliyoruz:

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

@Styles.Render(“~/Content/themes/base/css”, “~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

@Scripts.Render(“~/bundles/jquery”)

<link rel=”stylesheet” type=”text/css” href=”/Content/StyleSheets/default.css” />

</head>

<body>

<ul>

<li>@Html.ActionLink(“Ana Sayfa”, “Index”)</li>

<li>@Html.ActionLink(“Hakkımda”, “About”)</li>

<li>@Html.ActionLink(“Galeri”, “Gallery”)</li>

<li>@Html.ActionLink(“İletişim”, “Contact”)</li>

</ul>

</div>

<h3>– Temalar –</h3>

<ul>

<li><a onclick=”ChangeCSS(‘red’)”>Kırmızı Tema</a></li>

<li><a onclick=”ChangeCSS(‘green’)”>Yeşil Tema</a></li>

</ul>

</div>

@RenderBody()

</div>

</div>

</body>

</html>

8) Head tag’leri arasına aşağıdaki kodu yazıyoruz:

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.

Mahmut Can Sozeri