ThemedViewEngine

ASP.NET MVC MVC View Engine

การแนะนำ

โพสต์ก่อนหน้าของฉันจัดการกับวิธีการใช้ API ของ Magento กับ WCF อีกแง่มุมหนึ่งของ Magento ที่ฉันเจอคือการสนับสนุนที่ยืดหยุ่นอย่างมากสำหรับพวกเขา

คุณสามารถออกแบบธีมใหม่ที่ดูแตกต่างอย่างสิ้นเชิงจากค่าเริ่มต้น ไม่เพียง แต่คุณสามารถเปลี่ยนภาพและสีสันในแผ่นสไตล์เรียงซ้อนคุณยังสามารถกำหนดภูมิภาคใหม่ (ส่วนหัวเนื้อหาส่วนท้าย ... ) ที่ประกอบขึ้นเป็นหน้า ต่อภูมิภาคคุณสามารถระบุ HTML ที่ถูกฉีดเข้าไปในนั้น สิ่งนี้ให้พลังการปรับแต่งสูงสุดแก่คุณสำหรับเว็บไซต์ของคุณ

ชุดรูปแบบใน ASP.NET ได้รับการสนับสนุนนอกกรอบ การใช้โฟลเดอร์ APP_THEMES คุณสามารถปรับแต่งรูปลักษณ์และความรู้สึกของเว็บไซต์ของคุณได้ แต่ระบบนี้อาจยุ่งยาก

Magento ถูกสร้างขึ้นโดยใช้รูปแบบ MVC เช่นเดียวกับกรอบ ASP.NET MVC และนั่นคือจุดสนใจของบทความนี้ เราจะดำเนินการเกี่ยวกับการใช้ธีมใน ASP.NET MVC ได้อย่างไร?

มาเริ่มกันเถอะ ...

เป้าหมาย

ก่อนที่เราจะเริ่มเขียนโค้ดมาสรุปเป้าหมายที่เราต้องการบรรลุ สมมติว่าเราเป็นเจ้าของ บริษัท ที่นำเข้าเฟอร์นิเจอร์ที่ผลิตในประเทศจีนเวียดนามเซาท์เกอเรีย ... ฯลฯ เราไม่ขายโดยตรงให้กับผู้ใช้ แต่ไปยังผู้ค้าปลีก

เราต้องการออกแบบเว็บแอปพลิเคชันที่ขับเคลื่อนด้วย ASP.NET MVC ซึ่งสามารถใช้เป็นเว็บไซต์อีคอมเมิร์ซโดยผู้ค้าปลีกทั้งหมดของเรา ผู้ค้าปลีกแต่ละคนมีชื่อโดเมนของตัวเองและต้องการขายสินค้าออนไลน์ แต่ละโดเมนเหล่านี้เชื่อมโยงกับเว็บแอปพลิเคชันเดียวของเรา

ฟังก์ชั่นที่นำเสนอโดยเว็บแอปพลิเคชันนั้นเหมือนกันสำหรับผู้ค้าปลีกแต่ละราย แต่ผู้ค้าปลีกแต่ละรายต้องการปรับแต่งร้านค้าออนไลน์ของเขาโดยใช้ธีมที่กำหนดเอง เราจะสนับสนุนสถานการณ์ต่อไปนี้:

• แทนที่แผ่นสไตล์ Cascading (CSS) : ผู้ค้าปลีกบางรายมีความสุขในการใช้ชุดรูปแบบเริ่มต้น แต่เพียงแค่ต้องการเปลี่ยนโลโก้สีพื้นหลังบางประเภทตัวอักษร ... ฯลฯ สิ่งนี้สามารถทำได้อย่างง่ายดายโดยการมีธีมเริ่มต้นใช้แผ่นสไตล์ที่แตกต่างกัน
• แทนที่หน้าหลัก : สำหรับผู้ค้าปลีกที่ต้องการเพิ่มอีกเล็กน้อยเราสามารถเสนอเพื่อแทนที่หน้าต้นแบบและแผ่นสไตล์โดยสิ้นเชิง มุมมองและมุมมองบางส่วนที่ใช้จะเป็นของธีมเริ่มต้น
• แทนที่มุมมองและมุมมองบางส่วน : หากผู้ค้าปลีกต้องการมุมมองที่แตกต่างกันสำหรับหน้ารายละเอียดผลิตภัณฑ์เช่นนี้เป็นไปได้โดยการสร้างมุมมองใหม่และเพิ่มลงในธีมของเขา มุมมองเริ่มต้นจากชุดรูปแบบเริ่มต้นจะถูกแทนที่ด้วยมุมมองใหม่นี้ ควรเป็นไปได้เช่นเดียวกันสำหรับมุมมองบางส่วน (เช่นการควบคุมการเข้าสู่ระบบ)

