السلام عليكم ورحمة الله وبركاتة .
من خلال متابعتي لـ ASP.NET Web Forms لقراءة أخر المستجدات عند هذا الـ Framework وطبعا كنت في فترة والى ألان أتعلم على هذه التقنية تكرر أمامي مصطلح كثيرا وهو مصطلح MVC, فقررت أن ابحث عن معلومات تكون متعلقة بهذا المصطلح, فتوجهت إلى الموقع الرئيسي وهو asp.net ودخلت إلى هذا القسم عند المقدمة لهذا المصطلح لفهم ما هو.
بعد قراءة ليست سريعة لكن لاستيعاب شيء جديد, لأنه فعلا كان شيء جديد بالنسبة لشخص تعامل مع ASP.NET Web Form لفترة, فكانت النتيجة هو أنني استنتجت أن هذه التقنية تكون لبناء تطبيقات ويب بشكل بديل للـ ASP.NET Web Form وأيضا مكملة لها في نفس الوقت حيث أن Framework لكلا التقنيتين يكون متشابه, على سبيل المثال سوف أتعامل مع خصائص موجودة في ASP.NET Web Form مثل الـ master pages , membership-based authentication لكن باختلاف التقنية فقط.
توجهت بعدها إلى الدروس الموضوعة في الموقع وخاصة كانت دروس الفيديو, فبدأت بمشاهدة درس يبني فيه مشروع بسيط يتحدث عن التقنية وفي نفس الوقت يتعامل مع قاعدة بيانات بسيطة , وبعد الانتهاء من المشاهدة وأنا احمل معي أفكار إرجاع البيانات وعرض الأدوات في الصفحة و الخ من ASP.NET Web Form, كانت علامات الاستفهام تحوم فوق رأسي, وبعدها قررت أن أقراء أكثر لفهم طريقة عمل هذه التقنية وصولا إلى مستوى جيد والذي سوف أحاول طرحة بعد قليل.
بعد هذه القصة البسيطة لكيفية معرفتي بـ MVC لنتقدم قليلا لمعرفة ماهي هذه التقنية بشكل ليس موسع, أنما كلام يكون سهل الفهم واستطيع تقريبك عزيزي القارئ إلى ما أريد, الـ MVC اختصار لثلاثة عناصر وهي Model-View-Controller حيث هنا احد الاختلافات التي سوف تجدها في طريقة بنائك لتطبيق الويب عن ASP.NET Web Form بأنك ستتعامل مع MVC-based Web applications.
فكانت ملاحظاتي وأنا هنا لست أقارن من ناحية تفضيل بل أحساس بفرق, فكما نعلم أننا عند استخدام ASP.NET Web Form سوف نتعامل مع أدوات server control بينما في الـ MVC سوف يكون التعامل مع أدوات الـ HTML العادية, وأيضا لاحظت انك لن تتعامل بشكل أساسي مع صفحات وبهذه الصفحة تكتب الكود وتضع الأدوات وأيضا الـ post back و الخ ... بل انك سوف تكون على نمط واحد وهو تعريف MVC فقط, وأيضا انك سوف يكون هناك فصل بين الكود وعن طريقة الإدخال وإخراج البيانات وفي طريقة العرض.
لنبدأ الحديث عن العناصر الثلاثة التي تم ذكرها سابقا و ما هو دورها في أي مشروع من مشاريع الـ MVC
Model: لربما يكون Model عبارة عن المواضيع الموجودة في موقعك أو ردود الأعضاء على هذه المواضيع, أي بمعنى آخر الـ Model له علاقة ببيانات موقعك سواء كانت من قاعدة البيانات أو قد تكون أكواد مساعدة في المشروع.
View: هذا الجزء يكون متعلق بـ User Interface, كما ذكرت سابقا ربما يكون الـ Model قد يكون عبارة عن مواضيع في قاعدة بيانات الموقع أذا الطريقة التي سوف تعرض هذه البيانات للمستخدم سوف يكون عبر هذا العنصر وهو الـ View وسوف يكون العرض باستخدام أدوات الـ HTML
:Controller عبارة عن الوسيط بين العنصرين السابقين, ذكرت في العنصر السابق انه مخصص لعرض الشكل النهائي للبيانات القادمة من العنصر الأول لكن لنقف قليلا ونسأل أنفسنا سؤال بسيط وهو كيف سوف يتم التعرف على أي View سوف يتم عرض البيانات القادمة, فيجيب علينا Controller ليكون الحل, فطريقة عمل الـ Controller هو بعد طلب اسم الـ Controller في المتصفح (وهذا سوف نتكلم عنه بعد قليل) يتم تنفيذ كل العمليات التي يرديها على هذه البيانات القادمة من العنصر الأول على سبيل المثال عمل اختيار لمواضيع تكون مرتبطة لقسم معين والخ... وبعدها يتم تحديد أي View سوف يتم عرض هذه البيانات فيه.
أعلم أن الكلام للعناصر الثلاثة بهذا الشكل صعب الاستيعاب لكن بعد أن يتم تطبيق مثال بسيط سوف تتضح الصورة بشكل اكبر.
لنبدأ:
افتح Visual studio كالمعتاد وقم باختيار,File – New Project – ASP.NET MVC 2 Web Application وأعطيه أي تسمية كما تريد واضغط موافق. ( ملاحظة أنا استخدم VS2010 )
بعد الضغط على زر موافق, سوف يظهر لك مربع حوار يسألك عن إذا كنت تريد عمل unit test للمشروع. في هذا المثال اختار الخيار NO واضغط موافق.
ستلاحظ عزيزي القارئ مجموعة من الملفات ومن ضمن هذه الملفات يوجد هناك ثلاثة ملفات تحمل أسماء المكونات التي تم شرحها سابقا Model-View-Controller, أذا لنتعرف على وضيفة هذه الملفات.
ملف الـ Content
يحمل الـ static file مثل ملفات الـ CSS والصور.
ملف الـ Controller
يحمل الـ Controllers الخاصة بمشروعك.
ملف الـ Model
يحمل الـ Models الخاصة بالمشروع
ملف Scripts
يحمل ملفات JavaScript
ملف الـ View
يحمل الـ views الخاصة بالمشروع.
لو عملنا توسع لملف الـView سوف نجد انه يحوي على ثلاث ملفات ما يهمنا في حاليا هو ملف Home وأيضا لو عملنا توسع إلى هذا الملف سنلاحظ وجود صفحتين وهما كالتالي Index.aspx و About.aspx.
لنفتح صفحة Index.aspx ونرى محتوياتها , سوف نلاحظ انه هناك تشابه عندما نستخدم الـ master page في ASP.NET Web Form.
بكل بساطة عزيزي القارئ تستطيع الآن أن تضغط على CTRL + F5 ستلاحظ انه سوف يفتح مشروع مثل الشكل التالي:
بما انك عزيزي القارئ تعاملت مع الـ master page فلن تتساءل من أين أتى كل هذا الشكل من أزرار والخ... , لكن ما يهمني أنا هو إيصال فكرة عمل العناصر الثلاثة التي تم شرحها سابقا.
انظر عزيزي القارئ إلى رابط الصفحة في أعلى المتصفح, سوف تلاحظه على هذه الهيئة http://localhost:port/ , بالعودة إلى ملفات المشروع لنتجه إلى ملف Global.asax وهذا الملف أيضا مألوف لدينا من استخدام ASP.NET Web Form ( بكثرة في الإصدار الرابع .NET 4.0 ) سنلاحظ أن هناك تعريف إلى Url Route ويهمني انك تفهم طريقة هذا الـ Route لان سوف يساعد في فهم طريقة عمل العناصر الثلاثة السابقة وأيضا بناء Route على حسب متطلبات مشروعك .
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);لنأخد هذا الجزئ ونشرحة
"{controller}/{action}/{id}"
ما يعنيه هذا الجزء هو أن مكونات الرابط هي مثل الترتيب حيث انك في البداية سوف تستدعي اسم Controller وبعدها اسم الـ Action و الـ id يكون اختياري في هذه الحالة.
لنطبق قليلا على المشروع لفهم كيفية عمل هذا الـ Route وأيضا فهم طريقة عمل العنصرين الثاني والثالث.
عندما عملنا المشروع فتح لنا في بداية الأمر HomeController وفي هذا الـ Controller سنجد هناك actions واحد يسمى index والأخر about قف قليلا عزيزي القارئ ونرجع خطوة للخلف إلى Route السابق وسنلاحظ أننا لبينا متطلبين أساسين في هذا الـ route آلا وهما الـ Controller والـ Action أذا أصبحنا نفهم بشكل بسيط عندما نريد أن نستدعي أي Action لابد أن يتم أولا استدعاء اسم الـ Controller الموجود فيه وبعدها استدعاء اسم هذا الـ Action.
ذكرنا سابقا أن في ملفات المشروع يوجد ملف اسمه View وكان من ضمنه ملف اسمه Home فأتت تسمية هذا الملف على اسم الـ Controller الخاص بهذا الملف, أذا لنعمل مثال بسيط ونفهم: .
اذهب عزيزي القارئ عند ملف الـ Controller و Right Click وبعدها Add – Controller
سيظهر معك صندوق حوار لكتابة اسم الـ Controller واعلم عزيزي القارئ أنك ستحتاج فقط إلى تغير الاسم المظلل, وفي حالتنا لنسميه Test وبعدها اضغط موافق, سوف يتم عمل هذا الـ Controller وبداخلة يحتوي على Action أسمة Index ( للتذكير فقط نحن ألان نتعامل مع العنصر الثالث وهو الـ Controller), اعمل تغير عزيزي القارئ إلى هذا الشكل
public ActionResult Index()
{
ViewData["Test"] = "From Test Controller!!";
return View();
}اجعل المؤشر على اسم الـ Action ( في هذه الحالة هو Index ) واعمل Right Click واختار Add View وبعدها اضغط موافق.
ستلاحظ انه في ملف الـ View الموجود في ملفات المشروع تكون لدينا ملف جديد بنفس الاسم للـ Controller ويحمل بداخلة صفحة اسمها Index على اسم الـ Action الموجود بداخل هذا الـ Controller, في هذا الوقت استطيع أن أدرك انك عزيزي القارئ استطعت استيعاب عنصرين من العناصر الثلاثة التي تم ذكرها سابقا.
لنقم بعمل هذا التغير على صفحة Index الخاصة بهذا الـ Controller
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Test Controller</h2>
<%: ViewData["Test"] %>
</asp:Content>اعمل Build للمشروع واذهب للمتصفح واعمل refresh للموقع
ركز عزيزي القارئ ألان سوف نطبق الـ Route الذي تحدثنا عنه سابقا , فبعد عمل refresh للصفحة اذهب إلى العنوان واكتب كـ تكملة على الموجود /Test/Index ستلاحظ ما تم كتابته في الـ Action تم عرض في الـ View.
كـ محصلة لما فعلناه هو أثبتنا أن الـ Controller هو وسيط لعرض الـ View المطلوب وفي مثالنا السابق حددنا في الرابط أننا نريد الـ View الذي أسمة Index الذي يكون خاص بالـ Controller الذي أسمة test
ملاحظة: عند تعاملك أخي القارئ مع الـ View فأعلم انه بإمكانك كتابة الجمع بين أكواد اللغة التي تبرمج بها و أكواد الـ HTML .
اقتباسDeciding When to Create an MVC ApplicationYou must consider carefully whether to implement a Web application by using either the ASP.NET MVC framework or the ASP.NET Web Forms model. The MVC framework does not replace the Web Forms model; you can use either framework for Web applications. (If you have existing Web Forms-based applications, these continue to work exactly as they always have.)
Before you decide to use the MVC framework or the Web Forms model for a specific Web site, weigh the advantages of each approach.
Advantages of an MVC-Based Web Application
The ASP.NET MVC framework offers the following advantages:
It makes it easier to manage complexity by dividing an application into the model, the view, and the controller.
It does not use view state or server-based forms. This makes the MVC framework ideal for developers who want full control over the behavior of an application.
It uses a Front Controller pattern that processes Web application requests through a single controller. This enables you to design an application that supports a rich routing infrastructure. For more information, see Front Controller on the MSDN Web site.
It provides better support for test-driven development (TDD).
It works well for Web applications that are supported by large teams of developers and Web designers who need a high degree of control over the application behavior.
Advantages of a Web Forms-Based Web Application
The Web Forms-based framework offers the following advantages:
It supports an event model that preserves state over HTTP, which benefits line-of-business Web application development. The Web Forms-based application provides dozens of events that are supported in hundreds of server controls.
It uses a Page Controller pattern that adds functionality to individual pages. For more information, see Page Controller on the MSDN Web site.
It uses view state or server-based forms, which can make managing state information easier.
It works well for small teams of Web developers and designers who want to take advantage of the large number of components available for rapid application development.
In general, it is less complex for application development, because the components (the Page class, controls, and so on) are tightly integrated and usually require less code than the MVC model.
ملاحظة: اخر اصدار للـ ASP.NET MVC framework هو 3.0 وانا كتبت مثالي بأستخدام الاصدار 2.0 بسبب انتظار صدور الكتاب للأصدار الجديد , لكن من خلال متابعتي مل هو الجديد في الاصدار 3.0 لا اعتقد انه سوف يكون عائق عليك لو تعلمت قليلا من الاصدار 2.0 وانتقلت الى الاصدار الجديد .
في نهاية الكلام يوجد هناك خصائص لم أتطرق لشرحها لان هدفي هو جعلك عزيزي القارئ أن تفهم كيفية عمل هذه التقنية وإذا قررت يوم من الأيام أن تخوض تجارب معها سوف تستوعب هذه الأشياء بشكل اكبر, واعلم في كلامي السابق لم أتطرق إلى العنصر الأول لكن استطيع أن أخبرك عزيزي القارئ انه لا يختلف في التعامل لأنه عند فهمك للمثال السابق فسوف يكون التعامل مع العنصر الأول مكمل مع العنصرين الثاني والثالث.
في النهاية حببت ان شارككم بما توصلت له واتمنى ان تعم الفائدة وايضا اخواني اتمنى ان وجد اي تعديل تعديل او اضافات انا ارحب بها :D
Good Luck
