الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

لنتعمق قليلا في الasp.net Mvc ج1

بدأه EnigmaOX في 24 سبتمبر 2008 · 11 رد · 2,990 مشاهدة · في ASP.NET
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم

في هذا الدرس سوف نشرح اساس الASP.NET MVC ونتقدم قليلا في الموضوع

ماذا تعني MVC?

MVC هي اختصار لثلاثه كلمات هو Model View Controller وتعني اسلوب وهيكل قديم جديد في تصميم التطبيقات ، هذا الهيكل يركز على فصل تام للBuisness Layer عن الUser Interface ،اي عندما تكتب تطبيق في الAsp.net بدون استعمال صفحه الCode Behind ، في السنوات السابقه اثبت نجاحه في تطبيقات الويب ولذلك ذهب سكوت جو الى الRuby on rail ولغات اخرى وعاد لنا بAsp.net MVC .

لماذا اتعلم الMVC ?!

1 ) لانها سهله ومرنه

2) لانها تعطيك حريه اكبر في التعامل مع الواجهه

3) لانها وسيله سهله لانتقال سلس الى كل جديد في تطبيقات الويب مثل Silverlight , Flash , Html5

4) سهوله اكبر في التعامل مع الاجاكس

5) سهوله اكبر في بناء تطبيقات معقده وكبيره اكثر

6) ارتب وانظف

ماذا سأخسر في انتقالي الى الMVC?

1) لا يوجد PostBack

2) لا يوجد ادوات مثل DataGrid , Repeater,...

3) لا يوجد ViewState

ملاحظه : الكثير يعتبرون هذه ايضا حسنات الMVC ومع الوقت سوف تعرف السبب.

ما هي وظائف الModel View Controller:

Model : المودل يمثل مصادر المعلومات الي التطبيق وهو تقريبا يمكن ان يسمى Data Access Layer ـ اي وظيفته ان يتعامل مع البيانات بدون التحديد اي مصدر بيانات ( على الاغلب تكون قاعده بيانات) ، اي ان المودل يسترجع البيانات من المصادر ويتعامل معها وايضا يحصل على المعلومات من الController ويتعامل معها والعكس صحيح.

Controller : الكونترولير هو كلاس وهوالمسؤول عن التعامل مع الواجهه(User Interface) اي صفحات الAspx ، الكونترولير عباره عن دوال وهو المسؤول عن تحديد اي صفحة Aspx سوف يعرض .

Views : هي عباره طبعا عن صفحات الAspx والكنترولير هو الذي يستدعيها بناءا على الURL.

mvc-rails.png

(الرسم من جوجل :happy: (

هذا الرسم يمثل التصميم الاساسي للMVC بشكل عام ، ولكن سنعتبره الرسم الخاص في الASP.NET MVC

عند طلب رابط لا يتم الذهاب مباشره الى الView اي صفحات الaspx ولكن سوف يقوم بالانتقال الى الroutes

routes هي عباره عن قوالب تمثل الروابط ، عندما يتم طلب صفحه سوف يتم نسخ الرابط وملائمة الى مجموعه من الroutes لايجاد الroute الملائم تم يتم تقسيم الرابط والتعامل معه، لنأخذ مثال من الASP.NET MVC

نذهب الى الفيجوال ستوديو ونقوم بانشاء مشروع جديد ، اقرا الموضوع اذا كنت لا تجيد انشاء مشروع MVC

عند انشاء المشروع نذهب الى ملف Global.Asax في هذا الملف يوجد داله RegisterRoutes

post-138170-1222282149_thumb.gif

في هذه الداله يوجد قسمين الاول يستدعي داله اسمها IgnoreRoute هذه داله تقول للHandler "تجاهل" الورابط التي تأتي وتحاول طلب ملف ينتهي بامتدادaxd مهما يكون اسم الملف او وجود اي بارمتر يتبعه

القسم الثاني من الداله يقوم بتسجيل الroutes هذه "القوالب " للروابط وعند طلب رابط يقوم التطبيق بمقارنه الرابط مع القوالب المسجله ليقرر اي route سوف يقوم باستدعاء

عندما نقوم بانشاء مشروع سوف يتواجد route واحد ، يمكن اعتبار هذا القالب هو القالب الرئيسي الذي يمكن استخدامه ليخدم الكثير من الحالات في التطبيق

القالب يقول كالتالي: ننتظر 3 متغيرات في الرابط سوف تأتي بالترتيب التالي :

"{controller}/{action}/{id}"

امثله على الروابط التي تطابق هذا القالب:


www.MywebSite.com/Product/Details/1
www.MywebSite.com/Users/Show/5
www.MywebSite.com/Product/List

لم افهم كيف؟!

بما ان القالب يطابق الرسم اي يوجد 3 متغيرات ، هذا العدد في الرابط كأن الRoutes يظهر للتطبيق ان شكل الروابط الحقيقي هو :


www.MywebSite.com/?Controller=Product&Action=Details&Id=1
www.MywebSite.com/?Controller=Users&Action=Show&Id=5
www.MywebSite.com/؟Controller=Product&Action=List

ولكن لماذا يقبل الرابط الاول ؟! لا يوجد فيه قيمه للId اي لا يناسب القالب!

نعم ولكن الرابط هو مطابق مادام هنالك مكان فيه للمتغيرات التي تأتي معه ( سنرى لاحقا كيف نضع المزيد من الشروط)

اذا ماذا سيفعل مع المتغير ؟!

سوف يضع القيمه المعرفه في القسم الثالث من تعريف الRoute كما هو موضح في الصوره اي ستكون القيمه فارغه ولكن ليس null

دقائق واكمل القسم الثاني من الجزء الاول -_-

#2

أستمر مازلنا بحاجة لتوضيح أكثر :)

joseph.gif

logo.gif

CCNA 640-802

مدونتي

#3
اقرا موضوع ميكانكية الMVC اولا

استرجاع بيانات :

اريد ان اشرح طريقة استرجاع البيانات وكيف تتعامل الطبقات الMVC مع بعضها

سوف نسترجع بيانات من قاعده بيانات ونعرضها في صفحه ولكن اولا علينا التوضيح كيف يتم التعامل بين هذه الطبقات ، خلال هذا الدرس سوف نستعمل قاعدة بيانات AdventureWorksيمكن تحميلها من هذا الرابط

في الASP.NET كان يتم استدعاء الصفحه مباشرة عن طريق المتصفح ومن ثم يتم استدعاء الاحداث مثل PageLoad ومن خلاله يتم الحصول على البيانات وملء الادوات الموجوده وعرضها على الصفحه ولكن في الMVC تختلف الطريقه في عرض البيانات..

اول شيء نقوم به هو فحص الRoutes يلائمني او نحتاج الى الاضافه؟

يوجد "القالب" الرئيسي ونستطيع استخدامه ، سوف نستخدم الجداول التي تتعلق بالمنتجات في القاعده

post-138170-1222284966_thumb.gif

نقوم بانشاء مشروع جديد في الفيجوال ستوديو ، نعطيه اسم SimpleMVC ونضيف مشروع مكتبه اكواد نسميها SimpleMVC.Products

زر يمين بالمؤشر على مكتبة الاكواد ونضيف Linq To SQL Classes

post-138170-1222285541_thumb.gif

ثم ندخل الى ملف ProductsManager.dbml ونضيف الجداول التي نريدها من الServer Explorer

سوف نتعامل فقط مع 3 جداول كما هو مبين في الرسمه

post-138170-1222286219_thumb.gif

نقوم بانشاء مجلد جديد نسميه Types ونضيف اليه كلاس ArticleItem.cs يمثل المنتج

post-138170-1222286850_thumb.gif

نقوم بتوسيع الكلاس الذي يقف خلف الProductsManager.dbml والذي اسمه ProductsManagerDataContext

نضيف كلاس جديد بنفس الاسم لانه Partial

نكتب دالتين بسيطات لاسترجاع منتج


{
partial class ProductsManagerDataContext
{
public ProductItem GetProductByCatagory(int ProductId)
{
return Products
.Where(D => D.ProductID == ProductId)
.Select(item => new ProductItem()
{
Color = item.Color,
LastPrice = item.ListPrice,
CatagoryName = item.ProductSubcategory.Name,
ProductId = item.ProductID,
ProductName = item.Name,
ProductNumber = item.ProductNumber,
Size = item.Size
}).Single();
}
}

}
namespace SimpleMVC.Products

اذا الان لدينا Model عباره عن جداول من قاعدة بيانات وداله لاسترجاع منتج من قاعدة البيانات والان نستعمل هذه الداله

عن طريق استدعائها من الController نعود الى المشروع الرئيسي ونضيف Controller الى ملف الController المسؤول عن المنتجات

نسميه ProductController كلمة كونترولير ضروريه لاظهار الكلاس على انه كنترولير

post-138170-1222287971_thumb.gif

نريد الان صفحه تظهر التفاصيل عن المنتج في الView نقوم وليكن الرابط على الشكل التالي

www.MywebSite.com/Product/Details/1

اضفنا الController الان نحتاج الى دالة الAction داخل الController Class ويكون اسمها Details هذه الداله سوف تطلب من المودل المنتج باستخدام الId Parameter ولكن علينا طبعا الربط بمكتبه الاكواد للحصول على الداله

نقوم بعملية Add Reference

post-138170-1222288347_thumb.gif

وثم نكمل الداله Details كالتالي

using System;
 using System.Web.Mvc;
 using SimpleMVC.Products.Types;
 using SimpleMVC.Products;


 namespace SimpleMVC.Controllers
 {
	 public class ProductController : Controller
	 {
		 public ActionResult Index()
		 {
			 // Add action logic here
			 throw new NotImplementedException();
		 }

	   public ActionResult Details(int id)
		 {
			var ProductManager = new ProductsManagerDataContext();
			 ProductItem item = ProductManager.GetProductById(id);
			 ViewData["ProductDetails"] = item;
			return View();

		 }
	 }
 }

ViewData تضع فيه كل القيم التي تريد نقلها الى الVוew وعرضها في الصفحه

عند استدعاء الView() سوف يبحث عن View اسمه على اسم الاكش اي Details في مجلد على اسم الكنترولر اي Products لذا نضيفه هناك

طبعا نذهب الى new Item

سوف نختار MVC View Content Folder والتي تعني صفحه مع MasterPage مثل في الASP.net Web Forms ونختار الMaster Page الموجود في المجلد. Shared في مجلد Views

حسنا تم كل شيء ! فقط نحتاج الى عرض البيانات على الصفحه

نفتح الView وسنجد امامنا صفحه تقليديه ولكن لا يوجد هنا ادوات ! سوف تكتب Html

سوف نعود لكتابه اكواد مثل الASP التقليديه داخل <% %>

نضيف السطر التالي في الصفحه للدخول الى ArticleItem

<%@ Import Namespace="SimpleMVC.Products.Types"%>

بعد ذاك نستخرج معلومات المنتج من الViewData

<% ProductItem item = ViewData["ProductDetails"] as ProductItem;%>

ثم نطبع المعلومات كالتالي


Product Number : <%= item.ProductNumber %><br />
Product Name : <%= item.ProductName %><br />
CatagoryName: <%= item.CatagoryName %><br />
Size : <%= item.Size %><br />
Last Price : <%= item.LastPrice %><br />
Color : <%= item.Color %>
<b>Product Details:</b><br />

هذا كل شيء !

نقوم بعمل Debug ونحاول الدخول الى الرابط التالي

Product/Details/1

ونحصل على التالي

post-138170-1222290245_thumb.gif

SimpleMVC.rar

#4

عمل رائع وللاسف مساوء MVC كثيرة و ليس فقط التي ذكرتها :( لو كان الMVC View Content Page عبارة عن صفحة ASP .net اعتيادية لتغير كل شي

ولكن كما ذكرت هناك مساوء تعتبر من الحسنات

شكرا على الموضوع و ننتظر الاجزاء البقية

#5
اقتباس
عبارة عن صفحة ASP .net اعتيادية

اذا كنت تقصد عدم وجود Postback and ViewState والادوات فأنا وجدت الوضع غريب بدونهم ولكن صدق مع الوقت ستجد نفسك تستمتع اكثر بالبرمجه بدونهم ، الامكانيات بدونهم افضل بكثير :wink: عندما تبدأ بالتعامل مع الJS ستنسى كل سيئات الASP.NET MVC

تم تعديل هذه المشاركة بواسطة EnigmaOX في 25 سبتمبر 2008 في 02:32

#6

كما ذكر الأخ EnigmaOX فالMVC يعطيك حرية و تحكم أكثر في الHTML و الJS و حتى الURL الذي يصل للمستخدم, و لكن بالتالي يحملك مسئولية أكبر, و يجب أن لا تنسى أنه ليس بديل للWeb Forms بل هو مجرد اختيار اخر لبرمجة أنواع معينة من الweb applications التي تحتاج هذا القدر من التحكم

Sr. Software Development Engineer
Hulu, LLC
My Blogs

#7

جزاك الله خير على الشرح الوافي

#8

السلام عليكم

في الدرس السابق شرحت كيف نحصل على البيانات من مودل ثم نطلبه من الكنترولير ونرسله الى الView ، رأيتم ان هنالك فصل تام بين طبقات التطبيق ليس مثل الAsp.net WebForms حيث تتم كتابه اكواد في الCodeBehindاي في الUserInterface .

الان سأشرح كيف يمكن نقل مدخلات للمستخدم الى قاعده البيانات اي انها عمليه عكسيه

تأتي من البيانات من الView ثم تنتقل الى الController ومن ثم الى المودل والى قاعدة البيانات

سوف نقوم بتعديل بيانات موجوده في قاعدة البيانات ، ماذا نحتاج للقيام بالعمليه؟

اول نحتاج الى داله التي سوف تقوم بحفظ المنتج في قاعدة البيانات ، الداله سوف تحصل على بيانات وتحفظهم في القاعده.

سنكتب الداله في ابسط ما يمكن بهدف الشرح

post-138170-1222360751_thumb.gif

كتبنا الداله الان نحتاج الى بناء دالة اكشن داخل الكنترولير وهدفها هو تعديل المنتج وسيكون اسمها Edit وتحصل على روابط بالشكل التالي:


/Product/Edit/5
/Product/Edit/1

حيث يمثل الرقم الId الخاصه بالمنتج

------------------------------------

الان قبل ان نكمل نحتاج الى فهم بعض اساسيات الHtml في الASP.NET كان هنالك دائما form توضع على كل الكود ، داخل هذا الفورم كان يوضع كل شيء من ادوات وViewState الذي كان يحمل كل القيم الموجوده في الادوات لذلك لم نكن نستعمل الفورم لانه لا يمكن وضع فورم داخل فورم اما في الASP.NET MVC فلا يوجد فورم كبير حول الكود لذلك لا يوجد مبدأ الPostBack الذي يحمل كل القيم من الفورم ويأخذها الى السيرفر معه وباستخدام الViewState لحمل القيم بين الصفحات كل الوقت .

يوضح داخل الForm ادوات وزر Submit ، عند الضغط على الزر يرسل كل القيم داخله الى رابط يحدد في صفحه في الفورم ،مثال:

post-138170-1222363427_thumb.gif

الاكشن تقرر اين سوف تذهب الصفحه ... اذا ماذا يحصل عند وصول البيانات الى صفحة الDefault.aspx?

عندما كنا نتعامل مع الASP.NET WebForms كنا نقوم بهذه الطريقه بالضبط ولكن الاختلاف فقط في استرجاع البيانات حيث كنا نسترجع البيانات بكتابه اسم الاداه الي اضفناها الي الصفحه مثل

	 <div align="left">string Value = someText.Text; </div>

ولكن في الASP.NET MVC لا نستطيع القيام بذلك ، علينا الحصول على القيمه من الفورم بشكل يدوي عن طريق كتابة التالي:

 string Value = Request.Form["someText"];

هكذا نحصل على نفس النتيجه .

وماذا تعني Method="POST" ?

لن ادخل في التفاصيل ولكن ببساطه Get تعني طلب صفحه وPost تعني طلب صفحه مع ارسال بيانات

ونحن نريد ارسال البيانات مع الصفحه لذلك نستعمل Post

الان نحن نعلم كيف نرسل بيانات من الView الى الكنترولير لاستخداها نعود الى الاكشن ونكملها.

سوف نستعمل الاكشن نفسها لهدفين ،

الاول عند طلب الصفحه سوف يتم عرض الصفحه مع التفاصيل فيها لتعديلها

والثاني بعد تعديل البيانات سوف نحصل على البيانات ونعيدها الى القاعده لنحفظها

ولكن كيف نفرق بين الحالتين؟

عند طلب الاكشن سوف تكون عمليه الطلب باستخدام Get

عند طلب الصفحه باستخدام الفورم في الصفحه سوف تكون العمليهPost

كيف نميز بشكل عملي؟


</div><div align="left"> {
</div><div align="left"> if(Request.HttpMethod == "GET")
{
return View();
}
// يعني ان الصفحه جاءت بعد تعديل البيانات وسوف نقوم من هنا باسترجاع البيانات بهدف تعديلها
}</div>
 <div align="left"> public object Edit(int id)

-----------------------

لحظات واكمل الكتابه..

#9

هل نحتاج الى دروس لموضوع Linq في المنتدى؟

#10
bashmohandes كتب:
كما ذكر الأخ EnigmaOX فالMVC يعطيك حرية و تحكم أكثر في الHTML و الJS و حتى الURL الذي يصل للمستخدم, و لكن بالتالي يحملك مسئولية أكبر, و يجب أن لا تنسى أنه ليس بديل للWeb Forms بل هو مجرد اختيار اخر لبرمجة أنواع معينة من الweb applications التي تحتاج هذا القدر من التحكم

ممكن اخي بشمهندس توضيح اكثر

ايش التطبيقات الي ما اقدر اعملها في web forms

#11

يمكنك عمل كل أنوالاع التطبيقات في نظام الWeb Forms و هي تعطي سهولة و سرعة في التطوير, و هي ناجحة على مدار 6 سنوات مضت و في تطوير مستمر و ستظل هي الأساس, الASP.net MVC مجرد طريقة أخرى و هي لا تناسب أغلب التطبيقات فهي في الأساس تحتاج أن يكون المبرمج على دراية أكبر بالHTML و الٍJS و الCSS و غيرها, فهو مسئول مسئولية كاملة عن ناتج الموقع, فلا يوجد مثلاً Data Grid او Calendar أو Data List أو Repeater أو أو, ...

Sr. Software Development Engineer
Hulu, LLC
My Blogs

#12

الان نريد سيناريو التعديل الكامل في الصفحه .

اول شيء نحتاجه هو داله تعيد المنتج الذي نريد التعديل عليه ،نقوم باضافه الداله بمكانها في الModel .


{
return Products.Single(D => D.ProductID == ProductId);
}
  public Product GetProductForEditing(int ProductId)

في الكنترولر سوف نستعمل (2 اكشن) : واحد للتعديل وواحد للحفظ فقط من اجل التوضيح ، نبدا اول بالاكشن الاولى ، سوف تأخذ تفاصيل المنتج وترسلها الى الView

،وعند العوده اليها سوف تحفظ البيانات ، نبدأ بالسيناريو الاول ، الحصول على البيانات وارسالهم الى الصفحه.

post-138170-1223848488_thumb.jpg

نهتم الان فقط في الشرط IF في هذه الشرط يتم التأكد ان طلب الصفحه تم للتعديل عليها وان الطلب لم يتم بعد التعديل ، نقوم باسترجاع المنتج المطلوب التعديل عليه بالداله التي استعملناها ونضيف المنتج الى الViewData الذي سوف يحمل القيم الى الصفحه .

post-138170-1223848750_thumb.jpg

الان علينا بناء الView ، نقوم باضافه صفحه داخل مجل الView/Product

اول شيء نقوم به هو استرجاع المنتج من الViewData ، نضيف النطاق الذي يشير الى مكان الكلاس Product باستخدام Import ونقوم باسترجاع الproduct الذي نريد التعديل عليه .

post-138170-1223849118_thumb.jpg

نحتاج الان بناء Form Tag الذي سوف يحمل القيم الى الاكش بعد التعديل ، نستطيع بناء فورم باستخدام السي شارب او بالكتابه التقليديه.

بالكتابه التقليديه:



</form>
<form id="ProductEditForm"  method="post" action="/Product/Edit">

باستخدام السي شارب:



<%} %>
<% using (Html.Form("Product","Edit",FormMethod.Post)) { %>

نقوم ببناء ادوات التي سوف تضع لنا القيم التي نريد التعديل عليها على الصفحه .

الادوات في الMVC هي عباره عن دوال مع مجموعه كبيره من الOverloads وكلها Extentions Methods اغلبها موجود في الHtml كلاس كما هو مبين في المثال اعلاه.

لبناء TextBox مثلا نقوم بكتابه التالي:

<%= Html.TextBox("Color") %>

الColor هو اسم الاداه في الصفحه.

هنالك Overload اخر للداله مثلا

<%= Html.TextBox("Color","احمر") %>

سوف يظهر على الصفحه الاداه وداخلها كلمه احمر

اما اشاره = فهي تعني طباعه الناتج من الداله على الصفحه.

------------

المثال الكامل للتعديل على المنتج كالتالي:



<% using (Html.Form("Product","Edit",FormMethod.Post)) { %>
<p> Product Color : </p><%= Html.TextBox("Color",product.Color) %>

<p> Product Name : </p><%= Html.TextBox("Name",product.Name) %>

<p> List Price : </p><%= Html.TextBox("ListPrice",product.ListPrice) %>

<%= Html.SubmitButton("Submitbutton","تعديل") %>
<%} %>
 <% Product product = ViewData["Product"] as Product; %>

عند طلب الصفحه باستخدام الرابط التالي:

/Product/Edit/2

سوف تظهر هكذا

post-138170-1223849118_thumb.jpg

post-138170-1223850979_thumb.jpg

مواضيع مشابهة