ดังนั้นเราต้องหาวิธีที่เราสามารถเปลี่ยนรูปแบบชีท (CSS) แบบไดนามิกได้อย่างไรหน้าหลักมุมมองและมุมมองบางส่วน

วางรากฐาน

ก่อนที่เราจะเริ่มต้นเราต้องวางรากฐาน เริ่มต้นด้วยการสร้างพื้นฐานสำหรับแอปพลิเคชันตัวอย่างง่ายๆ

หมายเหตุ : ในส่วนนี้ฉันให้ภาพรวมอย่างรวดเร็วของการตั้งค่าแอปพลิเคชันตัวอย่างเพื่อให้สามารถแสดงคุณสมบัติธีมได้ นี่เป็นเพียงวิธีที่ง่ายและรวดเร็ว จุดเน้นของบทความนี้ไม่ได้อยู่ที่วิธีการออกแบบโมเดลโดเมนออกแบบเลเยอร์ตรรกะทางธุรกิจของคุณ ... ฯลฯ ดังนั้นฉันจึงเก็บสิ่งนี้ให้สั้นที่สุด อย่าลังเลที่จะปรับปรุงมัน

ฐานข้อมูล

สร้างฐานข้อมูลใหม่โดยใช้ SQL Server Express (2005 หรือ 2008) แรงบันดาลใจจากฐานข้อมูล Northwind ฉันตั้งชื่อฐานข้อมูลของฉัน [WindDirection]

ฐานข้อมูลนี้มีตารางเดียวที่เรียกว่า [Reseller] ออกแบบตารางดังแสดงในรูปต่อไปนี้

รูปที่ 1 - [ผู้ค้าปลีก] ตาราง

อย่างที่คุณเห็นคอลัมน์ ID เป็นคีย์หลักและใช้ข้อกำหนดข้อมูลประจำตัว (= autoincrement) นอกจากนี้ยังเพิ่มข้อ จำกัด ที่ไม่ซ้ำกันในคอลัมน์โดเมนเนื่องจากผู้ค้าปลีกแต่ละรายมีโดเมนที่เป็นเอกลักษณ์ของตัวเอง

หมายเหตุ : ซอร์สโค้ดที่มาพร้อมกับบทความนี้มีสคริปต์ (ddl.sql) ที่ช่วยให้คุณสามารถสร้างตารางนี้ได้อย่างรวดเร็วหากคุณไม่ต้องการออกแบบด้วยมือ

ส่วนสุดท้ายของการตั้งค่าฐานข้อมูลของเราคือการป้อนระเบียนจำลองบางอย่างสำหรับตาราง [Reseller] กรุณากรอกบันทึกต่อไปนี้:

รูปที่ 2 - ผู้ค้าปลีก

เรามีผู้ค้าปลีกสี่ราย ผู้ค้าปลีกรายแรกไม่มีธีมที่กำหนดเองและกลับมาเป็นค่าเริ่มต้น คนอื่น ๆ ทั้งหมดมีธีมที่กำหนดเองของตัวเอง

การแก้ปัญหา

เริ่มต้น Visual Studio 2008 และสร้างโซลูชันว่างเปล่าใหม่ที่ชื่อว่า "MVCapplication" เพิ่มไลบรารีรหัสใหม่และเรียกว่า "cgeers.winddirection.database" ลบไฟล์ class1.css ที่สร้างขึ้นโดยอัตโนมัติ

ถัดไปเพิ่มรายการคลาส LINQ ไปยัง SQL ใหม่และตั้งชื่อมันว่า "Dataclasses" เปลี่ยนชื่อ DataContext ใหม่เป็น "WindDirectionDataContext" ตอนนี้ลากตาราง [Reseller] จากแท็บ Server Explorer ไปยังพื้นผิว LINQ ไปยัง SQL Designer

รูปที่ 3 - เอนทิตีตัวแทนจำหน่าย

