Berkat CSS, desain tampilan suatu webpage dapat dirubah dengan cepat tanpa harus merombak keseluruhan kode HTML dari webpage tersebut. Keadaan ini dapat dilakukan apabila semua pengaturan tampilan dilakukan oleh CSS dan tidak di dalam kode HTML webpage tersebut. Nah dengan menggunakan kelebihan CSS inilah, kita dapat melakukan perubahan tampilan dari suatu webpage pada saat runtime misalkan tampilan setelah terjadi kesalahan menjadi bercorak merah. Tutorial ini dibuat dalam bahasa pemograman C# untuk diterapkan pada ASP.NET 2.0.

Pertama

<head runat=”server”>
<title>Judul WebPage</title>
<link rel=”stylesheet” type=”text/css” href=”style/style.css” />
</head>

Buat tag baru untuk me-link ke stylesheet yang akan diterapkan pada page tersebut dengan menggunakan <link rel=”stylesheet” type=”text/css” href=”urlcss” />. Nilai urlcss disesuaikan dengan lokasi file tempat stylesheet anda letakkan.

Kedua

public virtual void ChangeStyle(String StyleNUrl)
{
// Change Style
foreach (Control ctrl in Page.Header.Controls)
{
if ((ctrl.GetType().Name == “HtmlLink”) &&
(((System.Web.UI.HtmlControls.HtmlLink)ctrl).Attributes[“rel”] == “stylesheet”))
{
((System.Web.UI.HtmlControls.HtmlLink)ctrl).Href = StyleUrl;
break;
}
}
}

Tambahkan fungsi ChangeStyle diatas pada CodeBehind dari webpage anda. Fungsi ini akan melakukan pengecekan terhadap semua control yang ada di bagian Header untuk mencari control yang bertipe HtmlLink (tag link yang telah kita tambahkan pada bagian pertama) dan memiliki atribut rel bernilai stylesheet . Bila control ini ditemukan maka nilai Href-nya akan dirubah sesuai nilai parameter StyleUrl dari fungsi ini.

Ketiga

ChangeStyle(“style/stylebaru.css”);

Terakhir, anda cukup memanggil fungsi yang telah anda tambahkan pada bagian kedua di CodeBehind anda seperti contoh diatas. Bisa anda letakkan pada event Page_Load atau event click dari suatu button. Bebas.

Sederhana bukan? Selamat Mencoba

One comment

Leave a Reply to AmiGelz Cancel reply

Your email address will not be published. Required fields are marked *