ThemedViewEngine

ASP.NET MVC محرك العرض

مقدمة

تعاملت مشاركتي السابقة مع كيفية استخدام واجهة برمجة تطبيقات Magento مع WCF. جانب آخر من Magento صادفته هو دعم مرن للغاية للثقة.

يمكنك تصميم موضوع جديد يبدو مختلفًا بشكل جذري عن الموضع الافتراضي. لا يمكنك فقط تغيير الصور والألوان في أوراق الأنماط المتتالية ، بل يمكنك أيضًا إعادة تعريف المناطق (الرأس ، المحتوى ، تذييل ...) التي تشكل صفحة. لكل منطقة يمكنك تحديد أي HTML يتم حقنها فيها. يمنحك هذا أقصى قدر من تخصيص قوة موقعك.

يتم دعم Theming in ASP.NET خارج الصندوق. باستخدام مجلد App_themes ، يمكنك تخصيص مظهر وموقعك ، ولكن قد يكون هذا النظام مرهقًا.

تم تصميم Magento باستخدام نمط MVC ، تمامًا مثل إطار ASP.NET MVC. وهذا هو محور هذا المقال. كيف نذهب لتنفيذ Theming في ASP.NET MVC؟

لنبدأ ...

الأهداف

قبل أن نبدأ الترميز ، دعنا نلخص الأهداف التي نريد تحقيقها. دعنا نفترض أننا نملك شركة تستورد الأثاث المصنوع في الصين وفيتنام والجنوب كوريا ... إلخ. نحن لا نبيع مباشرة للمستخدمين النهائيين ، ولكن للبائعين.

نريد تصميم تطبيق ويب يعمل بالطاقة ASP.NET MVC يمكن استخدامه كموقع للتجارة الإلكترونية من قبل جميع البائعين لدينا. كل موزع لديه اسم مجال خاص به ويريد بيع بضائعه عبر الإنترنت. يرتبط كل من هذه المجالات بتطبيق الويب الخاص بنا.

الوظيفة التي يوفرها تطبيق الويب هي نفسها لكل موزع ، لكن كل موزع يريد تخصيص متجره عبر الإنترنت من خلال تطبيق موضوع مخصص. سندعم المواقف التالية:

• استبدل ورقة نمط المتتالية (CSS) : يسعد بعض البائعين باستخدام السمة الافتراضية ، ولكنهم يريدون فقط تغيير الشعار ، وبعض ألوان الخلفية ، ونوع الخط ... إلخ. يمكن تحقيق ذلك بسهولة من خلال وجود السمة الافتراضية استخدام ورقة نمط مختلفة.
• استبدل الصفحة الرئيسية : بالنسبة لأولئك البائعين الذين يريدون أكثر قليلاً ، يمكننا أن نقدم استبدال الصفحة الرئيسية وورقة الأنماط تمامًا. ستكون المشاهدات والوجهات الجزئية المستخدمة هي تلك الخاصة بالموضوع الافتراضي.
• استبدل المشاهدات والطرق الجزئية : إذا كان الموزع يريد عرضًا مختلفًا لصفحة تفاصيل المنتج على سبيل المثال ، فسيكون ذلك ممكنًا عن طريق إنشاء طريقة عرض جديدة وإضافتها إلى موضوعه. سيتم بعد ذلك استبدال العرض الافتراضي من السمة الافتراضية بهذا العرض الجديد. يجب أن يكون الشيء نفسه ممكنًا لوجهات النظر الجزئية (مثل التحكم في تسجيل الدخول)

لذلك يتعين علينا معرفة كيف يمكننا استبدال ورقة الأنماط (CSS) ، والصفحة الرئيسية ، ووجهات النظر ، ووجهات النظر الجزئية.

وضع الأسس

قبل أن نتمكن من البدء ، نحتاج إلى وضع الأساس. لنبدأ ببناء الأساسيات لتطبيق تجريبي بسيط.