ตั้งค่าคุณสมบัติการเชื่อมต่อของ DataContext เป็น "ไม่มี" และลบการตั้งค่าแอปพลิเคชันการเชื่อมต่อสตริงและไฟล์การกำหนดค่าแอปพลิเคชัน (app.config) ฉันไม่ชอบความจริงที่ว่า Visual Studio ฉีดสตริงการเชื่อมต่อให้ฉัน ฉันชอบทำเอง

นั่นเป็นเหตุผลที่ฉันได้เพิ่มคลาสบางส่วนต่อไปนี้ลงในแอสเซมบลีนี้ซึ่งจัดการกับการเริ่มต้น DataContext ด้วยสตริงการเชื่อมต่อ ส่วนเดียวที่เราต้องเห็นด้วยคือสตริงการเชื่อมต่อมีชื่อว่า "Winddirection"

รายการ 1 - คลาส 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 ) { }
}

อย่าลืมเพิ่มการอ้างอิงไปยังชุดประกอบการกำหนดค่า ตราบใดที่คุณจะรวมสตริงการเชื่อมต่อที่เรียกว่า "Winddirection" ในแอปพลิเคชันที่อ้างอิงแอสเซมบลีนี้มันจะใช้งานได้ดี

ตรรกะธุรกิจ

เราเกือบจะอยู่ที่นั่น เพียงแค่รอเราจะผ่านมันไป ตอนนี้เพิ่มไลบรารีรหัสใหม่ลงในโซลูชันที่เรียกว่า "cgeers.winddirection.managers" ลบไฟล์ class1.cs ที่สร้างขึ้นโดยอัตโนมัติและเพิ่มการอ้างอิงไปยังชุดประกอบ System.data.linq

เพิ่มคลาสใหม่ที่เรียกว่า Manager และเพิ่มรหัสต่อไปนี้:

รายการ 2 - ตัวจัดการบทคัดย่อ

 public abstract class Manager
{
    protected Manager ( )
    {
        Context = new WindDirectionDataContext ( ) ;
    }

    public WindDirectionDataContext Context { get ; set ; }
}

คลาสที่ง่ายมากนี้สร้าง DataContext ใหม่ซึ่งเราสามารถปลดปล่อยการสืบค้น LINQ ของเราในภายหลัง

ถัดไปเพิ่มคลาสที่เรียกว่า "ResellerManager" ในโครงการและเพิ่มรหัสที่แสดงในรายการ 3

รายชื่อ 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" ;
    }
}

คลาส Manager นี้ลงมาจากคลาส Manager Abstract ของเราและเพิ่มวิธีหนึ่งที่เรียกว่า GetTheMeforDomain (... ) วิธีนี้ค้นหาธีมของผู้ค้าปลีกตามชื่อโดเมนที่กำหนด เนื่องจากแต่ละโดเมนเชื่อมโยงกับผู้ค้าปลีกเพียงตัวเดียวสิ่งนี้จึงไม่มีปัญหา

Voila นั่นคือการเข้าถึงข้อมูลทั้งหมดที่จำเป็นสำหรับแอปพลิเคชันตัวอย่างของเรา เราจำเป็นต้องคิดธีมของผู้ค้าปลีกตามโดเมนของคำขอที่เข้ามาแล้วเราต้องใช้มัน

หมายเหตุ : ระวังการใช้บริบท LINQ ถึง SQL ในแอปพลิเคชัน ASP.NET แม้ว่าจะไม่ได้แสดงให้เห็นในบทความนี้เพราะมันจะเบี่ยงเบนความสนใจมากเกินไปจากความพยายามหลักของเรา แต่ขอแนะนำให้สร้างบริบทเดียวต่อคำขอเท่านั้น จัดเก็บบริบทใน httpContext ของคำขอเพื่อให้คุณสามารถเข้าถึงได้ตลอดเวลาในระหว่างการร้องขอ

เมื่อย้อนกลับไปฉันเขียนบทความเกี่ยวกับเรื่องนี้โดยเฉพาะลองดูบทความ Entity Framework ObjectContext ที่นี่ แม้ว่ามันจะเกี่ยวข้องกับเฟรมเวิร์กเอนทิตีแทน LINQ ถึง SQL แต่ก็ยังคงใช้งานได้

แอปพลิเคชันเว็บ ASP.NET MVC

