تعلم كيف تستخدم WebFormsMVP Framework فى ASP.Net

تعلم كيف تستخدم  WebFormsMVP Framework فى ASP.Net

تمهيد

سبق وأن تحدثنا عن MVP Pattern كمنط يتم إستخدامه فى ASP.Net , ومن لم يتابع هذا الدرس, ننصحه بالإطلاع , قد يجد شيئاً مفيداً “تعلم كيف تستخدم MVP Pattern فى ASP.Net ”. كان من المتوقع عاجلاً أم آجلاً , أو كما جرت العادة ان تظهر أداة لتجعل الأمر أكثر مرونة فى العمل ,فظهرت WebFormsMVP كمكتبة او التسمية الشائعة لها “Framework ” تقوم على تطبيق MVP Pattern داخل ASP. Net , ولكن لا جديد إلا أنها تقدم طريقة آخرى للعمل , ويبقى المبدأ كما هو Mode View Presenter . وكما تعرفنا فى الدرس السابق ,كيفية إضافة WebFormsMVP والحصول عليها , وهو بعنوان تعلم كيف تضيف مكونات Nuget إلى مشروعك “. فأحرص على إضافتها إن أردت متابعة الدرس .

مقدمة :-

حين نتحدث عنWebFormsMVP ,نجد أن لدينا نفس المبدأ ( Mode-View-Presenter ). ونفس طريقة العمل التى تحدثنا عنها فى الدرس السابق .وهى على هذا الشكل :-

 

لنربط بين الدرس السابق وهذا الدرس , يمكننا وضع بعض الثوابت التى سنسير عليها :

الثابت الأول:-

من الشكل نجد , انه دوماً ستصدر تفاعلات المستخدم من الواجهة View وتتجه إلى Presenter , حيث يقوم الـ Presenter بتحديث الـ Model ,لتتأثر بدورها View تلقائياً .وهذا ما تفعله بالفعل WebformsMVP.

الثابت الثانى :-

لابد من ربط الـView بـالـ Presenter . وذلك حتى يتم إنشاء قناة إتصال بينهم .ليستقبل الـ Presenter بدوره من الـ View . ومما يلى نحدد مقارنة بين تطبيق هذا الثابت فى حالة وجود WebFormsMVP وفى غيابه.

بدون WebFormsMVP كنا نقوم بفعل التالى :-

 

اما بإستخدام WebFormsMVP أصبحنا نعمل بالشكل التالى :

كما بالشكل فإن هناك Attribute تقوم بتسجيل الـ Presenter للصفحة التى نعمل عليها هنا .

من الشكل الأخير , نلاحظ ونسأل , أليس من المفترض أن ترث الصفحة من System.Web.Page ؟

الإجابة , تتضح, عندما نعرف ان WebFormsMVP جاءت لنا بمجموعة من الـ Classes التى فى باطنها ترث من System.Web.Page كمثال MvpPage كما نرى :-

كذلك الحال عند العمل مع User Control وهذا ماأوصوا به فى الموقع الرسمى , ولعل سبب هذا ,وجود توافق أكبر فى التعامل مع هذا النمط ,وبالطبع التعامل مع وظائف وخصائص الصفحة ليس كالتعامل مع مجردUser Control .

, وتتطلب WebFormsMVP عند التعامل مع UserControl ان يرث هذا الـ User Control من Class تسمى MvpUserControl , كما ترى بالشكل هكذا تركيبتها :-

ولاحظ إشتراكهما فى وجود OnInit الخاصة بـ Page أو User Control والهدف من وجود هذة ادالة ا هو تسجيل الـ View داخل الـ Presenter فى بداية دورة حياة الصفحة . وكما ستعرف بعد قليل أن الـ Presenter يمتلك خاصية تسمى View ,وهذة الخاصية ستشير إلى الـ View التابعة لهذا الـ Presenter .

 ولعلك لاحظت وجود خصائص مثال AutoDatabind وDataItem والبقية , فالجميع هنا جاءوا  للإستخدم عند العمل مع Data Bound Control ,والـ binding بشكل عام .

  وسواء أردت تسجيل Model فى عملك أم لا, وهذا الأمر إختيارى ,فإن هناك MvpPage , MvpUserControl , والتى نعرفها بـ Generic Types وذلك يقدم لك التعامل مع أى نوع تحدده إذا أردت أن تعمل فى وجود Model مثال التالى :-

