تعلم ASP.NET MVC


الدرس: Hello World" MVC"


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

إنشاء المشروع باستخدام Visual Studio

لذلك نبدأ مع Visual Studio ، أداة التطوير الخاصة بنا والتي سوف ننشأ فيها Hello World ، وأول شيء علينا فعله هو إنشاء مشروع ASP.NET MVC جديد. انتقل إلى قائمة "ملف" واختر "مشروع جديد" ، ثم في النماذج ، اختر مشروع Visual C# / Web من نوع تطبيق ويب ASP.NET :
ASP.NET framework

ASP.NET framework
إنشاء مشروع ASP.NET
يقدم لك Visual Studio اختيار نموذج لمشروعك. نظرًا لأننا نريد أن نفعل كل شيء بمفردنا ، فسوف نبدأ في النموذج "الفارغ" ، الذي يكون فارغًا ، دون أن ننسى التحقق من MVC ( والذي سيتيح لنا تضمين كل ما هو ضروري لاستخدام إطار عمل MVC ) :
ASP.NET framework
اختيار نموذج فارغ
الآن اترك المربع الذي يسمح لك بإنشاء مشروع اختبار وحدة دون تحديد. سنعود إلى هذا لاحقًا في فصل مخصص ، لكننا نعرف الآن أن هذه نقطة لا ينبغي تفويتها نظرًا لأنه من المهم جدًا إجراء اختبارات تلقائية لتطبيقه وأن بنية MVC تسهل ذلك.
يتم إنشاء مشروع افتراضي ، يحتوي بالفعل على بعض المجلدات والملفات:
ASP.NET framework
شجرة الحل بعد اختيار نموذج فارغ
على الرغم من اختيار نموذج فارغ ، فإن الحل الذي تم إنشاؤه ليس فارغا. لا تزال هناك بعض الملفات وخاصة بعض الأدلة. هنا أنشأ Visual Studio الهيكل الافتراضي لتطبيق MVC
بشكل عام ، ليس هناك الكثير ، ولكن دعونا نلقي نظرة على ما في الداخل:
  • دليل App_Data هو دليل حيث يمكننا تخزين البيانات أو الملفات الثنائية أو قواعد البيانات. اعلم أنه بشكل عام لا يستخدم إلا قليلاً في تطبيق حقيقي ، ولكنه يمكن أن يساعد في مرحلة التعلم الخاصة بنا.
  • يحتوي دليل App_Start عمومًا على منطق الاعدادات ، وهناك ملف RouteConfig.cs بداخله ، والذي يمكننا تجاهله في الوقت الحالي والذي يُستخدم لاعداد التطبيق.
  • سيحتوي دليل وحدة التحكم(controllers) منطقياً على وحدات التحكم المستخدمة لإدارة الإجراءات. سوف نعود إلى هذا لاحقًا.
  • دليل Models ، حيث سنضع كل ما يتعلق بنموذجنا ، بمعنى الفئات التي تتفاعل مع البيانات والتي تدير القواعد المحددة لتطبيقنا. سنعود أيضًا إلى هذا بالتفصيل في فصل لاحق.
  • سيحتوي دليل طرق العرض(views) على جميع طرق عرض تطبيقنا ، وهو ما سيسمح تقريبًا بعرض صفحاتنا على أساس HTML . هذا بالطبع سيكون موضوع شرح جيد بعد قليل. في الوقت الحالي ، يمكنك تجاهل ملف web.config بالداخل ، وسنعود إليه.
  • ملف Global.asax ، والذي يتم تنفيذه في بداية إطلاق التطبيق والذي سيتيح لنا ، من بين أشياء أخرى ، تكوين التطبيق. إذا فتحته ، سترى أنه يستخدم الوظائف المحددة في فئة RouteConfig الموجودة في دليل App_Start
  • ملف package.config يمكننا تجاهله (يتم استخدامه لتكوين حزم nuget التي سنستخدمها لاحقًا ، لكن ليس من المثير للاهتمام هنا أن نتصفحها) .
  • ملف Web.config آخر (يختلف عن الملف الموجود في دليل طرق العرض) ، معروف جيدًا لمطوري ASP.NET WebForms ، والذي يحتوي على عناصر تكوين التطبيق.
لا يهم إذا كانت كل هذه الملفات أو الأدلة لا تخبرك كثيرًا ، فسأشرح لك كل ما تحتاجه عندما نحتاج إليه.
تفسح المجال للعمل! ابدأ تشغيل التطبيق الافتراضي الذي تم إنشاؤه عن طريق الضغط على F5(أو انتقل إلى قائمة "تصحيح" ، وبدء تصحيح الأخطاء). يبدأ المستعرض الافتراضي لديك ويفتح صفحة بعنوان مماثل لـ http: // localhost: 44311 / ، مع صفحة خطأ لطيفة:
ASP.NET framework
خطأ في بدء تطبيق الويب
لاحظ أنني ذكرت عنوان http://localhost: 44311 /. إنه عنوان إنترنت تمامًا مثل العناوين التي اعتدت رؤيتها ، مثل http://arabclassroom.com/ .  يتوافق "Http: //" مع البروتوكول المستخدم ، بالطبع بروتوكول HTTP . يتوافق "Localhost" مع عنوان الجهاز الذي تتم استضافة خادم الويب عليه ، وفي هذه الحالة يكون الجهاز المحلي لدينا ، ويمكن الوصول إليه عبر المضيف المحلي. 44311 هنا هو المنفذ - سيكون لديك بالتأكيد قيمة مختلفة في المنزل - إنه رقم يتيح التمييز بين برامج الكمبيوتر التي هي في وضع "الاستماع" ، وفي هذه الحالة ، المنفذ حيث يستمع خادم الويب Visual Studio . بعض المنافذ محجوزة (بشكل عام ، أرقام منخفضة إلى حد ما) ، مثل المنفذ 80 وهو منفذ الاستماع الكلاسيكي لخوادم الويب ، أو المنفذ 21 لخوادم FTP . هناك ، منفذ خادم الويب للتطوير عشوائي وله قيمة عالية بما يكفي لتجنب التعارض مع برنامج آخر.
ملاحظة: للعودة إلى Visual Studio ، سيتعين عليك إيقاف مصحح الأخطاء عن طريق الضغط على المربع.
ASP.NET framework

وحدة التحكم

لذلك هذه الصفحة خطأ؟ أخبرنا أن المورد "/" لم يتم العثور عليه. ونعم ، لا يوجد شيء في تطبيق الويب الخاص بنا ، ولا يمكنه معالجة الإجراء المرتبط بالطريق المطلوب. سوف أعود إلى فكرة المسار المهمة هذه في ما بعد ، ولكن في الوقت الحالي ، سنضيف وحدة تحكم حتى نتمكن من معالجة طلب العرض. انقر بزر الماوس الأيمن على دليل التحكم وقم بإضافة وحدة تحكم جديدة:
ASP.NET framework
إضافة وحدة تحكم
على النافذة هناك العديد من الخيارات مع نماذج مختلفة. سنعود إلى هذا لاحقًا وللوقت الحالي ، احتفظ بنموذج "MVC 5 Controller - Empty" :
ASP.NET framework
اختيار نوع تحكم
ثم اعطه اسم HomeController  :
ASP.NET framework
اسم وحدة تحكم HomeController
يتم إنشاء الكود التالي لنا:

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }
}

المهم هو ملاحظة أن الفصل مشتق من فئة Controller إطار عمل MVC . نظرًا لأننا نريد إظهار رسالة "Hello World MVC" في طلبنا ، فسنقوم بتعديل الطريقة Index التي تم إنشاؤها للحصول على:

public string Index()
{
    return "Hello World MVC";
}

لنبدأ تطبيق الويب الخاص بنا مرة أخرى. هذه المرة ليس لدينا المزيد من الأخطاء ويمكننا أن نرى رسالة رائعة على صفحة الويب:
ASP.NET framework

عرض Hello world

الطرق Routes
ماذا حدث؟ لفهمها ، أدخل عنوان URL الجديد التالي: http://localhost:44311/Home/Index . نحصل على نفسه بالضبط. انظر إلى نهاية عنوان URL : /Home/Index.
باستخدام عنوان URL الثاني هذا ، طلبنا فعلاً من إطار عمل MVC تنفيذ طريقة Index  لوحدة التحكم HomeController  . وبشكل مدهش بما فيه الكفاية ، إنها فئة ووظيفة أنشأناها. 
لماذا وقع استدعاء وظيفة هذه الفئة؟ لفهم هذا ، افتح ملف RouteConfig.cs الموجود في دليل App_Start . يمكننا أن نرى بشكل خاص السطر التالي:

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
); 
هذا هو تعريف المسار الافتراضي. هذا يعني أنه عندما يُطلب منك عرض عنوان URL http://localhost:44311/Home/Index
، يفسر إطار عمل MVC عنوان URL هذا ويحوله إلى إجراء. في هذه الحالة ، عنوان URL هنا هو "Home/Index " . وفقًا للنظام المحدد في المسار الافتراضي ، أي {controller} / {action} / {id} ، فإنه يحول عنوان URL إلى:
  • controlleur = Home
  • action = Index
  • id = null
هذا له تأثير إنشاء وحدة التحكم HomeController   وتنفيذ الطريقة Index  . هذا بإرجاع سلسلة أحرف وهذا ما يتم عرضه على الصفحة. ليس HTML هنا ، ولكن سلسلة أحرف. اعرض الكود المصدري للصفحة في المتصفح الخاص بك وسترى أنك ستحتوي على أحرف فقط ، بدون HTML أو علامات أخرى ...
إذا قمت بتغيير عنوان URL وقمت بتغيير الفهرس بواسطة Index2 على سبيل المثال ، فسوف يتعين عليك مرة أخرى صفحة خطأ ... ونعم ، لا توجد طريقة Index2   في وحدة تحكم لدينا! أنت تعرف ما عليك القيام به لتتمكن من عرض شيء باستخدام عنوان URL http://localhost:44311/Home/Index2... إضافة طريقة Index2، على سبيل المثال:

public string Index2()
{
    return "Hello les contrôleurs";
}
حسنًا ، لا بأس ، لكن عنوان URL الخاص بنا http: // localhost: 44311 / ، لقد أظهر شيئًا ما! على الرغم من أننا لم نحدد وحدة تحكم يجب إنشاء مثيل لها ، ولا إجراء لتنفيذها ... ونعم ، يرجع ذلك في تعريف المسار الافتراضي:

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
); 
هناك فقط القيم الافتراضية التي تحل محل العناصر التي لن يتم توفيرها في عنوان URL . وبالتالي ، إذا لم يتم توفير الإجراء ، فسيستخدم الإجراء (وبالتالي الطريقة) Index   افتراضيًا. وبالمثل ، إذا لم يتم توفير اسم وحدة التحكم ، Home   فسيستخدم وحدة التحكم الافتراضية. هذا هو السبب في أن عناوين URL التالية ستفعل الشيء نفسه بالضبط:
  • http://localhost:44311/
  • http://localhost: 44311/Home
  • http://localhost: 44311/Home/Index
• عن طريق سلبيات ، بطبيعة الحال ، سوف ينتج عن عنوان URL التالي خطأ: http://localhost:44311/Index2 ونعم ، لا يمكن لتنسيق المسار أن يخمن أن هذا Index2 هو الإجراء الخاص بوحدة التحكم الافتراضية. هنا ، يحاول العثور على جهاز التحكم Index2 الذي لا يوجد بالطبع ... سنعود إلى هذه المسارات بمزيد من التفصيل في فصل لاحق ولكننا ندرك أنه في MVC ، عندما تتنقل على عنوان URL ، فإنه ليس الملف الذي تحاول عرضه ، لا. أنت تحاول تنفيذ إجراء من وحدة تحكم!
إذن ماذا عن هذا المعرف ثم في نهاية الطريق؟ ما هو إذن؟
حسنًا ، إنها إمكانية تمرير المُدخلات إلى عملنا. لذا استبدل الطريقة  Index  بما يلي:

public string Index(int id)
{
    return "Hello " + id;
}
الآن ، ستتمكن من الانتقال إلى عنوان URL التالي http://localhost:44311/Home/Index؟Id=2 واحصل على:
ASP.NET framework
تمرير المُدخلات إلى طريقة تحكم
لاحظ أن عنوان URL هذا http: // localhost: 44311 / Home / Index / 2 يقوم بنفس الشيء تمامًا.
تلقائيًا ، يترجم إطار عمل MVC العنصر الأخير في مُدخل المعرف. هنا ، نظرًا لأننا أضفنا المُدخل في وحدة التحكم ، يصبح المعرف إلزاميًا. إذا انتقلت مرة أخرى إلى عنوان URL http: // localhost: 44311 / Home / Index ، فسيكون لديك استثناء لأن المُدخل مطلوب في طريقة الفهرس بوحدة التحكم الخاصة بنا. لكي يكون المُدخل اختياريا ، يجب استخدام عدد صحيح من النوع "nullable" ، وهذا يعني تحديد ما يمكن أن يكون " null  ":

public string Index(int? id)
{
    return "Hello " + id;
}

لاحظ أنه يمكنك أيضًا تمرير سلسلة أحرف عن طريق تعديل الطريقة:

public string Index(string id)
{
    return "Hello " + id;
}
ويمكنك الانتقال إلى http://localhost:49926/Home/Index/Nicolas، سيكون لديك بعد ذلك:
ASP.NET framework
يبدو تقريبًا وكأنه Hello World ،  
لاحظ أنك مضطر لاستخدام المُدخل المسمى id ، لا يمكن تحديد طريقة الفهرس على النحو التالي:

public string Index(string nom)
{
    return "Hello " + nom;
}

و لا ! تذكر تعريف طريقنا: {controller} / {action} / {id}. يمكننا أن نرى id ، لا nom  ! لم يتم التعرف على المُدخل ، لذلك سيكون يستحق null  . لحل هذه المشكلة ، يجب عليك تعديل المسار الافتراضي أو إضافة مسار جديد ... ولكن مهلا ، سنرى ذلك لاحقًا. 
لا أعرف ما هو رأيك ، لكن صفحة الويب الخاصة بنا ليست جميلة جدًا ... ومن ثم فهي ليست لغة تأشير النص الفائق HTML ، كيف سأتمكن من وضع العناوين والألوان؟ بالطبع ، يمكننا أن نتخيل إعادة HTML من طريقتنا ، مثل:

public string Index(string id)
{
    return @"
        <html>
            <head>
                <title>Hello World</title>
            </head>
            <body>
                <p>Hello <span style=""color:red"">" + id + @"</span></p>
            </body>
        </html>";
}
هذا من شأنه أن يعطي النتيجة التالية:
ASP.NET framework
وحدة التحكم تُرجع HTML كسلسلة
ولكن هناك ، مرحبا الرعب! يتم خلط كل شيء ... مستوى الفصل من النوايا ، ونحن سوف الحديد!

العرض View

هذا هو المكان الذي يأتي فيه العرض. العرض هو ما تراه. في هذه الحالة ، سيكون HTML . دعنا نعود إلى الإصدار الأول من وحدة التحكم الخاصة بنا ، والذي تم إنشاؤه بواسطة Visual Studio ، والذي كان:

public ActionResult Index()
{
    return View();
}

هنا ، يقوم الإجراء بإرجاع كائن ActionResult   عن طريق استدعاء الأسلوب View() ، الموروث من فئة  Controller  إطار عمل MVC . بعد ذلك ، دعونا ننشئ دليلًا تحت دليل طرق العرض يسمى الصفحة الرئيسية. وفي الداخل ، سنضع View ندعو فيها إلى Index.cshtml ، بحيث يكون لدينا Views \ Home \ Index.cshtml . للقيام بذلك ، قم بإنشاء دليل فرعي الصفحة الرئيسية ضمن دليل طرق العرض (الزر الأيمن في مجلد طرق العرض ، ثم قم بإضافة مجلد جديد ، إذا لم تتم إضافته بعد) وانقر بزر الماوس الأيمن على الدليل الرئيسي لإضافة عرض:
ASP.NET framework
أضف وجهة نظر
لذلك نحن نسميها الفهرس. يمكنك إلغاء تحديد أي شيء آخر ، ولن نستخدمه الآن ، حيث أن النموذج "فارغ":
ASP.NET framework
إضافة طريقة عرض الفهرس
ونحن هنا ، مع ملف Index.cshtml يحتوي على HTML يمكننا تعديله لإضافة رسالة صغيرة:

@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        Hello la vue
    </div>
</body>
</html>
إنه ليس فقط HTML ، سنرى ذلك لاحقًا. إضافة إلى ذلك ، فإن امتداد ملف .cshtml يجعلنا نعتقد أنه بإمكاننا وضع C# و HTML ...
وإذا قمنا بإعادة تشغيل التطبيق ، فسنحصل على:
ASP.NET framework
العرض
وهذه المرة ، إنه HTML حقيقي. يمكنك التحقق من ذلك عن طريق عرض الكود المصدري للصفحة.

public ActionResult Index()
{
    return View();
}
لاحظ أنه في إجراء وحدة التحكم أعلاه ، فإن استدعاء الطريقة View() مكافئ لاستدعاء الطريقة View ، ويمرر لها اسم طريقة العرض كمُدخل:

public ActionResult Index()
{
    return View("Index");
}
في الواقع ، View()   ستقوم الطريقة تلقائيًا بالبحث عن طريقة العرض الموضوعة في دليل طرق العرض ، في الدليل الفرعي الذي يحمل نفس اسم وحدة التحكم والذي يسمى طريقة الإجراء التي تم استدعاءها. إذا قمت بإعادة تسمية طريقة Index   في Index2   وتصفح URL التالي: http://localhost:49926/Home/Index2، وقال انه سوف اقول لكم ان لم يتم العثور على عرض Index2 . هذا صحيح!
لعرض طريقة العرض مؤشر، ببساطة استبدال الدعوة View()   من قبل View("Index")  . أو إنشاء طريقة عرض الدعوة Index2.cshtml ...
ما كنا إدارة مثل هذه الحالة id   هو null   أو فارغة، عن طريق اختيار لعرض وجهة نظر الخطأ مخصص. لذا استبدل طريقة الفهرس بـ:

public ActionResult Index(string id)
{
    if (string.IsNullOrWhiteSpace(id))
        return View("Error");
    else
        return View();
}
ثم قم بإنشاء دليل مشترك ضمن دليل طرق العرض. الآن أضف واجهة العرض تسمونها خطأ ، كما فعلنا من قبل ، ووضع HTML التالي فيه:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Error</title>
</head>
<body>
    <h1>Une erreur s'est produite lors du traitement de votre demande.</h1>
</body>
</html>
أخيرًا ، انتقل إلى http://localhost:44311/Home/Index/Nicolas. سيكون لديك بعد ذلك "عرض مرحبا" الذي لدينا في عرض الفهرس. ولكن إذا انتقلت إلى http://localhost:44311/Home/Index/ على سبيل المثال ، فستظهر لك طريقة العرض Error.cshtml (ونعم! لا يوجد id !) ، الذي نبيعه لإضافة:
ASP.NET framework
عرض طريقة العرض خطأ
Error.cshtml هي طريقة عرض يتم إنشاؤها بشكل عام أثناء إنشاء مشروع والتي تحتوي على رسالة خطأ رائعة من هذا النوع. نظرًا لأننا اخترنا إنشاء قالب مشروع فارغ ، فإن طريقة العرض هذه لا تظهر ، ولهذا السبب أضفناها.
لاحظ أنه افتراضيًا ، سيبحث ASP.NET MVC عن طريقة العرض في الدليل الفرعي بنفس اسم وحدة التحكم ، ولكن إذا لم يكن موجودًا ، فسوف ينتقل بعد ذلك إلى الدليل الفرعي المشترك. ما فعله هنا.
حسنًا ، هذا جيد ، لكن كيف يمكننا التأكد من عرض الاسم الأول للشخص في العرض؟
في الواقع ، من السهل جدًا تمرير القيم بين وحدة التحكم وطريقة العرض بفضل قاموس المفتاح / القيمة: the ViewData  .
على سبيل المثال ، لتتمكن من عرض المُدخل الذي تم استرداده من عنوان URL ، سأكون قادرًا على القيام بذلك في وحدة التحكم:

public ActionResult Index(string id)
{
    if (string.IsNullOrWhiteSpace(id))
        return View("Error");
    else
    {
        ViewData["Nom"] = id;
        return View();
    }
}
باستخدام هذا الكود ، أضع قيمة السلسلة id في القاموس وأن هذه القيمة سيتم الوصول إليها عبر مفتاح "الاسم" . بعد ذلك في العرض ، يمكنني استرجاع وعرض هذه القيمة باستخدام هذا القاموس نفسه:

<body>
    <div>
        Hello <span style="color:red">@ViewData["Nom"]</span>
    </div>
</body>
لاحظ أنني أستخدم الحرف @ لاستخدام رمز C# مباشرةً في رأيي.
على سبيل المثال ، لكتابة القيمة الموجودة في القاموس مع صفحة HTML ، اسم المفتاح ، يمكنني استخدام بناء الجملة @ViewData["Nom"]  . وسيكون لدينا:
ASP.NET framework
استخدام C# في العرض
وهذا صعب للغاية! لتكون قادرًا على مزج كل من HTML و C# ... سنفعل الأشياء به. 
ما يثير الاهتمام هو أنه حتى في العرض ، لدينا إتمام تلقائي لمساعدتنا في مدخلاتنا:
ASP.NET framework
استخدام الإكمال التلقائي في العرض
لاحظ أنه يمكنك أيضًا استخدام الكائن ViewBag   ذي النوع dynamic  . مع على سبيل المثال في وحدة التحكم:

public ActionResult Index(string id)
{
    if (string.IsNullOrWhiteSpace(id))
        return View("Error");
    else
    {
        ViewBag.Nom = id;
        return View();
    }
}
وفي العرض:

Hello <span style="color:red">@ViewBag.Nom</span>
يمكنك استخدام بناء الجملة الذي تفضله. سوف نعود إلى هذا لاحقًا.
الكثير ل MVC VC . 

النموذج

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

public class Client
{
    public string Nom { get; set; }
    public int Age { get; set; }
}

أضف أيضًا فصلًا Clients يحاكي التحميل:

public class Clients
{
    public List ObtenirListeClients()
    {
        return new List
        {
            new Client { Age = 33, Nom = "Nicolas"},
            new Client { Age = 30, Nom = "Delphine"},
            new Client { Age = 33, Nom = "Jérémie"},
            new Client { Age = 1, Nom = "Timéo"}
        };
    }
}

يجب إنشاء مثيل لهذا النموذج في وحدة التحكم. على سبيل المثال ، لنقم بإنشاء إجراءين في وحدة التحكم:

public ActionResult ListeClients()
{
    Clients clients = new Clients();
    ViewData["Clients"] = clients.ObtenirListeClients();
    return View();
}

public ActionResult ChercheClient(string id)
{
    ViewData["Nom"] = id;
    Clients clients = new Clients();
    Client client = clients.ObtenirListeClients().FirstOrDefault(c => c.Nom == id);
    if (client != null)
    {
        ViewData["Age"] = client.Age;
        return View("Trouve");
    }
    return View("NonTrouve");
}

حسنًا ، لا يوجد شيء فوق هذا النموذج ، لكنه سيساعدني في توضيح واجهات العرض بشكل أفضل قليلاً.
ثم خمنت ، سنحتاج إلى ثلاث طرق عرض:
  • ListeClients.cshtml
  • Trouve.cshtml
  • NonTrouve.cshtml
لنبدأ بعرض Find.cshtml ، والذي يجب أن يكون في الدليل الفرعي بنفس اسم وحدة التحكم. سوف يحتوي على HTML يشير إلى أنه تم العثور على العميل ، ثم عمره:


    
Le client @ViewData["Nom"] a bien été trouvé et a @ViewData["Age"] ans.
بالنسبة للعرض NonTrouve.cshtml ، المبدأ هو نفسه:


    
Le client @ViewData["Nom"] n'a pas été trouvé !
أخيرًا ، بالنسبة إلى طريقة عرض ListCustomers ، فأنت تفهم المبدأ ، وسنكون قادرين على عرض قائمة جميع العملاء بهذا العرض:

<body>
    <table>
        <tr>
            <th>Nom</th>
            <th>Age</th>
        </tr>
        @foreach (HelloWorld.Models.Client client in ViewData["Clients"] as List<HelloWorld.Models.Client>)
        {
            <tr>
                <td>@client.Nom</td>
                <td>@client.Age</td>
            </tr>
        }
    </table>
</body> 
تعرف على مدى سهولة مزج HTML و C# ... أتوقف عند هذا الحد ، لكنني أعلم الآن أنه يمكننا تبسيط طرق العرض بفضل العروض المكتوبة بشدة التي سنكتشفها لاحقًا.

النتيجة

لذا ، ماذا يعطي؟
لنبدأ من خلال العثور على عميل بعنوان URL التالي:
http://localhost:44311/Home/ClientClient/Nicolas
سيكون لدينا :
ASP.NET framework
عرض البحث عن عميل
ثم ، دعونا نجرب مع عميل غير معروف ، على سبيل المثال من خلال تصفح http://localhost:44311/Home/ClientSearch/Marine ، سيكون لدينا:
ASP.NET framework
عرض طريقة العرض حيث لم يتم العثور على العميل
أخيرًا ، يمكننا عرض قائمة جميع العملاء ، من خلال http://localhost:44311/Home/ListClients.
يعطي :
ASP.NET framework
عرض جميع العملاء
آه ، هذا ليس بالأمر السيء بالنسبة للمحاولة الأولى ، أليس كذلك؟ 
الكثير لهذا البدء أولاً مع ASP.NET MVC . كنا قادرين على جعل Hello World الكلاسيكية في النهاية دون الحاجة إلى القيام بالكثير. حسنًا ، نحن بعيدون عن رؤية كل شيء وسنتعمق في تفاصيل العناصر الثلاثة لـ MVC في الجزء التالي.

في الخلاصة

  • يتم تحويل URL إلى إجراء عبر آلية التوجيه الخاصة بـ ASP.NET .
  • وحدة التحكم هي فئة مشتقة من الفئة الأساسية Controller   وتعكس طرقها الإجراءات التي اتخذها المستخدم.
  • يمكن لطريقة العرض الجمع بين علامات HTML والرمز C# ، على سبيل المثال لعرض المعلومات التي يتم إحضارها بواسطة وحدة التحكم باستخدام الكائن ViewData  .
  • يتم استغلال النموذج بواسطة وحدة التحكم وإرساله إلى العرض للعرض.