ขั้นตอนสุดท้ายในการกรอกแอปพลิเคชันตัวอย่างพื้นฐานของเราคือการเพิ่มโครงการเว็บไซต์ใหม่ลงในโซลูชัน เพิ่มโครงการใหม่ลงในโซลูชันตามเทมเพลตโครงการ ASP.NET MVC Web Application Project และตั้งชื่อ "MVCapplication" คุณจะถูกถามว่าคุณต้องการสร้างโครงการทดสอบหน่วยสำหรับแอปพลิเคชันนี้หรือไม่ เลือก "ไม่" เพื่อข้ามสิ่งนี้เพราะเราไม่ต้องการสำหรับบทความนี้

Visual Studio จะสร้าง "Hello, World!"-พิมพ์แอปพลิเคชัน ASP.NET MVC ที่มีจำนวนหน้าเริ่มต้น (หน้าแรกเกี่ยวกับการเข้าสู่ระบบ ... ฯลฯ ) เพิ่มสตริงการเชื่อมต่อของคุณลงในไฟล์ web.config และเพิ่มการอ้างอิงไปยัง cgeers.winddirection.database และ cgeers.winddirection.managers แอสเซมบลี

หมายเหตุ : web.config มีจำนวนการตั้งค่าการกำหนดค่าที่อ้างถึงสมาชิก ASP.NET โปรไฟล์บทบาท ... ผู้ให้บริการ คุณสามารถไปข้างหน้าและลบสิ่งเหล่านี้ได้ตามที่เราไม่ต้องการ

Solution Explorer ของคุณควรมีลักษณะคล้ายรูปที่ 4

รูปที่ 4 - Solution Explorer

หมายเหตุ : ในขณะที่เขียนบทความนี้ฉันใช้ ASP.NET MVC เวอร์ชัน 1.0 อย่างไรก็ตามเวอร์ชัน 2.0 จะเปิดตัวในอนาคตอันใกล้

ชุดรูปแบบ http โมดูล

เมื่อเรียกใช้เว็บแอปพลิเคชันสิ่งแรกที่ต้องคิดคือธีมที่ต้องใช้ สิ่งนี้จะต้องทำสำหรับทุกคำขอ ดังนั้นเสียบโมดูล HTTP ที่กำหนดเองในระบบคำขอที่เหมาะสม

เพิ่มคลาสใหม่ในโครงการ MVCapplication และเรียกมันว่า TheHtttpModule ให้คลาสใช้อินเทอร์เฟซ IHTTTPModule รหัสทั้งหมดสำหรับคลาสนี้แสดงในรายการ 4

บทความนี้ไม่ได้เป็นไพรเมอร์ในการเขียนโมดูล HTTP ดังนั้นหากคุณต้องการข้อมูลเพิ่มเติมโปรดตรวจสอบ "คำแนะนำ: การสร้างและลงทะเบียนโมดูล HTTP ที่กำหนดเอง" ใน MSDN

รายการ 4 - Themehttpmodule

 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 ( ) { }
}

โมดูล HTTP นี้เพิ่มตัวจัดการเหตุการณ์สำหรับเหตุการณ์ BeginRequest เหตุการณ์นี้เกิดขึ้นเป็นเหตุการณ์แรกในห่วงโซ่การดำเนินการ HTTP Pipeline เมื่อ ASP.NET ตอบกลับคำขอ

ที่นี่เราแยกชื่อโดเมนออกจากคำขอที่เข้ามา ต่อไปเราจะดึงธีมสำหรับโดเมนนี้โดยใช้วิธี GetTheMeforDomain (... ) ของ ResellerManager ผลลัพธ์จะถูกแคช ครั้งต่อไปที่คำขอสำหรับโดเมนนี้จะถูกเรียกใช้ชุดรูปแบบจะถูกดึงออกมาจากแคชและไม่มีการสืบค้นฐานข้อมูล

วิธี getDomain () เป็นวิธีการขยายสำหรับคลาส URI ตรวจสอบซอร์สโค้ดของบทความนี้เพื่อดูว่ามันทำงานอย่างไร ในทำนองเดียวกันคุณสามารถเลือกที่จะแยกโดเมนย่อย (เช่น: www, admin ... ฯลฯ ) จากคำขอ จากนั้นคุณสามารถขยายกลไกการออกแบบของคุณเพื่อใช้ธีมที่แตกต่างกันสำหรับโดเมนย่อยแต่ละโดเมน

