MVC BundleConfig Kullanımı

19 Mart 2013
Posted by Çağatay Yıldız
12691 Views
MVC

Hepimizin bildiği gibi css ve js dosyalarının çokluğu kimi projelerimizde kod karmaşasına yol açmaktadır. Bu kod karmaşası aynı zamanda ekstra kod satırını da beraberinde getirir. MVC projelerinde bunun önüne geçmek için bundle config sınıfımızın nasıl kullanacağımıza göz atacağız.

Bir Visual Studio 2012 ortamında bir MVC projesi oluştururken karşımıza bazı seçenekler çıkmaktadır.
mvcbundleconfig

Bu seçeneklerden Basic i seçtiğimizde kısmen bazı class ları yüklenmiş bir proje ekrana gelecektir. Empty seçeneği ise adından da anlaşılacağı üzere boş bir MVC projesi oluşturacaktır. Dilersek bu projeye de elimizle BundleConfig sınıfımızı entegre edebiliriz. Basic seçeneğinizi seçiyoruz.

Projemizin App_Start klasörünün altında gelen BundleConfig sınıfını açıyoruz. Örnek olarak bir kaç Include ekranda gözükecektir. Dilersek biz kendimiz de kendi css veya js lerimizi birleştirip bir string isim altında tek satırda çağırabiliriz.

Hemen bir örnek verelim. BundleConfig içinde css lerimizi tanımlıyoruz.

bundles.Add(new StyleBundle("~/Content/Admin/login/css").Include(
 "~/Content/Admin/css/login/base.css",
 "~/Content/Admin/css/msgBoxLight.css"));

Daha sonra aynı class içine scriptlerimizi tanımlıyoruz

bundles.Add(new ScriptBundle("~/Scripts/Admin/TableSorter").Include(
 "~/Scripts/Admin/Tablesorter/TableSorterScript.js",
 "~/Scripts/Admin/Tablesorter/jquery.tablesorter.pager.js",
 "~/Scripts/Admin/DeleteRecordTable.js"
 ));

Bu şekilde birden falza css ve js bundle oluşturabiliriz ve ihtiyacımız olduğu yerde çağırabiliriz. Aynı şekilde bütün proje boyunca kullanılacak css lerimizi de LayoutPage View de (Master Page) tanımlayıp kullanabiliriz.

Şimdi ise gelelim bunları View kısmında nasıl çağıracağımıza. Öncelikle css bundle dosyamızı çağıralım

@Styles.Render("~/Content/Admin/login/css")

İçerisine yazdığımız string bundle stringle aynı isimli olduğu için içerisinde bulunan css leri direk tek dosya altında açıp okumaktadır.

Js lerin çağırımı ise şu kod ile

@Scripts.Render("~/Scripts/Admin/TableSorter")

Bu şekilde satırlarca css ve js tanımlamaktan kurtulmuş olduk. BundleConfigle ilgili bir sonraki yazıda bu sınıfın bazı hatalarından ve bu hataların nasıl giderileceğinden bahsedeceğiz(Server a yüklendiğinde bazı css ve js lerin çalışmaması gibi)