أما إذا كنت تبحث عن دورة فى ASP.Net Web Forms , تجد التفاصيل هنــــــــــــــــــــــــــــــــــــــــــــــــــا
كذلك يوجد دورات لتعلم لغة البرمجة C# وكلك للحصول عل شهادات مايكروسوفت تجدها هنـــــــــــــــــــــــــــــــــــا
وفق الله الجميع لما فيه الخير
أحمد موسى
تعلم كيف تستخدم 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 يمكنك متابعته هنا , ويسر الله لكل طالب علم, والحمد لله رب العالمين .
تعلم كيف تضيف مكونات Nuget إلى مشروعك
تمهيد :-
جمعت لك مايكروسوفت , مكتبات وأداوت , كنت تبحث عنها شرقاً وغرباً (وربما شمالأ وجنوباً ),فى أداة واحدة , والأصح أن نقول فى مكان واحد , حيث توفر المزيد من السهولة فى التعامل من حيث الإضافة فقط. أى جمعت خطوات كثيرة فى ربما خطوة أو خطوتين فقط .
مقدمة :-
هناك عدة ادوات ظهرت ,لتجعل عمل مطورى الويب به بعض المرونة واليسر , ولعل الهدف أيضاً من وراء هذة الأدوات أن لا يتم تكرار كتابتها فى كل مشروع ينتجه المطور .لذلك ظهرت أداة , تمثل نظام معالجة الأخطاء والتى تعرف بإسم Elmah وكذلك ظهرت مكتبة , تزيد الأمر يسراً حين تأتى للعمل مع JavaScript , ألا , وهى JQuery ,وكذلك NUint والتى تتيح إجراء الإختبارات على اكواد مشاريعك والتى تسمى تحت مصطلح Unit Testing , ولا ننسى موضوع حديثنا, وهو الذى اتى بنا إلى هنا وهو WebFormsMVP , تلك المكتبة التى تم إنشائها ,حيث نستطيع إضافة MVP Pattern إلى ASP.Net وقد سبق وتقدم درس بإسم “تعلم كيف تستخدم MVP Pattern فى ASP.Net ”, وأيضاً NHibernate والتى تعمل كـORM لتخدم العمل مع قواعد البيانات والتى تلقى إهتماماً من المطورين فى إستخدامها بجانب إستخدام Entity Framework و LINQ2SQL ,ولاجديد , حين نذكر AjaxControlTollkit بأدواتها الرائعة ,و……….و……….. و………….. بالطبع لن نسرد الجميع , لإن هناك مئات من هذة الأدوات والمكتبات .ما يهمنا هنا , هو ان مايكروسوفت , حفظها الله 
, وجعل لها منافساً عربياً ,اللهم آمين , قد جمعت هذة الأدوات والمكتبات المذكورة وغيرها كثير فى شكل Plugin , او Extension , ولا يهم المسمى , المهم هنا أنها جمعتهم , ليتمكن المطور من إضافتهم وإستخدامهم فى Visual Studio بمزيد من المرونة . ووضعت لهم إسم وهو Nuget ,و تنطق بالعربية (نوجت, بضم النون ). فهيا بنا لخطوات الإضافة ومن ثم , العمل على أحد الإدوات التى تشتمل عليها Nuget .
كيف تضيف Nuget ؟
بالطبع بعد إنشائك لمشروع داخل Visual Studio أو Express Edition أيضاً ,نذهب إلى قائمة Tools , ثم نختار الأمر Extension Manager . تظهر لك نافذة , حدد فى الجانب الأيسر فيها , الأمر Online ,لتذهب للبحث عن الادوات والنماذج المتاحة Online .
وبعد البحث يمكنك أن تقوم بتحديد Nuget Package Manager و إن لم تجدها أمامك , يمكنك إستخدام اداة البحث فى الجانب الأيمن من هذة النافذة , كما ترى بالشكل بالأسفل , وستجد بجوارها كلمة download ,يمكنك الضغط علي هذة الكلمة , لتقوم بإضافة Nuget إلى مشروعك , وهذة هى الخطوة الأولى :-
الخطوة الثانية :-
هى إضافة احد مكونات Nuget إلى مشروعك , ,ولنقم بإضافة كمثال, مكتبات Jquery , إلى مشروعاً قمنا بإنشائه , تاتى هذة الخطوة بدايةً , مع الوقوف على ملف المشروع فى نافذة Solution ومن ثم الضغط Right Click , وإختيار Manage Nuget Packages (كما يمكن الوصول إلى هذا الأمر من قائمة Tools ) , لتظهر لك مجموعة من الأدوات والمكتبات التى أسلفنا ذكرها , فى المقدمة ,كما بالشكل :
بالطبع , بعد الضغط على Install ,سيصبح لديك ضمن ملفات مشروعك , مجلد باسم Scripts به مكتبات JQuery . بعدها يمكنك التمتع , باستخدام Jquery بلا قلق , فلديك المكتبة , ولا داعى لعناء الذهاب إلى الموقع الرسمى لها ,وتحميها , او ان تبحث عليها فى جهازك , فقط هى خطوة واحدة .
ومن أجل الهدف الذى جاء بنا إلى هنا, هيا بنا نقوم بإضافة WebFormsMVP إلى تطبيقنا .
من المؤكد انك لن تذهب هذة المرة إلى Extension Manager , ولكن , ستذهب للخطوة الثانية مباشرةً , لتختار Manage Nuget Packages ومنها للبحث عن WebFormsMVP وإضافتها .
أضفتها , ولم أعد أريدها ,كيف أقوم بإزالتها ؟
يتلخص الأمر فى الذهاب إلى نافذة Manage Nuget Packages ومن ثم إختيار Installed Packages ثم الضغط علىUninstall . كما بالشكل :-
مما سبق , ماذا تقدم لنا Nuget ؟
بإختصار شديد , بدلاً من البحث عن مكتبات عدة ,ومن ثم القيام بتحميلها على حهازك , ثم بعد ذلك , نأتى لإضافة Add Reference أو تضمينها ضمن ملفات المشروع (الإختيار هنا على حسب نوعية المكتبة ). ثم تبدأ بالإستخدام . جاءت Nuget لتوفر لك هذا فى خطوة واحدة كما رأيت بالأعلى .
الدرس القادم يتناول إستخدام WebFormsMVP فى ASP.Net إن شاء الله .
والحمد لله رب العالمين .
أحمد موسى , مدرب برمجة , ومترجم لكتب برمجية ,وكذلك كاتب لمقالات عربية وأجنبية .
أحدث التعليقات