สุดท้าย แต่ไม่น้อยที่สุดในการลงทะเบียน ThemehttpModule โดยการสร้างรายการในไฟล์ web.config สิ่งนี้จำเป็นเพื่อสมัครสมาชิกโมดูล HTTP ไปยังการแจ้งเตือนการร้องขอ

รายการ 5 - ลงทะเบียน Themehttpmodule

< httpModules >
  < add name = " ThemeHttpModule " type = " MvcApplication.ThemeHttpModule " />
  <!-- ... -->
</ httpModules >

โครงสร้างธีมโฟลเดอร์

เมื่อคุณเริ่มต้นแอปพลิเคชันเว็บคุณจะได้รับรูปลักษณ์เริ่มต้นและความรู้สึกดังที่แสดงในรูปที่ 5 Visual Studio จะสร้างหน้าเริ่มต้น (หน้าแรกเกี่ยวกับการเข้าสู่ระบบ ... ฯลฯ ) รวมถึงหน้าหลักและแผ่นสไตล์ เราจะใช้ไฟล์เหล่านี้เพื่อสร้างธีมเริ่มต้นของเรา

รูปที่ 5 - ชุดรูปแบบเริ่มต้นแอปพลิเคชัน ASP.NET MVC

โดยค่าเริ่มต้นไฟล์ทั้งหมดจะถูกบันทึกไว้ในโฟลเดอร์เนื้อหาและมุมมอง เราจำเป็นต้องใช้โครงสร้างไดเรกทอรีของเราเองเพื่อให้เราสามารถจัดกลุ่มธีมของเราได้อย่างมีเหตุผล ดังนั้นสร้างโฟลเดอร์ใหม่ที่เรียกว่าธีม สร้างโฟลเดอร์ย่อยสำหรับไดเรกทอรีธีมและเรียกว่าค่าเริ่มต้น ย้ายไดเรกทอรีเนื้อหาและมุมมองภายใต้ไดเรกทอรีเริ่มต้นนี้

หลังจากย้ายโฟลเดอร์เนื้อหาและมุมมองคุณต้องปรับคุณสมบัติ MasterPageFile ของคำสั่งหน้าสำหรับแต่ละมุมมอง! ค่าเก่าอ้างอิงตำแหน่งที่ไม่มีอยู่อีกต่อไป เปลี่ยน MasterPageFile = "~/views/shared/site.master" เป็น masterPageFile = "~/ธีม/เริ่มต้น/ดู/แบ่งปัน/site.master" !

รูปที่ 6 - ธีมเริ่มต้น

Voila ชุดรูปแบบเริ่มต้นของเราได้รับการตั้งค่าแล้ว หากคุณต้องการสร้างธีมใหม่คุณต้องสร้างโฟลเดอร์ใหม่และวางไว้ใต้โฟลเดอร์ธีม อย่างที่คุณเห็นในภาพหน้าจอก่อนหน้านี้เราจะสร้างธีมอื่น ๆ (สีเขียวสีส้มสีแดง) ในภายหลัง

ดูเอ็นจิ้น

เราเพิ่งย้ายหน้าหลักแผ่นสไตล์มุมมอง ... ฯลฯ ไปยังไดเรกทอรีอื่น หากเราเริ่มเว็บแอปพลิเคชันของเราตอนนี้เราจะได้รับข้อยกเว้นดังต่อไปนี้:

รูปที่ 7 - InvalidoperationException

ไม่พบมุมมอง 'ดัชนี' หรือต้นแบบ ค้นหาสถานที่ต่อไปนี้:

• ~/views/home/index.aspx
• ~/views/home/index.ascx
• ~/views/chared/index.aspx
• ~/views/chared/index.ascx

MVC กำลังพยายามค้นหามุมมองสำหรับหน้าเริ่มต้นเริ่มต้นของคุณ แต่ไม่พบในตำแหน่งเริ่มต้นที่ค้นหาดังนั้นคุณจะได้รับข้อยกเว้น เราย้ายไฟล์เหล่านี้ไปยังโฟลเดอร์ธีมเริ่มต้นของเราและในไม่ช้าเราจะสร้างธีมอื่น ๆ เราต้องการวิธีการแจ้ง MVC เกี่ยวกับสถานที่ที่จะค้นหามุมมองหน้าหลักมุมมองบางส่วน ... ฯลฯ สถานที่เหล่านี้แตกต่างกันไปตามธีมของผู้ค้าปลีก