وعند االتعامل مع الصفحات  نجد التالى :

وعلى هذا كما ترى ,فإن كلاهما يحتويان على خاصية تسمى Model ,وبها سيكون Instance من الClass التى سنحددها على انها Model . وسنفصل بعد قليل إن شاء الله .

ملحوظة :

Generic Type , توحى من ترجمتها انها نوعاً عام , بالفعل نوعاً عاماً غير محدد , نستخدمها حين نريد أن نشأ Class أو Method أوInterface أو Delegate أوغيرهم ونريد أن يستقبل الواحد منهم نوعاً مجهول , قد يكون Int ومرة قد يكون String أو قد يكون Class Car, ومرة قد يكون Class Person .وهكذا , والمختصر فيها , إعداد Class أو Method أو ما سبق ذكره ,لتقبل العمل مع أى نوع يتم تحديده لاحقاً .ولاتكفى هذة النبذة ,عليك بالإستزادة. فلن تاخذ منك إلا نصف الساعة على الأكثر لفهمها .

ملحوظة :-

كلمة Where بالاعلى تضع قيوداً على النوع المستخدم ,حيث انه عام , ولكن يمكن أن نضع عليه قيود , فهنا نجد انه لابد أن تكون الـModel من نوع Reference Type و الذى حدد ذلك هى كلمة Class بعد Where كذلك يجب أن تحتوى على Constructor Parameterless وحدد ذلك كلمة ()new .

الخاصية Model التى تم ذكرها بالأعلى ,تظهر فى حالة أنك فضلت أن تعمل مع وجود Model ,فإن عليك ان تعرف أن IView المستخدمه بالشكل السابق هى المانحة لهذة الخاصية Model و هذة الخاصية ستمثل الـ Model الذى قد مررته لها فهذا أصل وجودها فى الشكل السابق . ومن يقوم بإنشاء الـ Instance من هذا الـModel , وأعطائه القيم هو الـ Presenter فى الـ Constructor الخاص به , حيث يقوم بإنشاء هذا الـ Instance من الـ Model المستخدم عن طريق الـ Reflection وذلك لإنه لايعرف شئ عن View القادم إليه .كما سترى بالشكل التالى :-

فنجد الدالة InitializeDefaultModel ستقوم بإنشاء الـ Instance الذى تحدثنا عنه من الـ Model , ولا ننسى ان نشير إلى ان الـ Presenter يمتلك خاصية تسمى View وتمثل هنا الـ View بالطبع الذى تم تسجيله تابعاً لها .وإليك محتوى هذة الدالة :-

ولتتضح لك الامور إليك التخطيط التالى للخصائص التى نتحدث عنها :-

لعل التخطيط أن يوضح ما نريد أن نقوله ! . (على هامش الموضوع , هل أعجبتك الألوان : )  )

يقودنا هذا إلى الثابت الثالث وهو : دوماً يكون العمل والمعالجة داخل الــPresenter .

حيث نجد من التخطيط السابق , أن الـ Presenter يمتلك خاصية من View ومنها يمكن أن يعالج جميع خصائص وأحداث الـ View وبالطبع يمكن أن يصل إلى الخاصية Model باستخدام  خاصية View .

ملحوظة :-