ملاحظة : في هذا القسم ، أعطي نظرة عامة سريعة على إعداد تطبيق تجريبي بحيث يمكن إظهار ميزة Theming. هذا مجرد نهج سريع وسهل. ينصب تركيز هذه المقالة على كيفية تصميم نموذج مجال ، وتصميم طبقة منطق عملك ... إلخ. لذلك أحافظ على هذا أقصر قدر الإمكان. لا تتردد في تحسينه.

قاعدة البيانات

قم بإنشاء قاعدة بيانات جديدة باستخدام SQL Server Express (2005 أو 2008). مستوحاة من قاعدة بيانات NorthWind قمت بتسمية قاعدة البيانات الخاصة بي [WindDirection].

تحتوي قاعدة البيانات هذه على جدول واحد يسمى [Reseller]. تصميم الجدول كما هو موضح في الشكل التالي.

الشكل 1 - الجدول [الموزع]

كما ترون أن عمود المعرف هو المفتاح الأساسي ويستخدم مواصفات الهوية (= التلقائي). أضف أيضًا قيدًا فريدًا على عمود المجال لأن كل موزع لديه مجاله الفريد.

ملاحظة : يحتوي الكود المصدري المصاحب لهذا المقال على برنامج نصي (DDL.SQL) يتيح لك إنشاء هذا الجدول بسرعة إذا كنت لا ترغب في تصميمه باليد.

الجزء الأخير من إعداد قاعدة البيانات لدينا هو إدخال بعض السجلات الوهمية لجدول [الموزع]. الرجاء إدخال السجلات التالية:

الشكل 2 - البائعون

لدينا أربعة من البائعين. لا يحتوي الموزع الأول على موضوع مخصص ويتراجع عن الموزع الافتراضي. جميع الآخرين لديهم موضوع مخصص خاص بهم.

الحل

ابدأ Visual Studio 2008 وقم بإنشاء حل فارغ جديد بعنوان "MVCapplication". أضف مكتبة رمز جديدة واتصل بها "cgeers.winddirection.database". احذف ملف class1.css الذي تم إنشاؤه تلقائيًا.

بعد ذلك ، أضف عنصرًا جديدًا إلى SQL Classes وتسميته "DataClasses". أعد تسمية DataContext الجديد إلى "WinddirectionDataContext". الآن اسحب جدول [Reseller] من علامة التبويب Explorer Server على سطح المصمم LINQ إلى SQL.

الشكل 3 - كيان الموزع

قم بتعيين خاصية اتصال DataContext على "none" وحذف إعداد تطبيق سلسلة الاتصال وملف تكوين التطبيق (app.config). أنا لست مغرمًا بحقيقة أن Visual Studio يضخ سلسلة الاتصال بالنسبة لي. أحب أن أفعل ذلك بنفسي.

لهذا السبب أضفت الفئة الجزئية التالية إلى هذا التجميع الذي يتولى تهيئة DataContext مع سلسلة اتصال. الجزء الوحيد الذي يجب أن نتفق عليه هو أن سلسلة الاتصال تسمى "اتجاه الريح".

قائمة 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 ) { }
}

لا تنس إضافة إشارة إلى مجموعة التشكيل. طالما ستقوم بتضمين سلسلة اتصال تسمى "اتجاه الريح" في التطبيقات التي تشير إلى هذه التجميع ستعمل بشكل جيد.

منطق العمل

نحن هناك تقريبا. فقط تمسك ، سنقوم به. أضف الآن مكتبة رمز جديدة إلى الحل بعنوان "cgeers.winddirection.managers". احذف ملف class1.cs الذي تم إنشاؤه تلقائيًا وإضافة مرجع إلى مجموعة System.Data.linQ.

أضف فئة جديدة تسمى Manager وأضف الكود التالي إليها:

قائمة 2 - مدير مجردة

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

    public WindDirectionDataContext Context { get ; set ; }
}

تنشئ هذه الفئة البسيطة للغاية مجموعة بيانات جديدة يمكننا من خلالها إطلاق استفسارات 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" ;
    }
}