ดังนั้นโดยพื้นฐานแล้วทั้งหมดที่เราต้องทำเพื่อสนับสนุนการสร้างมันใน ASP.NET MVC คือ:

• คิดว่าจะใช้ธีมใด สิ่งนี้ทำโดย ThemehttpModule ที่เราทำก่อนหน้านี้
• บอก ASP.NET MVC ที่จะค้นหามุมมองสำหรับชุดรูปแบบที่ระบุ

ในการทำเช่นนี้เราต้องเขียนเอ็นจิ้นมุมมองของเราเอง MVC ใช้เอ็นจิ้นมุมมองเพื่อแสดงหน้าสำหรับการตอบกลับ เอ็นจิ้นมุมมองนี้รับผิดชอบในการค้นหาหน้าหลักมุมมองและมุมมองบางส่วน โดยค่าเริ่มต้นใช้ WebFormViewEngine

เราจำเป็นต้องแทนที่เอ็นจิ้นมุมมองเริ่มต้นนี้ด้วยตัวเอง ในการทำเช่นนี้เพิ่มคลาสใหม่ที่เรียกว่า ThemedViewEngine ไปยังโครงการ MVCapplication และให้ลงมาจากคลาส WebFormViewEngine

รายการ 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
}

ในคอนสตรัคเตอร์ของเอ็นจิ้นมุมมองใหม่นี้เราตั้งค่า MasterLocationFormats, ViewLocationFormats และ PartialViewLocationFormats เป็นสถานที่ใหม่เช่น: ~/Themes/{2}/views/{1}/{0} .aspx

แต่ละเส้นทางมี 3 ส่วนที่กำหนดแบบไดนามิก

• {2} : ชื่อของธีม
• {1} : ชื่อของคอนโทรลเลอร์
• {0} : ชื่อของหน้าหลักมุมมองหรือมุมมองบางส่วน

ในการใช้เครื่องมือมุมมองใหม่คุณต้องลงทะเบียน ทำสิ่งนี้โดยการเพิ่มรหัสต่อไปนี้ไปยังตัวจัดการเหตุการณ์ Application_Start ที่อยู่ในไฟล์ global.asax.cs

รายการ 7 - ลงทะเบียน ThemedViewEngine

 protected void Application_Start ( )
{
    ViewEngines . Engines . Clear ( ) ;
    ViewEngines . Engines . Add ( new ThemedViewEngine ( ) ) ;

    RegisterRoutes ( RouteTable . Routes ) ;
}

ที่นี่คุณล้างเครื่องมือมุมมองใด ๆ ที่อาจโหลดก่อนหน้านี้และฉีดของคุณเอง ตอนนี้สิ่งที่เหลืออยู่คือการสอน View Engine วิธีการจัดรูปแบบเส้นทางการค้นหาใหม่เพื่อให้ค้นหาไฟล์ที่ร้องขอได้อย่างถูกต้อง ในการทำเช่นนี้คุณต้องแทนที่สองวิธีต่อไปนี้:

รายการ 8 - findPartialView (... ) & findView (... ) เมธอด

 public override ViewEngineResult FindPartialView ( ControllerContext controllerContext , string partialViewName , bool useCache )

public override ViewEngineResult FindView ( ControllerContext controllerContext , string viewName , string masterName , bool useCache )

ฉันจะไม่รวมรหัสสำหรับฟังก์ชั่นทั้งสองนี้ที่นี่เพราะมันค่อนข้างยาวและมีการอ้างอิงเล็กน้อยเกี่ยวกับวิธีการของผู้ช่วยส่วนตัว โดยทั่วไปสองวิธีนี้เป็นไปตามรูปแบบเดียวกัน:

• ดึงชุดรูปแบบใดที่ต้องโหลดโดยการตรวจสอบแคชของ httpapplication ชุดรูปแบบที่จะใช้นั้นถูกฉีดที่นี่โดย ThemehttpModule ของเรา
• จัดรูปแบบเส้นทางการค้นหาโดยการฉีดธีมคอนโทรลเลอร์และชื่อของหน้าหลักมุมมองหรือมุมมองบางส่วน
• ย้ำเส้นทางการค้นหาและตรวจสอบว่าหน้าหลักที่ร้องขอมุมมองหรือมุมมองบางส่วนมีอยู่หรือไม่
• หากไม่พบไฟล์ที่ร้องขอให้แทนที่ชุดรูปแบบด้วยธีมเริ่มต้นและทำซ้ำเส้นทางการค้นหาอีกครั้ง

ดังนั้น Engine มุมมองใหม่ของเราโดยทั่วไปค้นหาโฟลเดอร์ Themes ของเราและหากไม่สามารถค้นหาหน้าต้นแบบที่ร้องขอหรือมุมมองบางส่วนที่ใช้ในชุดรูปแบบเริ่มต้น แน่นอนธีมเริ่มต้นจะต้องสมบูรณ์และไม่สามารถมีไฟล์ที่ขาดหายไปได้

สิ่งนี้ช่วยให้คุณสามารถสร้างธีมที่มีเฉพาะหน้าหลักที่จะอ้างอิงแผ่นสไตล์หรือธีมที่แตกต่างกันซึ่งมีมุมมองและ / หรือมุมมองบางส่วนสำหรับเพียงส่วนเหล่านั้นที่คุณต้องการสไตล์แตกต่างกัน

โดยทำตามรูปแบบนี้คุณสามารถสร้างธีมที่แทนที่มุมมองบางอย่างและย้อนกลับไปที่มุมมองของชุดรูปแบบเริ่มต้นหากไม่มีมุมมองที่กำหนดเอง

ฉันใช้เครื่องมือมุมมองของฉันในการทำงานของบทความที่ยอดเยี่ยมของ Chris Pietschmann เกี่ยวกับการสร้างรูปแบบใน ASP.NET MVC ฉันขอแนะนำให้คุณชำระเงินบทความของเขาเนื่องจากมีข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของ Engine ภายใน

ด้วยเครื่องมือมุมมองใหม่ในสถานที่เราสามารถเรียกใช้เว็บแอปพลิเคชันอีกครั้งโดยไม่มีข้อยกเว้นใด ๆ เนื่องจากตอนนี้สามารถแก้ไขคำขอสำหรับหน้าหลักมุมมองและมุมมองบางส่วนได้

หมายเหตุ : ฉันเปลี่ยนรหัสเล็กน้อยเพื่อให้เมื่อเอ็นจิ้นมุมมองไม่สามารถแก้ไขคำขอสำหรับหน้าหลักมุมมองหรือมุมมองบางส่วนมันจะกลับไปที่ที่พบในชุดรูปแบบเริ่มต้น ดังนั้นอย่าลืมตรวจสอบซอร์สโค้ดของบทความนี้ด้วย

ธีมเพิ่มเติม

มาสร้างธีมใหม่อย่างรวดเร็ว เพิ่มโฟลเดอร์ใหม่ที่เรียกว่า "สีแดง" ใต้โฟลเดอร์ธีม คัดลอก site.master และ site.css จากธีมเริ่มต้นดังแสดงในรูปต่อไปนี้

รูปที่ 8 - ธีมสีแดง

เปิดแผ่นสไตล์ของธีมสีแดงและเปลี่ยนคุณสมบัติสีพื้นหลังขององค์ประกอบร่างกาย ตั้งค่าเป็นสีแดง ตอนนี้เปิดตาราง [ผู้ค้าปลีก] และตั้งค่าฟิลด์ธีมเป็น "สีแดง" สำหรับผู้ค้าปลีกที่มีการตั้งค่าโดเมนเป็น LocalHost รีสตาร์ทเว็บแอปพลิเคชันและตอนนี้ควรใช้หน้าหลักและแผ่นสไตล์ของธีมสีแดง

รูปที่ 9 - ชุดรูปแบบสีแดงในการดำเนินการ

ในทำนองเดียวกันคุณสามารถสร้างธีมสีส้มที่ไม่เพียง แต่มีหน้าหลัก แต่ยังมีมุมมองที่แตกต่างกันสำหรับโฮมเพจ

รูปที่ 10 - ธีมสีส้ม

ธีมสีส้มจะแสดงมุมมองใหม่สำหรับหน้าแรกแทนมุมมองเริ่มต้น หากคุณต้องการแทนที่มุมมองบางส่วนคุณสามารถทำได้ในลักษณะเดียวกัน เพียงคัดลอกมุมมองบางส่วนเริ่มต้นลงในตำแหน่งเดียวกันภายใต้โฟลเดอร์ธีมใหม่และปรับตามต้องการ

แผ่นสไตล์ไดนามิก

สำหรับแต่ละธีมตอนนี้คุณสามารถให้บริการหน้าหลักมุมมองและมุมมองบางส่วนที่แตกต่างกัน มีสถานการณ์ที่เหลืออีกหนึ่งสถานการณ์ที่ฉันต้องการสนับสนุน ผู้ค้าปลีกที่พอใจกับมุมมองเริ่มต้น แต่ต้องการปรับโลโก้บางสี ... สามารถรับความพึงพอใจได้อย่างง่ายดายโดยใช้แผ่นสไตล์ที่แตกต่างกับธีมเริ่มต้น

เพิ่มโฟลเดอร์ธีมใหม่ภายใต้ไดเรกทอรีธีมและเรียกว่าสีเขียว คัดลอกแผ่นสไตล์ของธีมเริ่มต้นไปยังธีมสีเขียวดังที่แสดงในรูปต่อไปนี้

รูปที่ 11 - ธีมสีเขียว

เปิดแผ่นสไตล์ของธีมสีเขียวและปรับคุณสมบัติสีพื้นหลังขององค์ประกอบร่างกายให้เป็นสีเขียว หากคุณตั้งค่าธีมสำหรับผู้ค้าปลีกด้วยโดเมน localhost เป็นสีเขียวและเริ่มแอปพลิเคชันคุณจะสังเกตเห็นว่ามันยังคงใช้แผ่นสไตล์ของธีมเริ่มต้น

สิ่งนี้เกิดจากความจริงที่ว่าธีมสีเขียวไม่มีหน้าหลักของตัวเอง มันใช้หน้าหลักของธีมเริ่มต้นและหน้าหลักนี้อ้างอิงแผ่นสไตล์ของตัวเอง

เปิดหน้าหลักของชุดรูปแบบเริ่มต้นและแทนที่บรรทัด:

 < link href =" ../../Content/Site.css " rel =" stylesheet " type =" text/css " />

กับ

 < link href =" <% " ="Html.GetThemedStyleSheet()" % /> rel="stylesheet"
type="text/css" / >

วิธี GetTheMedStyHeet () เป็นวิธีการขยายสำหรับคลาสยูทิลิตี้ HTML เพิ่มคลาสใหม่ที่เรียกว่า htmlhelperextensions ลงในโครงการและเพิ่มรหัสต่อไปนี้ลงไป

รายการ 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 ) ;
    }
}

เมธอด GetTheMedStyHeet () โหลดธีมจากแคชของ HTTPAPPATION และตรวจสอบว่าชุดรูปแบบนี้มีแผ่นสไตล์ของตัวเองหรือไม่ ถ้าไม่ใช่มันจะกลับไปที่แผ่นสไตล์ของธีมเริ่มต้น รหัสมีสตริงที่มีรหัสฮาร์ดบางตัว แต่ก็ไม่ได้ดีที่สุด แต่ก็เป็นเคล็ดลับ อย่าลังเลที่จะปรับปรุงวิธีนี้

หากคุณเริ่มเว็บแอปพลิเคชันตอนนี้คุณจะได้รับพื้นหลังสีเขียวที่ดี

สรุป

บทความนี้แสดงให้คุณเห็นว่าคุณสามารถเปิดใช้งานรูปแบบใน ASP.NET MVC ได้อย่างไร ในการทำเช่นนั้นคุณจะต้องใช้สองสิ่งคือ:

• ใช้โมดูล HTTP ที่กำหนดเองซึ่งโหลดธีมเพื่อใช้สำหรับแต่ละคำขอ
• ใช้เครื่องมือมุมมองที่กำหนดเองซึ่งช่วย ASP.NET MVC แก้ไขตำแหน่งสำหรับหน้าหลักมุมมองและมุมมองบางส่วนของธีม

ระบบธีมที่เราใช้ใช้ธีมเริ่มต้นและตรวจสอบว่าจำเป็นต้องแทนที่ส่วนของชุดรูปแบบเริ่มต้นนี้ด้วยชุดรูปแบบที่กำหนดเองหรือไม่ คุณสามารถรองรับหนึ่งในสถานการณ์ต่อไปนี้หรือรวมเข้าด้วยกัน:

• แทนที่แผ่นสไตล์ cascading (CSS)
• แทนที่หน้าหลัก
• แทนที่มุมมองและมุมมองบางส่วน