Reflection , هى عملية قراءة الـ Metadata لـ Object ما . ونجد أن كل Assembly يحوى بداخله Metadata تخص وصف العناصر الموجودة بداخله , فما هذة الـ Metadata ؟ الـ Metadata تعتبر وصف أو ربما نقول معلومات عن Object ما , مثال , لو لدينا Class لانعرف عنها شئ , ولا نملك التعامل معها بشكل مباشر, فبإستخدام Metadata يمكن ان نعرف كم بها من خصائص أو دوال , وأى عنصر كان .ليس هذا فحسب ,بالأمس القريب , كان هناك سائل ,يقول لدى أسماء دوال مخزنة كقيم حرفية فى قاعدة البيانات , كيف لى أن أقوم بإستدعاء هذة الدوال من القاعدة وتنفيذها , فكان الجواب أن يستخدم الـ Reflection , نعم يمكن أن تنادى على دالة وتنفذها من خلال الـ Reflection , ولعل هذا ما يزيد الإمر يسراً , عند بناء Class فى وقت التنفيذ, أى أنها ليست موجودة فى وقت التطوير ,ومن المقرر ان تقوم بعمل compile لها وقت التشغيل .فكيف ستنادى عليها فى الكود إذ أنها لم تنشأ بعد, أى أنها لن توجد إلا فى وقت التنفيذ. لا اريد أن أطيل عليك , إجتهد فى معرفة Reflection , فلربما أسدت إليك معروفاً ذات يوم ! .

وعلى هذا , نجد انك فى حالة وجودك داخل الـ Presenter . يمكن أن تتعامل مع الـ view والـModel فى مكان واحد , وقبل أن نترك الحديث عن مكونات الـ Presenter سنجد أن بداخله عناصر آخرى مثال ,Context وcache وrequest و Response وغيرهم من العناصر الجوهرية للـ asp.net .كذلك يوفر لك الـ Presenter العمل مع المهام صاحبة الوقت الطويل فى التنفيذ من خلال الخاصية AsyncManager ولا ننسى إمكانية المشاركة بين كل الـViews التى تتبع نفس الـ Presenter من خلال الخاصية Message . وها هى تركيبة الـ Presenter الداخلية :-

ضع فى ذاكرتك هذا الشكل , حيث ستلاحظ اننا عند إنشاء Presenter سنقوم بعمل Implement لهذة الـ Class فى المثال آخر هذا الدرس إن شاء الله .

إلى هنا نلخص الأمر فى نقاط : –

  • الـ Presenter , سيقوم بالمعالجة للخصائص والأحداث الخاصة بـView وكذلك تحديث الـ Model.

  • الـ Model , ما هو إلا حقيبة بيانات ,فقط يحتفظ بالبيانات إلى ان يتم تمريرها إلى الـView .

  • الـView , هو المسئول عن إعطاء الأمر بالتنفيذ فقط .و قد يأخذ من الـ Model إن وجد.

كذلك قبل أن نبدأ فى مثالنا العملى ,احب أن نوه أن WebFormsMVP جاءت لنا وفى طياتها اداة بإسم PageDataSource و ما هى فى الإصل إلا الآداة التى نعرفها من قبل بإسم ObjectDataSource مع وجود بعض التعديلات لتتوافق مع MVP Pattern .حيث توفر لنا الإضافة والحذف والتعديل والتحديد و لتقبل العمل مع GridView و FormView وباقى أداوات Data-bound Controls .

كذلك جاءت معها class تدعم العمل مع HttpHandler بإسم MvpHttpHandler وأيضاً تدعم العمل مع WebService حيث تقدم Class بإسم MvpWebService .

وإليك مثال للتوضيح , والله المستعان وسنأخذ المثال فى الدرس السابق للمتابعة , ولكن احب أن انوه أن هناك أكثر من طريقة للتطبيق ,فقد نختلف فى اكيفية التطبيق ولكن يبقى المفهوم واحد :-

تمهيد :

هنا سنعمل مع المثال داخل UserControl , وما سيكون لدينا هو TextBox واداة Button وكذلك GridView وسنزيد عليها هذة المرة PageDataSource . على هذا الشكل :-

 

فى واقع الأمر , الـ Button هنا ,ليس له فائدة إلا انه يقوم بعمل Postback .وكان يمكن الإستغناء عنه بإستبدال TextBox بـ Dropdownlist مع ضبط الخاصية autoPostback بـالقيمة True . ولكن حتى لا نزيد الإمر تعقيداً ,أبقينا عليه كما هو ومن أراد أن يبتكر جديداً فالمجال مفتوح أمامه ..

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

خطوات العمل بالترتيب :-