تنحدر فئة المدير هذه من فئة المدير التجريدي الخاص بنا ويضيف طريقة واحدة تسمى getTheMefordomain (...). تبحث هذه الطريقة عن موضوع الموزع بناءً على اسم مجال معين. نظرًا لأن كل مجال يرتبط بشكل فريد بموزع واحد ، فهذا لا يمثل مشكلة.

Voila ، وهذا هو كل الوصول إلى البيانات المطلوب لتطبيقنا التجريبي. نحتاج إلى معرفة موضوع الموزع بناءً على مجال الطلب الوارد ومن ثم يتعين علينا تطبيقه.

ملاحظة : احذر من استخدام سياق LINQ إلى SQL في تطبيق مدعوم من ASP.NET. على الرغم من عدم توضيحه في هذه المقالة ، لأنه سيصرف انتباهنا عن مسعىنا الرئيسي ، إلا أنه من المستحسن إنشاء سياق واحد فقط لكل طلب. قم بتخزين السياق في HTTPContext للطلب بحيث يمكنك الوصول إليه في جميع الأوقات أثناء الطلب.

بعد فترة من ذلك كتبت مقالًا على وجه التحديد حول هذا الأمر ، تحقق من مقالة Entity Framework ObjectContext هنا. على الرغم من أنه يتعامل مع إطار الكيان بدلاً من LINQ إلى SQL ، إلا أنه لا يزال قابلاً للتطبيق.

تطبيق الويب ASP.NET MVC

الخطوة الأخيرة في إكمال تطبيق العرض التجريبي الأساسي لدينا هي إضافة مشروع موقع ويب جديد إلى الحل. أضف مشروعًا جديدًا إلى الحل استنادًا إلى قالب مشروع تطبيق ASP.NET MVC ويب وتسميته "mvcapplication". ستُسأل عما إذا كنت تريد أيضًا إنشاء مشروع اختبار الوحدة لهذا التطبيق. اختر "لا" لتخطي هذا لأننا لا نحتاجه لهذه المقالة.

سيقوم Visual Studio بإنشاء "Hello ، World!"-اكتب تطبيق ASP.NET MVC الذي يحتوي على عدد من الصفحات الافتراضية (المنزل ، حول ، تسجيل الدخول ... إلخ.). أضف سلسلة الاتصال الخاصة بك إلى ملف web.config وأضف مراجع إلى cgeers.winddirection.database و cgeers.winddirection.managers.

ملاحظة : يحتوي Web.Config على عدد من إعدادات التكوين التي تشير إلى عضوية ASP.NET ، ملف التعريف ، الأدوار ... مقدمي الخدمات. يمكنك المضي قدمًا وحذفها لأننا لا نحتاج إليها.

يجب أن يشبه المستكشف الحل الخاص بك الشكل 4.

الشكل 4 - مستكشف الحلول

ملاحظة : في وقت كتابة هذا المقال ، أستخدم ASP.NET MVC الإصدار 1.0. ومع ذلك ، سيتم إصدار الإصدار 2.0 في المستقبل القريب.

موضوع وحدة HTTP

عند تشغيل تطبيق الويب ، فإن أول شيء يحتاج إلى اكتشافه هو الموضوع الذي يحتاج إلى تطبيقه. يجب القيام بذلك لكل طلب واحد. لذا فإن توصيل وحدة HTTP مخصصة في خط الطلب يبدو مناسبًا.

أضف فئة جديدة إلى مشروع MVCAPPlication واتصل بـ It themehttpmodule. اطلب من الفصل تنفيذ واجهة IHTTPModule. يتم عرض الكود بأكمله لهذه الفئة في القائمة 4.

هذه المقالة ليست تمهيديًا في كتابة وحدات HTTP ، لذا إذا كنت بحاجة إلى مزيد من المعلومات ، فيرجى مراجعة مقالة "تجول: إنشاء وتسجيل وحدة HTTP مخصصة على MSDN.

قائمة 4 - السمة httpmodule

 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 للتنفيذ عندما يستجيب ASP.NET لطلب.

هنا نستخرج اسم المجال من الطلب الوارد. بعد ذلك ، نسترجع موضوع هذا المجال باستخدام طريقة Resellermanager's GetTheMefordomain (...). ثم يتم تخزين النتيجة مؤقتًا. في المرة التالية التي يتم فيها تشغيل طلب هذا المجال ، سيتم استرداد السمة من ذاكرة التخزين المؤقت ولن يتم إطلاق أي استعلام لقاعدة البيانات.

طريقة getDomain () هي طريقة تمديد لفئة URI. تحقق من رمز المصدر لهذه المقالة لمعرفة كيفية عملها. بطريقة مماثلة ، يمكنك اختيار استخراج النطاق الفرعي (على سبيل المثال: www ، المسؤول ... إلخ) من الطلب. يمكنك بعد ذلك توسيع محرك therming لتطبيق موضوعات مختلفة لكل مجال فرعي من المجال.

أخيرًا وليس آخرًا ، قم بتسجيل 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 = "~/temes/default/views/shared/site.master" !

الشكل 6 - الموضوع الافتراضي

Voila ، تم إعداد موضوعنا الافتراضي. إذا كنت ترغب في إنشاء سمة جديدة تحتاج فقط إلى إنشاء مجلد جديد ووضعه تحت مجلد الموضوعات. كما ترون في لقطة الشاشة السابقة ، سنقوم بإنشاء بعض الموضوعات الأخرى (الأخضر والبرتقالي والأحمر) لاحقًا.

عرض المحرك

لقد نقلنا للتو صفحاتنا الرئيسية وأوراق الأنماط والآراء ... إلخ. إلى دليل آخر. إذا بدأنا تطبيق الويب الخاص بنا الآن ، فسوف نتلقى الاستثناء التالي:

الشكل 7 - InvalidOperationException

لا يمكن العثور على عرض "فهرس" أو سيده. تم البحث في المواقع التالية:

• ~/وجهات النظر/الصفحة الرئيسية/index.aspx
• ~/وجهات النظر/الصفحة الرئيسية/index.ascx
• ~/عرض/مشترك/index.aspx
• ~/عرض/مشترك/index.ascx

تحاول MVC تحديد موقع عرض لصفحة البدء الافتراضية الخاصة بك ، ولكن لا يمكن العثور عليها في المواقع الافتراضية التي يبحث عنها وبالتالي تتلقى استثناء. لقد نقلنا هذه الملفات إلى مجلد السمة الافتراضي الخاص بنا ، وسرعان ما سنقوم بإنشاء موضوعات أخرى. نحتاج إلى وسيلة لإبلاغ MVC بالمواقع التي للبحث عن طرق العرض ، والصفحة الرئيسية ، والطرق الجزئية ... إلخ. هذه المواقع تختلف Depening على موضوع الموزع.

لذلك كل ما نحتاج إلى القيام به لدعمهم في ASP.NET MVC هو:

• اكتشف أي موضوع لاستخدامه. يتم ذلك بواسطة themehttpmodule التي صنعناها في وقت سابق.
• أخبر ASP.NET MVC أين يمكنك البحث عن طرق العرض للموضوع المحدد.

للقيام بذلك ، نحتاج إلى كتابة محرك العرض الخاص بنا. يستخدم MVC محرك عرض لتقديم صفحات للاستجابة. محرك العرض هذا مسؤول عن تحديد موقع الصفحة الرئيسية ووجهات النظر والآراء الجزئية. بشكل افتراضي ، يتم استخدام WebFormViewEngine.

نحتاج إلى استبدال محرك العرض الافتراضي هذا بمفردنا. للقيام بذلك ، أضف فئة جديدة تسمى temedViewEngine إلى مشروع MVCapplication وجعلها تنحدر من فئة WebFormViewEngine.

قائمة 6 - TomedViewEngine

 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 إلى مواقع جديدة ، على سبيل المثال: ~/temes/{2}/views/{1}/{0} .aspx.

يحتوي كل مسار على 3 أجزاء يتم تحديدها ديناميكيًا.

• {2} : اسم السمة.
• {1} : اسم وحدة التحكم.
• {0} : اسم الصفحة الرئيسية ، العرض أو العرض الجزئي.

من أجل استخدام محرك View الجديد الذي تحتاجه لتسجيله. قم بذلك عن طريق إضافة الكود التالي إلى معالج الأحداث Application_Start الموجود في ملف Global.asax.cs.

قائمة 7 - سجل themedViewEngine

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

    RegisterRoutes ( RouteTable . Routes ) ;
}

يمكنك مسح أي محركات عرض قد تكون قد تم تحميلها مسبقًا وحقنها. الآن يبقى كل ما يبقى توجيه محرك العرض كيفية تنسيق مسارات البحث الجديدة بحيث يجد الملفات المطلوبة بشكل صحيح. للقيام بذلك ، تحتاج إلى تجاوز الطريقتين التاليتين:

قائمة 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. يتم حقن الموضوع الذي سيتم استخدامه هنا من قبل موضوعنا.
• قم بتنسيق مسارات البحث عن طريق حقن السمة ووحدة التحكم واسم الصفحة الرئيسية أو العرض أو العرض الجزئي.
• تكرار مسارات البحث وحدد ما إذا كانت الصفحة الرئيسية المطلوبة أو العرض أو العرض الجزئي موجودة.
• إذا تعذر العثور على الملف المطلوب ، فاستبدل السمة بالموضوع الافتراضي وتكرار مسارات البحث مرة أخرى.

لذا ، فإن محرك العرض الجديد الخاص بنا يبحث بشكل أساسي عن مجلد السمات لدينا ، وإذا لم يتمكن من العثور على الصفحة الرئيسية المطلوبة أو العرض أو العرض الجزئي ، فإنه يستخدم المظهر الافتراضي. Ofcourse يجب أن يكون السمة الافتراضية كاملة ولا يمكن أن يكون لها أي ملفات مفقودة.

يمكّنك ذلك من إنشاء سمات تحتوي فقط على صفحة رئيسية تشير بدورها إلى ورقة أو مواضيع مختلفة تحتوي على طرق عرض و / أو طرق عرض جزئية لتلك الأقسام التي تريد تصميمها بشكل مختلف فقط.

باتباع هذا النمط ، يمكنك إنشاء موضوعات لا تتجاوز سوى طرق عرض معينة وتتراجع عن وجهات نظر السمة الافتراضية إذا لم يتم توفير عرض مخصص.

لقد استندت إلى محرك View على عمل مقال كريس بيتشمان الممتاز حول العلم في ASP.NET MVC. أقترح عليك الخروج من مقالته لأنه يحتوي على مزيد من المعلومات حول كيفية عمل محرك العرض داخليًا.

مع وجود محرك View الجديد في مكانه ، يمكننا تشغيل تطبيق الويب مرة أخرى دون أي استثناءات لأنه قادر الآن على حل طلبات الصفحة الرئيسية ومشاهدات المشاهدات الجزئية.

ملاحظة : لقد قمت بتغيير الكود قليلاً بحيث عندما لا يستطيع محرك العرض حل طلب للحصول على صفحة رئيسية معينة أو عرض أو عرض جزئي ، فإنه يعود إلى تلك الموجودة في السمة الافتراضية. لذا تأكد من مراجعة الكود المصدري لهذه المقالة أيضًا.

موضوعات إضافية

دعونا ننشئ سمة جديدة بسرعة. أضف مجلد جديد يسمى "Red" تحت المجلد للموضوعات. انسخ site.master و site.css من السمة الافتراضية كما هو موضح في الشكل التالي.

الشكل 8 - الموضوع الأحمر

افتح ورقة نمط السمة الأحمر وتغيير خاصية لون الخلفية لعنصر الجسم. اضبطها على اللون الأحمر. افتح الآن جدول [Reseller] وقم بتعيين حقل السمة على "Red" للموزع الذي يتم تعيين نطاقه على المضيف المحلي. أعد تشغيل تطبيق الويب ويجب الآن استخدام الصفحة الرئيسية وورقة النمط للموضوع الأحمر.

الشكل 9 - الموضوع الأحمر في العمل

وبالمثل ، يمكنك إنشاء سمة برتقالية لا تحتوي فقط على صفحة رئيسية ولكن أيضًا طريقة عرض مختلفة للصفحة الرئيسية.

الشكل 10 - موضوع برتقالي

ستقدم موضوع Orange العرض الجديد للصفحة الرئيسية بدلاً من العرض الافتراضي. إذا كنت ترغب في استبدال طريقة عرض جزئية ، فيمكنك القيام بذلك بنفس الطريقة. ما عليك سوى نسخ العرض الجزئي الافتراضي في نفس الموقع ضمن مجلد السمة الجديد وضبطه حسب الحاجة.

ورقة الأنماط الديناميكية

لكل موضوع ، يمكنك الآن تقديم صفحات رئيسية مختلفة ووجهات النظر والآراء الجزئية. هناك سيناريو واحد متبقي أرغب في دعمه. البائعون الذين راضون عن العرض الافتراضي ولكنهم يريدون فقط ضبط الشعار ، وبعض الألوان ... إلخ. يمكن الرضا بسهولة عن طريق تطبيق ورقة نمط مختلفة على السمة الافتراضية.

أضف مجلد موضوع جديد ضمن دليل الموضوعات ودعاه باللون الأخضر. انسخ ورقة النمط للموضوع الافتراضي إلى السمة الخضراء كما هو موضح في الشكل التالي.

الشكل 11 - الموضوع الأخضر

افتح ورقة نمط السمة الخضراء وضبط خاصية لون الخلفية لعنصر الجسم إلى الأخضر. إذا قمت بتعيين السمة للموزع مع Domain LocalHost إلى الأخضر وبدء التطبيق ، فستلاحظ أنه لا يزال يستخدم ورقة النمط للموضوع الافتراضي.

هذا ناتج عن حقيقة أن الموضوع الأخضر ليس له صفحة الرئيسية الخاصة به. يستخدم الصفحة الرئيسية للموضوع الافتراضي وتشير هذه الصفحة الرئيسية إلى ورقة نمطها الخاصة.

افتح الصفحة الرئيسية للموضوع الافتراضي واستبدل السطر:

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

مع

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

طريقة GetTheMedStyleSheet () هي طريقة تمديد لفئة الأداة المساعدة 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 ) ;
    }
}

تقوم طريقة getTheMedStyLesheet () بتحميل السمة من ذاكرة التخزين المؤقت لـ HTTPapplication وتحقق مما إذا كان هذا الموضوع يحتوي على ورقة نمط خاصة به. إذا لم يكن الأمر كذلك ، فسيتراجع عن ورقة أنماط السمة الافتراضية. يحتوي الرمز على بعض السلاسل المرمزة ، على الرغم من أنها ليست مثالية ، فهي تقوم بالخدعة. لا تتردد في تحسين هذه الطريقة.

إذا بدأت تطبيق الويب الآن ، فستحصل على خلفية خضراء لطيفة.

ملخص

توضح لك هذه المقالة كيف يمكنك تمكينهم في ASP.NET MVC. للقيام بذلك ، تحتاج فقط إلى تنفيذ شيئين ، وهما:

• قم بتنفيذ وحدة HTTP مخصصة تقوم بتحميل السمة لاستخدامها لكل طلب.
• قم بتنفيذ محرك عرض مخصص يساعد ASP.NET MVC على حل المواقع للصفحات الرئيسية للموضوع ووجهات النظر والآراء الجزئية.

يستخدم نظام Theming الذي قمنا بتنفيذه سمة افتراضية ويتحقق مما إذا كان يحتاج إلى استبدال أجزاء من هذا السمة الافتراضية بموضوع مخصص. يمكنك بسهولة دعم أحد السيناريو التالي أو الجمع بينها:

• استبدل ورقة الأنماط المتتالية (CSS)
• استبدل الصفحة الرئيسية
• استبدال المشاهدات والآراء الجزئية