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;
        }
        a
        {
            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>
    <meta charset=”utf-8″ />
    <meta name=”viewport” content=”width=device-width” />
    <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>
    <div id=”wrapper”>
        <div id=”wrapperContent”>
            <div id=”menu”>
                <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>
            <div id=”leftMenu”>
                <h3>– Temalar –</h3>
                <ul>
                    <li><a onclick=”ChangeCSS(‘default’)”>Ana Tema</a></li>
                    <li><a onclick=”ChangeCSS(‘red’)”>Kırmızı Tema</a></li>
                    <li><a onclick=”ChangeCSS(‘blue’)”>Mavi Tema</a></li>
                    <li><a onclick=”ChangeCSS(‘green’)”>Yeşil Tema</a></li>
                </ul>
            </div>
            <div id=”content”>
                @RenderBody()
            </div>
            <div id=”footer”>
                Tüm hakları saklıdır. Copyright 2012
            </div>
        </div>
     </div>
 </body>
</html>

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.

, , , ,

  1. ASP.NET MVC Archived Buzz, Page 1
  2. [Blog Post(Turkish)] ASP.NET MVC İle İlgili Tüm Yazılarım (29 Yazı, 1 Yazı Dizisi ve 1 İpucu Serisi) « Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s