1- يجب أن يكون لدينا UserControl يحتوى على الأدوات الموضحة بالشكل السابق .

 2- بعدها يمكننا إنشاء Model كما ترى :-

 

فقط مجرد Class بها خاصيتين , الأولى وهى Persons تمثل مجموعة من Class Person والتى تم ذكرها على النحو التالى فى الدرس السابق :-

حيث ستعرف فيما بعد قليل أن هذة الخاصية ستمثل مصدر إمداد أداة Gridview بالبيانات . والخاصية الأخرى وهى SearchTerm وتمثل نص البحث الذى سيتم آخذه من أداة TextBox .

3- بعد ذلك ,يمكننا الآن إنشاء الـ View وسيكون على النحو التالى :-

 وما هى إلا Interface بها حدث واحد ,وهو SearchPerson وكذلك دالة واحدة بإسم getPerson وهذة الدالة ستقوم فيما بعد بإعطاء الأمر للحدث بالتنفيذ , وكما ترى قد تم إنشاء Event Handler لهذا الحدث بإسم SearchEventHandler كما بالشكل التالى :-

  وهذا الحدث سيحمل فى طياته قيمة واحدة وهى قيمة البحث الماخوذة من أداة TextBox , ومن سيعطى الأمر بالتنفيذ لهذا الحدث هو View ولكن من سيقوم بالمعالجة هو بالتاكيد الـ Persenter .ومع هذا الحدث سنقوم بتمرير القيمة التى نريد البحث عنها من خلال الخاصية بالأعلى SearchTerm .

وكما ذكرنا من قبل , فإن View ستمتلك خاصية بإسم Model وتحتاج ان تتعامل معها , لذلك إن وجد Model فيمكن أن تمرره هنا . كما بالشكل الأول .

4- الخطوة القادمة , تتمركز فى إنشاء الـ Presenter الذى سيقوم بالمعالجة , وسيكون كالتالى:-

 كما ترى فإننا قمنا بستجيل الحدث SearchPerson ومعالجته هنا داخل الـ Presenter , ليقوم بدوره بالبحث داخل Data Access Layer وإيجاد الأشخاص المطابق لكلمة البحث القادمة كـArgument من الحدث .وإيضاً نقوم بتحدث الـModel .

5 – الخطوة القادمة ,هى تسجيل الكل لدى الـ User Control .

 إستخدام الحدث هنا , فقط لنقل البيانات من الـ View إلى الـ Presenter , وقد تختار أنت طريقة آخرى , فهذا يعود إليك .

نجد هنا لاشئ ,غير أن الدالة getPersons تنادى على الحدث SearchPerson والذى تم معالجته داخل الـ Presenter مع إرسال كلمة البحث من خلال الخاصية SearchTerm .

ملحوظة:

لاحظ اننا إستخدمنا فى طريقة كتابة الكود إسم الـNamespace مصحوباً بإسم الـ Class أى ( Namespace.ClassName )

بعد إستضافة User Control داخل صفحة ASPX , قم بكتابة نص البحث وقم بعمل Postback لترى النتائج قد تم عرضها داخل GridView .

كما نحب ان ننوه أيضاً انه كان يمكننا أن نقوم بعمل binding لخواص الـModel فى واجهة المستخدم كما رأيت فى كود تصميم الـ User Control هكذا : –

كما كان يمكن إستخدامها مع الـ Repeater ووغيره من الإدوات التى تستخدم لعرض البيانات.

لتظهر النتيجة على النحو التالى :-

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

 فى الختام , كنت أريد أن يكون العمل على قدر من البساطة , دون تعقيد , ولا أدرى إن كان هذا إنطباعك عنه أم لا . ولكن يلزمك بعض الوقت والتركيز للفهم , وكما أحب ان انوه على تطبيق قدمة Vb Helper يمكنك متابعته هنا , ويسر الله لكل طالب علم, والحمد لله رب العالمين .

ملف اكود المشروع هنــــــــــــــــــــــــــــــــــــــــــــا

2 thoughts on “تعلم كيف تستخدم WebFormsMVP Framework فى ASP.Net”

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

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s