Menyertakan Stylesheet/Javascript lewat Editor/Display Template pada ASP.Net MVC

Saya sedang bekerja di aplikasi web ASP.Net MVC menggunakan Entity Framework untuk proses baca/tulis ke database. Untuk konsistensi tampilan, saya gunakan DisplayTemplate dan EditorTemplate yang saya buat sendiri (di folder: ~/Views/Shared/DisplayTemplates dan ~/Views/Shared/DisplayTemplates). Untuk menyertakan file .css/.js yang dibutuhkan, umumnya harus melalui file layout utama (biasa di: ~/Views/Shared/_Layout.vbhtml). Sekarang, bagaimana cara menyertakan file .css/.js bukan melalui layout utama tapi melalui DisplayTemplates/EditorTemplates-nya..? Ini pengalaman saya :)


Ide ini muncul ketika saya sedang coba terapkan Chosen pada elemen select untuk EditorTemplate yang saya buat. Penggunaan select biasa sebenarnya sudah cukup, namun dengan tambahan fitur dari Chosen, ia makin sempurna. Pada dasarnya file .css/.js yang dibutuhkan oleh Chosen bisa saja saya sertakan melalui file layout utama. Dengan begitu, setiap file .css/.js akan selalu dibaca oleh browser pengguna, tanpa peduli apakah halaman dimaksud akan menggunakannya atau tidak. Kedengarannya tidak terlalu efektif. Maka saya mencari cara agar file .css/.js dimaksud hanya dibaca bila di halaman yang akan ditampilkan memang ada element select yang akan menggunakannya.

Ada berbagai cara yang saya temukan melalui Google, mulai yang paling mudah sampai yang agak rumit. Namun saya pilih untuk menyelesaikannya dengan cara sendiri. Berbagi lewat tulisan ini, kira saja ada pengembara disana yang tidak sengaja singgah dan teknik ini boleh menjadi inspirasi baru untuknya.

Modifikasi pada controller

Pertama saya definiskan class baru dengan nama DefaultBaseController. Berikut kode-nya:

Public Class DefaultBaseController
    Inherits Controller

    Public StyleBundles As List(Of String)
    Public StyleLinks As List(Of String)

    Public ScriptBundles As List(Of String)
    Public ScriptLinks As List(Of String)

End Class

Tampak bahwa class ini merupakan turunan dari class Controller bawaan dari ASP.Net MVC, yang tujuannya kemudian menjadi base untuk seluruh controller lainnya (Inherits DefaultBaseController). Dengannya, rutin yang harus dieksekusi oleh setiap controller dapat dengan gampang kita kumpulkan disini.

Kunci pada class ini adalah deklarasi keempat public variable yang menjadi tempat mencatat sementara daftar file .css/.js yang akan disertakan nantinya oleh layout utama. Disini, untuk mencatat stylesheet ada dua variable, yakni StyleBundles mencatat nama bundle yang akan dirender dan SyleLinks mencatat file .css yang disertakan secara langsung per file. Begitu juga untuk javascript, yakni ScriptBundles dan StyleLinks dengan pola yang sama.

Karena semua controller adalah turunan dari class ini, maka keempat variable tersebut dapat diakses baik pada konteks controller atau view.

Menyertakan file .css/.js pada konteks controller

Pada konteks controller, caranya bisa dengan DirectCast ke DefaultBaseController untuk mengakses keempat variable tersebut diatas.

'menyertakan css bundle...
DirectCast(Me, DefaultBaseController).StyleBundles.Add("~/Content/css")

'menyertakan css file...
DirectCast(Me, DefaultBaseController).StyleLinks.Add("~/Content/custom.css")

'menyertakan script bundle...
DirectCast(Me, DefaultBaseController).ScriptBundles.Add("~/Scripts/js")

'menyertakan javascript file...
DirectCast(Me, DefaultBaseController).ScriptLinks.Add("~/Scripts/custom.js")

Menyertakan file .css/.js pada konteks view

Pada konteks view, dapat juga digunakan cara yang sama. Controller diakses sebagai property dari ViewContext, lalu DirectCast ke DefaultBaseController.

'menyertakan css bundle...
@DirectCast(ViewContext.Controller, DefaultBaseController).StyleBundles.Add("~/Content/css")

'menyertakan css file...
@DirectCast(ViewContext.Controller, DefaultBaseController).StyleLinks.Add("~/Content/custom.css")

'menyertakan script bundle...
@DirectCast(ViewContext.Controller, DefaultBaseController).ScriptBundles.Add("~/Scripts/js")

'menyertakan javascript file...
@DirectCast(ViewContext.Controller, DefaultBaseController).ScriptLinks.Add("~/Scripts/custom.js")

Proses render di file layout utama

Yang perlu dicatat disini adalah bahwa ASP.Net MVC memproses view mulai dari level yang terdalam baru terluar. Bayangkan semua view yang akan proses seperti hirarki yang turun temurun (nested). Partial render maupun display/editor template adalah seperti view di dalam view. Dengan demikian maka file layout utama akan selalu menjadi view yang diproses terakhir. Nah, di pemrosesan view yang terakhir ini seharusnya semua file .css/.js yang akan disertakan telah tersimpan di keempat variable yang tadi. Maka pada file layout utama ini tinggal menambahkan beberapa baris kode untuk proses rendernya, kira-kira seperti berikut:

@For Each item In DirectCast(ViewContext.Controller, DefaultBaseController).StyleBundles
    @Styles.Render(item)
Next

@For Each item In DirectCast(ViewContext.Controller, DefaultBaseController).StyleLinks
    @<link href="@VirtualPathUtility.ToAbsolute(item)" rel="stylesheet" type="text/css" />
Next

@For Each item In DirectCast(ViewContext.Controller, DefaultBaseController).ScriptBundles
    @Scripts.Render(item)
Next

@For Each item In DirectCast(ViewContext.Controller, DefaultBaseController).ScriptLinks
    @<script src="@VirtualPathUtility.ToAbsolute(item)" type="text/javascript"></script>
Next

... ... ...

Semoga bermanfaat :)