Posting saya sebelumnya berurusan dengan cara menggunakan API Magento dengan WCF. Aspek lain dari Magento yang saya temui adalah dukungan yang sangat fleksibel untuk bertema.
Anda dapat merancang tema baru yang terlihat sangat berbeda dari yang default. Anda tidak hanya dapat mengubah gambar dan warna dalam lembaran gaya cascading, Anda juga dapat mendefinisikan kembali daerah (header, konten, footer ...) yang membentuk halaman. Per wilayah Anda dapat menentukan HTML mana yang disuntikkan ke dalamnya. Ini memberi Anda daya kustomisasi maksimal untuk bertema situs Anda.
Tema di ASP.NET didukung di luar kotak. Menggunakan folder app_themes Anda dapat menyesuaikan tampilan dan nuansa situs Anda, namun rumitnya sistem ini.
Magento dibangun menggunakan pola MVC, seperti kerangka kerja ASP.NET MVC. Dan itu adalah fokus dari artikel ini. Bagaimana cara mengimplementasikan tema di ASP.NET MVC?
Mari kita mulai ...
Sebelum kita mulai mengkode mari kita ringkas tujuan yang ingin kita capai. Mari kita asumsikan bahwa kita memiliki perusahaan yang mengimpor furnitur yang dibuat di Cina, Vietnam, Korea Selatan ... dll. Kami tidak menjual langsung ke pengguna akhir, tetapi untuk pengecer.
Kami ingin merancang aplikasi web bertenaga ASP.NET MVC yang dapat digunakan sebagai situs e-commerce oleh semua pengecer kami. Setiap reseller memiliki nama domain sendiri dan ingin menjual barangnya secara online. Masing -masing domain ini ditautkan ke aplikasi web tunggal kami.
Fungsionalitas yang ditawarkan oleh aplikasi web adalah sama untuk setiap pengecer, tetapi setiap pengecer ingin menyesuaikan toko online -nya dengan menerapkan tema khusus. Kami akan mendukung situasi berikut:
Jadi kita harus mencari tahu bagaimana kita dapat secara dinamis mengganti lembar gaya (CSS), halaman master, tampilan dan tampilan parsial.
Sebelum kita bisa mulai, kita perlu meletakkan dasar. Mari kita mulai dengan membangun dasar -dasar untuk aplikasi demo sederhana.
Komentar : Di bagian ini saya memberikan gambaran cepat untuk menyiapkan aplikasi demo sehingga fitur tema dapat ditunjukkan. Ini hanya pendekatan yang cepat dan mudah. Fokus artikel ini bukan pada cara merancang model domain, merancang lapisan logika bisnis Anda ... dll. Jadi saya menyimpan ini sesingkat mungkin. Jangan ragu untuk memperbaikinya.
Database
Buat database baru menggunakan SQL Server Express (2005 atau 2008). Terinspirasi oleh database NorthWind saya menamai database saya [WindDirection].
Basis data ini berisi tepat satu tabel yang disebut [Reseller]. Rancang tabel seperti yang ditunjukkan pada gambar berikut.
Gambar 1 - [Reseller] Tabel
![Tabel Pengecer [Reseller] Table Design](https://images.downcodes.com/uploads/20250616/img_68500176a3ae030.png)
Seperti yang Anda lihat kolom ID adalah kunci utama dan menggunakan spesifikasi identitas (= autoINCREMENT). Juga tambahkan kendala unik pada kolom domain karena setiap pengecer memiliki domain uniknya sendiri.
Komentar : Kode sumber yang menyertai artikel ini berisi skrip (ddl.sql) yang memungkinkan Anda untuk dengan cepat menghasilkan tabel ini jika Anda tidak ingin mendesainnya dengan tangan.
Bagian terakhir dari pengaturan database kami adalah memasuki beberapa catatan boneka untuk tabel [pengecer]. Harap masukkan catatan berikut:
Gambar 2 - Reseller

Kami memiliki empat reseller. Reseller pertama tidak memiliki tema khusus dan kembali ke yang default. Semua yang lain memiliki tema khusus mereka sendiri.
Mulai Visual Studio 2008 dan buat solusi kosong baru berjudul "MVCapplication". Tambahkan pustaka kode baru dan sebut saja "cgeers.winddirection.database". Hapus file Class1.CSS yang dihasilkan secara otomatis.
Selanjutnya tambahkan item LINQ ke SQL Class baru dan beri nama "Dataclasses". Ubah nama DataContext baru menjadi "WindDirectionDataContext". Sekarang seret tabel [Reseller] dari tab Server Explorer ke LINQ ke SQL Designer Surface.
Gambar 3 - Entitas Reseller

Atur properti koneksi DataContext ke "none" dan hapus pengaturan aplikasi string koneksi dan file konfigurasi aplikasi (app.config). Saya tidak menyukai fakta bahwa Visual Studio menyuntikkan string koneksi untuk saya. Saya suka melakukannya sendiri.
Itu sebabnya saya telah menambahkan kelas parsial berikut ke perakitan ini yang menangani menginisialisasi DataContext dengan string koneksi. Satu -satunya bagian yang harus kami sepakati adalah bahwa string koneksi bernama "Winddirection".
Daftar 1 - Kelas WindDirectionDataContext
public partial class WindDirectionDataContext
{
private static readonly string ConnectionString ;
static WindDirectionDataContext ( )
{
ConnectionStringSettings settings = ConfigurationManager . ConnectionStrings [ "WindDirection" ] ;
ConnectionString = settings != null ? settings . ConnectionString : String . Empty ;
}
public WindDirectionDataContext ( ) : base ( ConnectionString ) { }
}Jangan lupa untuk menambahkan referensi ke perakitan sistem. Konfigurasi. Selama Anda akan menyertakan string koneksi yang disebut "Winddirection" dalam aplikasi yang merujuk rakitan ini akan berfungsi dengan baik.
Kami hampir sampai. Tahan saja, kita akan berhasil. Sekarang tambahkan pustaka kode baru ke solusi yang disebut "cgeers.winddirection.managers". Hapus file Class1.CS yang dihasilkan secara otomatis dan tambahkan referensi ke perakitan System.data.linq.
Tambahkan kelas baru yang disebut manajer dan tambahkan kode berikut ke dalamnya:
Listing 2 - Manajer Abstrak
public abstract class Manager
{
protected Manager ( )
{
Context = new WindDirectionDataContext ( ) ;
}
public WindDirectionDataContext Context { get ; set ; }
}Kelas yang sangat sederhana ini membuat DataContext baru di mana kita dapat melepaskan kueri LINQ kita nanti.
Selanjutnya tambahkan kelas yang disebut "ResellersManager" ke proyek dan tambahkan kode yang ditampilkan di Listing 3.
Listing 3 Resellermanager
public class ResellerManager : Manager
{
public string GetThemeForDomain ( string domain )
{
var q = from r in Context . Resellers
where r . Domain == domain
select r . Theme ;
string theme = q . SingleOrDefault ( ) ;
return ! String . IsNullOrEmpty ( theme ) ? theme : "Default" ;
}
}Kelas manajer ini turun dari kelas manajer abstrak kami dan menambahkan satu metode yang disebut getthemefordomain (...). Metode ini mencari tema pengecer berdasarkan nama domain yang diberikan. Karena setiap domain terikat secara unik pada satu reseller, ini tidak ada masalah.
Voila, itu semua akses data yang diperlukan untuk aplikasi demo kami. Kita perlu mencari tahu tema pengecer berdasarkan domain permintaan yang masuk dan kemudian kita harus menerapkannya.
Komentar : Waspadalah menggunakan konteks LINQ ke SQL dalam aplikasi bertenaga ASP.NET. Meskipun tidak ditunjukkan dalam artikel ini, karena itu akan mengalihkan perhatian terlalu banyak dari upaya utama kami, disarankan untuk hanya membuat satu konteks per permintaan. Simpan konteks di httpContext permintaan sehingga Anda dapat mengaksesnya setiap saat selama permintaan.
Beberapa waktu yang lalu saya menulis artikel khusus tentang ini, lihat artikel Entity Framework ObjectContext di sini. Meskipun berurusan dengan kerangka kerja entitas alih -alih LINQ ke SQL masih berlaku.
Langkah terakhir dalam menyelesaikan aplikasi demo dasar kami adalah menambahkan proyek situs web baru ke solusi. Tambahkan proyek baru ke solusi berdasarkan Templat Proyek Aplikasi Web ASP.NET MVC dan beri nama "MVCapplication". Anda akan ditanya apakah Anda juga ingin membuat proyek uji unit untuk aplikasi ini. Pilih "Tidak" untuk melewatkan ini karena kami tidak membutuhkannya untuk artikel ini.
Visual Studio akan menghasilkan aplikasi "Halo, World!"-Type ASP.NET MVC yang berisi sejumlah halaman default (rumah, tentang, masuk ... dll.). Tambahkan string koneksi Anda ke file web.config dan tambahkan referensi ke cgeers.winddirection.database dan cgeers.winddirection.managers assemblies.
Komentar : Web.config berisi sejumlah pengaturan konfigurasi yang mengacu pada keanggotaan ASP.NET, profil, peran ... penyedia. Anda dapat melanjutkan dan menghapus ini karena kami tidak membutuhkannya.
Penjelajah solusi Anda harus menyerupai Gambar 4.
Gambar 4 - Penjelajah Solusi

Komentar : Pada saat penulisan artikel ini saya menggunakan ASP.NET MVC Versi 1.0. Namun versi 2.0 akan dirilis dalam waktu dekat.
Saat menjalankan aplikasi web, hal pertama yang perlu dipikirkan adalah tema yang perlu diterapkan. Ini perlu dilakukan untuk setiap permintaan. Jadi menyumbat modul HTTP khusus di pipa-pipa tampaknya tepat.
Tambahkan kelas baru ke proyek MVCapplication dan sebut saja ThemehttpModule. Mintalah kelas mengimplementasikan antarmuka ihttpModule. Seluruh kode untuk kelas ini ditampilkan di Listing 4.
Artikel ini bukan primer dalam menulis modul http jadi jika Anda memerlukan informasi lebih lanjut, silakan lihat artikel "Walkthrough: Membuat dan Mendaftarkan Modul HTTP Kustom" di MSDN.
Listing 4 - temehttpmodule
public class ThemeHttpModule : IHttpModule
{
public void Init ( HttpApplication application )
{
application . BeginRequest += application_BeginRequest ;
}
private void application_BeginRequest ( object sender , EventArgs e )
{
HttpApplication application = ( HttpApplication ) sender ;
HttpContext context = application . Context ;
if ( context . Cache == null )
{
return ;
}
string domain = context . Request . Url . GetDomain ( ) ;
string cacheKey = String . Format ( CultureInfo . InvariantCulture , "theme_for_{0}" , domain ) ;
if ( context . Cache [ cacheKey ] == null )
{
ResellerManager manager = new ResellerManager ( ) ;
string theme = manager . GetThemeForDomain ( domain ) ;
context . Cache [ cacheKey ] = theme ;
}
}
public void Dispose ( ) { }
}Modul HTTP ini menambahkan event handler untuk acara BeginRequest. Peristiwa ini terjadi sebagai peristiwa pertama dalam rantai eksekusi pipa HTTP ketika ASP.NET menanggapi permintaan.
Di sini kami mengekstrak nama domain dari permintaan yang masuk. Selanjutnya kami mengambil tema untuk domain ini dengan menggunakan metode Resellermanager GetThemefordomain (...). Hasilnya kemudian di -cache. Lain kali permintaan untuk domain ini dipicu tema akan diambil dari cache dan tidak ada kueri basis data yang akan dipecat.
Metode getDomain () adalah metode ekstensi untuk kelas URI. Lihat kode sumber artikel ini untuk melihat cara kerjanya. Dengan cara yang sama Anda bisa memilih untuk mengekstrak subdomain (misalnya: www, admin ... dll) dari permintaan. Anda kemudian dapat memperluas mesin tema Anda untuk menerapkan tema yang berbeda untuk setiap subdomain domain.
Terakhir, daftarkan THEHEHTTPMODULE dengan membuat entri di file Web.config. Ini diperlukan untuk berlangganan modul HTTP ke pemberitahuan permintaan-pipa.
Listing 5 - Daftarkan temehttpmodule
< httpModules >
< add name = " ThemeHttpModule " type = " MvcApplication.ThemeHttpModule " />
<!-- ... -->
</ httpModules >Saat Anda memulai aplikasi web, Anda akan menerima tampilan & rasakan default seperti yang ditampilkan pada Gambar 5. Visual Studio akan menghasilkan beberapa halaman default (home, about, log on ... dll.) Termasuk halaman master dan lembar gaya. Kami akan menggunakan file -file ini untuk membuat tema default kami.
Gambar 5 - Asp.net MVC Tema Default Aplikasi

Secara default semua file disimpan di folder konten dan melihat. Kita perlu menerapkan struktur direktori kita sendiri sehingga kita dapat secara logis mengelompokkan tema kita. Oleh karena itu buat folder baru yang disebut tema. Buat subfolder untuk direktori tema dan sebut itu default. Pindahkan Direktori Konten dan Lihat di bawah direktori default ini.
Setelah memindahkan konten dan melihat folder, Anda perlu menyesuaikan properti MasterPageFile dari Petunjuk Halaman untuk masing -masing tampilan! Nilai lama merujuk lokasi yang tidak ada lagi. Ubah MasterPageFile = "~/Views/Shared/Site.master" menjadi MasterPageFile = "~/Tema/Default/Views/Shared/Site.master" !
Gambar 6 - Tema Default

Voila, tema default kami telah diatur. Jika Anda ingin membuat tema baru, Anda hanya perlu membuat folder baru dan meletakkannya di bawah folder tema. Seperti yang dapat Anda lihat di tangkapan layar sebelumnya, kami akan membuat beberapa tema lain (hijau, oranye, merah) nanti.
Kami baru saja memindahkan halaman induk, lembar gaya, pemandangan ... dll. ke direktori lain. Jika kami memulai aplikasi web kami sekarang kami akan menerima pengecualian berikut:
Gambar 7 - InvalidoperationException

Tampilan 'indeks' atau tuannya tidak dapat ditemukan. Lokasi berikut dicari:
MVC mencoba menemukan tampilan untuk halaman start default Anda, tetapi tidak dapat menemukannya di lokasi default yang dicari sehingga Anda menerima pengecualian. Kami memindahkan file -file ini ke folder tema default kami dan segera kami akan membuat tema lain. Kami membutuhkan cara untuk memberi tahu MVC tentang lokasi di mana untuk mencari pandangannya, halaman utama, tampilan parsial ... dll. Lokasi -lokasi ini berbeda dengan tema reseller.
Jadi pada dasarnya yang perlu kita lakukan untuk mendukung tema di ASP.NET MVC adalah:
Untuk melakukan ini, kita perlu menulis mesin tampilan kita sendiri. MVC menggunakan mesin tampilan untuk membuat halaman untuk respons. Mesin tampilan ini bertanggung jawab untuk menemukan halaman master, tampilan, dan tampilan parsial. Secara default, WebFormViewEngine digunakan.
Kita perlu mengganti mesin tampilan default ini oleh kami. Untuk melakukan ini, tambahkan kelas baru yang disebut ThemedViewEngine ke proyek MVCapplication dan membuatnya turun dari kelas WebFormViewEngine.
Listing 6 - ThemedViewEngine
public class ThemedViewEngine : WebFormViewEngine
{
#region Constructor(s)
// Replace the default search paths by our own.
public ThemedViewEngine ( )
{
// Search paths for the master pages
base . MasterLocationFormats = new [ ]
{
"~/Themes/{2}/Views/{1}/{0}.master" ,
"~/Themes/{2}/Views/Shared/{0}.master"
} ;
// Search paths for the views
base . ViewLocationFormats = new [ ]
{
"~/Themes/{2}/Views/{1}/{0}.aspx" ,
"~/Themes/{2}/Views/{1}/{0}.ascx" ,
"~/Themes/{2}/Views/Shared/{0}.aspx" ,
"~/Themes/{2}/Views/Shared/{0}.ascx" ,
} ;
// Search parts for the partial views
// The search parts for the partial views are the same as the regular views
base . PartialViewLocationFormats = base . ViewLocationFormats ;
}
#endregion
}Dalam konstruktor mesin tampilan baru ini, kami menetapkan MASTERLocationFormats, ViewLocationFormats, dan PartialViewLocationFormats ke lokasi baru, misalnya: ~/tema/{2}/views/{1}/{0} .aspx.
Setiap jalur berisi 3 bagian yang ditentukan secara dinamis.
Untuk menggunakan mesin tampilan baru, Anda perlu mendaftarkannya. Lakukan ini dengan menambahkan kode berikut ke penangan acara Application_Start yang terletak di file global.asax.cs.
Listing 7 - Daftarkan ThemedViewEngine
protected void Application_Start ( )
{
ViewEngines . Engines . Clear ( ) ;
ViewEngines . Engines . Add ( new ThemedViewEngine ( ) ) ;
RegisterRoutes ( RouteTable . Routes ) ;
}Di sini Anda menghapus setiap mesin tampilan yang mungkin telah dimuat lebih awal dan menyuntikkan milik Anda. Sekarang yang tersisa hanyalah menginstruksikan mesin tampilan cara memformat jalur pencarian baru sehingga ia menemukan file yang diminta dengan benar. Untuk melakukan ini, Anda perlu mengesampingkan dua metode berikut:
Listing 8 - Metode FindPartialView (...) & FindView (...)
public override ViewEngineResult FindPartialView ( ControllerContext controllerContext , string partialViewName , bool useCache )
public override ViewEngineResult FindView ( ControllerContext controllerContext , string viewName , string masterName , bool useCache )Saya tidak akan memasukkan kode untuk dua fungsi ini di sini, karena cukup panjang dan memiliki beberapa referensi untuk metode pembantu pribadi. Pada dasarnya kedua metode ini mengikuti pola yang sama:
Jadi mesin tampilan baru kami pada dasarnya mencari folder tema kami dan jika tidak dapat menemukan halaman master yang diminta, tampilan atau tampilan parsial, ia menggunakan tema default. Ofcourse Tema default harus lengkap dan tidak dapat memiliki file yang hilang.
Ini memungkinkan Anda untuk membuat tema yang hanya berisi halaman master yang pada gilirannya merujuk pada lembar gaya atau tema yang berbeda yang berisi tampilan dan / atau tampilan parsial hanya untuk bagian -bagian yang ingin Anda gaya secara berbeda.
Dengan mengikuti pola ini, Anda dapat membuat tema yang hanya menggantikan pandangan tertentu dan kembali pada tampilan tema default jika tidak ada tampilan khusus yang disediakan.
Saya mendasarkan mesin tampilan saya pada karya artikel bagus Chris Pietschmann tentang tema di ASP.NET MVC. Saya sarankan Anda checkout artikelnya karena berisi lebih banyak informasi tentang cara kerja mesin tampilan secara internal.
Dengan mesin tampilan baru di tempat kami dapat menjalankan aplikasi web lagi tanpa pengecualian karena sekarang dapat menyelesaikan permintaan untuk halaman master, tampilan, dan tampilan parsial.
KATAAN : Saya sedikit mengubah kode sehingga ketika mesin tampilan tidak dapat menyelesaikan permintaan untuk halaman master tertentu, tampilan atau tampilan parsial itu jatuh kembali pada yang ditemukan dalam tema default. Jadi pastikan untuk memeriksa kode sumber artikel ini juga.
Mari kita dengan cepat membuat tema baru. Tambahkan folder baru yang disebut "merah" di bawah folder tema. Salin situs.master dan situs.css dari tema default seperti yang ditunjukkan pada gambar berikut.
Gambar 8 - Tema Merah

Buka lembar gaya tema merah dan ubah properti latar belakang elemen tubuh. Atur ke merah. Sekarang buka tabel [pengecer] dan atur bidang tema ke "merah" untuk pengecer yang domainnya diatur ke localhost. Mulai ulang aplikasi web dan sekarang harus menggunakan halaman master dan lembar gaya tema merah.
Gambar 9 - Tema Merah Beraksi

Demikian juga Anda dapat membuat tema oranye yang tidak hanya berisi halaman master tetapi juga tampilan yang berbeda untuk halaman beranda.
Gambar 10 - Tema Oranye

Tema oranye akan membuat tampilan baru untuk beranda alih -alih tampilan default. Jika Anda ingin mengganti tampilan parsial, Anda dapat melakukannya dengan cara yang sama. Cukup salin tampilan parsial default ke lokasi yang sama di bawah folder tema baru dan sesuaikan sesuai kebutuhan.
Untuk setiap tema Anda sekarang dapat melayani berbagai halaman induk, pandangan, dan tampilan parsial. Ada satu skenario yang tersisa yang ingin saya dukung. Reseller yang puas dengan tampilan default tetapi hanya ingin menyesuaikan logo, beberapa warna ... dll. Dapat dengan mudah dipuaskan dengan menerapkan lembar gaya yang berbeda ke tema default.
Tambahkan folder tema baru di bawah direktori tema dan sebut saja hijau. Salin lembar gaya tema default ke tema hijau seperti yang ditunjukkan pada gambar berikut.
Gambar 11 - Tema Hijau

Buka lembar gaya tema hijau dan sesuaikan properti latar belakang elemen tubuh menjadi hijau. Jika Anda mengatur tema untuk pengecer dengan domain localhost ke hijau dan memulai aplikasi, Anda akan melihat bahwa itu masih menggunakan lembar gaya tema default.
Ini disebabkan oleh fakta bahwa tema hijau tidak memiliki halaman utama sendiri. Ini menggunakan halaman master dari tema default dan halaman master ini merujuk pada style sheetnya sendiri.
Buka halaman master dari tema default dan ganti baris:
< link href =" ../../Content/Site.css " rel =" stylesheet " type =" text/css " />dengan
< link href =" <% " ="Html.GetThemedStyleSheet()" % /> rel="stylesheet"
type="text/css" / >Metode GetTheMedstylesheet () adalah metode ekstensi untuk kelas utilitas HTML. Tambahkan kelas baru yang disebut htmlhelperextensions ke proyek dan tambahkan kode berikut ke dalamnya.
Listing 9 - htmlhelperextensions
public static class HtmlHelperExtensions
{
public static string GetThemedStyleSheet ( this HtmlHelper html )
{
HttpContext context = HttpContext . Current ;
if ( context == null )
{
throw new InvalidOperationException ( "Http Context cannot be null." ) ;
}
string defaultStyleSheet = context . Server . MapPath ( "~/Themes/Default/Content/Site.css" ) ;
string domain = context . Request . Url . GetDomain ( ) ;
string cacheKey = String . Format ( CultureInfo . InvariantCulture , "theme_for_{0}" , domain ) ;
string theme = ( string ) context . Cache [ cacheKey ] ;
if ( String . IsNullOrEmpty ( theme ) || theme == "Default" )
{
return defaultStyleSheet ;
}
string styleSheet = context . Server . MapPath ( String . Format ( CultureInfo . InvariantCulture ,
"~/Themes/{0}/Content/Site.css" , theme ) ) ;
if ( ! File . Exists ( styleSheet ) )
{
styleSheet = defaultStyleSheet ;
}
return String . Format ( CultureInfo . InvariantCulture , "'{0}'" , styleSheet ) ;
}
}Metode GetTheMedStylesheet () memuat tema dari cache httpapplication dan memeriksa apakah tema ini memiliki lembar gaya sendiri. Jika tidak, itu kembali pada lembar gaya tema default. Kode ini berisi beberapa string kode keras, meskipun tidak optimal itu berhasil. Jangan ragu untuk meningkatkan metode ini.
Jika Anda memulai aplikasi web sekarang Anda akan mendapatkan latar belakang hijau yang bagus.
Artikel ini menunjukkan kepada Anda bagaimana Anda dapat mengaktifkan tema di ASP.NET MVC. Untuk melakukannya Anda hanya perlu menerapkan dua hal, yaitu:
Sistem tema yang kami implementasikan menggunakan tema default dan memeriksa apakah perlu menggantikan bagian dari tema default ini dengan tema khusus. Anda dapat dengan mudah mendukung salah satu skenario berikut atau menggabungkannya: