تعلم ASP.NET MVC


الدرس: عرض واجهات العرض


الصفحة السابقة
نماذج جيدة الأداء ، مع اختبارات رائعة وأنماط ممتازة ، هذا جيد. لكن ذلك ، مستخدمونا لا يهتمون كثيراو يسخرون منا . ما يريدونه هو أن يكون الموقع جميل (وأنه يعمل بالطبع). على أي حال ، فإن أول شيء سيرونه هو صفحات HTML الخاصة بنا.
في نموذج MVC ، يتم عرض ما نراه بواسطة "V" ( "للعرض " ) . يجب أن تكون حذرا إذا كنت تريد إرضاء المستخدمين!  يمكنك تطبيق كل ما تعرفه بالفعل عن إنشاء واجهات لتطبيقات MVC . كيف ؟ هذا ما سنراه في هذا الفصل حول واجهات العرض.

عرض طريقة العرض


لقد رأينا أنه وفقًا للاتفاقية ، يتم وضع طرق العرض في مجلد /Views ، وبشكل أكثر دقة في مجلد فرعي مطابق لاسم وحدة التحكم المرتبطة بطريقة العرض. يتم ربط اسم العرض أيضًا ، حسب الاصطلاح ، باسم إجراء وحدة التحكم.

على سبيل المثال ، يتم وضع طريقة عرض تم إرجاعها بواسطة إجراء Index  وحدة التحكم Home   في المجلد /Views / Home وسيتم تسميتها Index.cshtml .
بالنسبة للتطبيق الخاص بنا ، إذا أردنا إنشاء صفحة رئيسية يمكن الوصول إليها على سبيل المثال عبر العنوان / ، فيمكننا استخدام التوجيه الافتراضي وإنشاء وحدة تحكم مسماة HomeController  وإنشاء طريقة فهرس تقوم ببساطة بإرجاع طريقة العرض الافتراضية.

باستثناء أنه يزعجني الحصول على اللغة الإنجليزية في عناوين URL الخاصة بي ... سنقوم فقط بتعديل طريقة تعريفات الطرق لاستبدالها Home   بـ Accueil  :

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Accueil", action = "Index", id = UrlParameter.Optional }
    );
}
الآن سنقوم بإنشاء وحدة تحكم أساسية بسيطة ، مباشرة عن طريق النقر بزر الماوس الأيمن> إضافة وحدة تحكم في دليل وحدات التحكم ، كما فعلنا بالفعل. نسميها بالطبع AccueilController ، نموذج تحكم MVC فارغ. هذا يسمح لنا بالحصول على الطريقة البسيطة التي تم إنشاؤها بواسطة Visual Studio :

public ActionResult Index()
{
    return View();
}
الذي يعيد إلينا طريقة العرض الافتراضية عند استدعاء إجراء index . لاستدعاء ذلك بدقة ، ابدأ مشروع ASP.NET MVC ثم اضغط  F5 .
هنا ، هو مشروع الويب الذي بدأ وليس مشروع الاختبار الذي استخدمناه من قبل. في المنزل ، أنشأ Visual Studio خادم ويب على المنفذ 60818 وبالتالي يمكن الوصول إلى وحدة التحكم الخاصة بي عبر عنوان URL http://localhost:60818/  ربما لن يكون لديك نفس المنفذ ، وهذا المنفذ عشوائي.
كما يجب أن تتخيل ، نظرًا لأننا لم ننشئ طريقة عرض ، فسينتهي بنا التنفيذ الى الخطأ:

لا يمكن العثور على طريقة عرض "index" أو الرئيسية ، أو لا يوجد محرك عرض يدعم المواقع التي يتم فيها البحث. ركز البحث على المواقع التالية:

~ / Views / Accueil / Index.aspx
~ / Views / Accueil / Index.ascx
~ / Views / Shared / Index.aspx
~ / Views / Shared / Index.ascx
~ / Views / Accueil /Index.cshtml
~ / Views / Accueil / Index.vbhtml
~ / Views / Shared / Index.cshtml
~ / Views / Shared / Index.vbhtml

هنا نجد الاتفاقية الشهيرة المذكورة أعلاه. وبما أنه قد وقع استدعاء وحدة تحكم Accueil  وطريقة Index ، وحدة تحكم إرجاع طريقة العرض الافتراضية مع أسلوب View()  ، فإنه يسعى إلى إيجاد views الموجودة في المجلد Views/Accueil ،و أسمائهم Index.aspx أو Index.ascx .
طرق العرض بالملحق .aspx أو .ascx هي طرق عرض محرك العرض التاريخي القديم لـ ASPX الذي يعرفه مستخدمو ASP.NET والذي كان موجودًا في إصدارات ASP.NET MVC أقل من 3 اليوم ، محرك العرض الافتراضي هو محرك عرض Razor الذي سنستخدمه في هذه الدورة التدريبية وملحقاته هي. cshtml . سأعود بسرعة إلى محرك العرض التاريخي في الجزء التالي.

ثم يبحث عن نفس الشيء في المجلد Views/Shared . بعد ذلك ، يبحث في هذه الأدلة نفسها عن الملفات Index.cshtml أو Index.vbhtml . 
Vbhtml هو لـ VB.NET و cshtml لـ C# .

لا يجد شيئًا ، فهو يطبع خطأ.
وهناك ، الأمر متروك لنا للعب. سنقوم بإنشاء العرض Index  . أغتنم هذه الفرصة لأظهر لك حيلة صغيرة لإنشاء عرض سريع. انقر بزر الماوس الأيمن في طريقة  Index لوحدة التحكم Accueil ، يمكننا إنشاء العرض مباشرة باستخدام عنصر قائمة السياق "إضافة عرض" :
ASP.NET framework
إضافة طريقة عرض من وحدة التحكم
بالطبع ، ستتوقف عن تصحيح الأخطاء لإجراء تغييرات على تطبيقنا.
نحصل على النافذة المعبأة مسبقًا التالية:
ASP.NET framework
إضافة العرض
يمكنك إلغاء تحديد كل شيء لإنشاء أبسط عرض ممكن والنقر فوق إضافة. وها هو أن Visual Studio أنشأ العرض الصحيح بمفرده ووضعه في المكان المناسب أيضًا. يمكنك الذهاب لإلقاء نظرة في دليل طرق العرض ، يوجد دليل فرعي رئيسي وفيه ملف Index.cshtml :
ASP.NET framework
العرض الجديد في مستكشف الحلول
العرض فارغ إلى حد ما ، دعنا نضيف رسالة صغيرة إليها ، فقط لتمييزها:

@{
    Layout = null;
}



<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        Je suis la vue index
    </div>
</body>
</html>
باستثناء حالات محددة ، سأقصر نموذجي من كود المشاهدات على محتوى العلامة بشكل منتظم .
هنا ، في هذه الحالة ، يمكن أن يكون الكود الذي يوضح هذا الرأي:

<div>
    Je suis la vue index
</div>
هذا ببساطة لتجنب التحميل الزائد بالمعلومات التي قد تكون غير ضرورية عند التعلم.
أعد تشغيل تطبيق الويب وينتهي بنا الأمر بعرض طريقة العرض:
ASP.NET framework
عرض طريقة العرض index
تذكر ، يتم اختيار كيفية عرض طريقة العرض index بواسطة وحدة التحكم. هذه هي التعليمات:

return View();
الذي يحدد اختيار العرض الذي يسمى نفس اسم وحدة التحكم ، في هذه الحالة Index . يجب أن تعلم أن هذه التعليمات تعادل ما يلي:

return View("Index");
حيث نشير صراحة إلى أننا نريد عرض العرض Index . هذا يعني أنه يمكننا اختيار عرض العرض الذي نريده. على سبيل المثال ، أنشئ طريقة عرض جديدة في مجلد طرق العرض Views/Accueil واسميها Bonjour :
ASP.NET framework
إضافة عرض Bonjour
ضع رسالة صغيرة لتمييزها:

<div>
    Je suis la vue Bonjour
</div>
للوصول إليه من إجراء وحدة التحكم نفسه ، ما عليك سوى استخدام الرمز التالي:

public ActionResult Index()
{
    return View("Bonjour");
}
وهذه المرة ، منطقيا ، يتم   عرض العرض Bonjour .
إلى جانب ذلك ، نحن لسنا مقتصرين على هذا المجلد. إذا قمنا بإنشاء طريقة عرض أخرى في موقع آخر ، قل في المجلد /Views/Test/ ونسميه Essai  ، يمكننا الوصول إليه باستخدام:

public ActionResult Index()
{
    return View("~/Views/Test/Essai.cshtml");
}
نستخدم بناء الجملة مع الرمز ~ للإشارة إلى مسار العرض ، دون نسيان امتداده لأنه في هذه الحالة ، لم نعد نستخدم الآلية الداخلية بشكل مباشر مما يسمح بتحديد العرض.
إذا قمت بإنشاء طرق العرض essai و Bonjour مثلي ، فيمكنك حذفها لتنظيف مشروع ChoixResto قليلاً.

إظهار بيانات النموذج


لقد رأينا أنه يمكننا بسهولة عرض المعلومات الديناميكية في العرض عن طريق وضعها ، من وحدة التحكم ، في القاموس ViewData  . إنه قاموس شامل حيث يمكننا وضع الكائنات من خلال ربطها بالمفاتيح.
قم بتعديل وحدة التحكم لديك:

public ActionResult Index()
{
    ViewData["message"] = "Bonjour depuis le contrôleur";
    ViewData["date"] = DateTime.Now;
    ViewData["resto"] = new Resto { Nom = "Choucroute party", Telephone = "1234" };

    return View();
}
نضع في هذا القاموس ثلاثة كائنات مختلفة ، وسلسلة ، وتاريخ و Resto ، والتي نربطها بثلاثة مفاتيح مختلفة. من السهل جدًا استخدام هذه البيانات في طريقة العرض:

<div>
    Je suis la vue index
</div>
<ul>
    <li>@ViewData["message"]</li>
    <li>@(((DateTime)ViewData["date"]).ToString("dd/MM/yyyy"))</li>
    <li>@(((ChoixResto.Models.Resto)ViewData["resto"]).Nom)</li>
    <li>@(((ChoixResto.Models.Resto)ViewData["resto"]).Telephone)</li>
</ul>
وهذا يعطينا:
ASP.NET framework
استخدام قاموس ViewData
مباشرة في HTML ، نصل إلى الكائن ViewData  ونعرض المحتوى باستخدام الحرف @ . 
حسنًا ، حسنًا ، هناك الكثير من الأقواس لمختلف القوالب ، لكننا سنرى لاحقًا أنه من الممكن تبسيط كل هذا.
يتم تفسير الحرف الخاص @ بواسطة محرك عرض Razor ويسمح لك بوضع كود C# الذي سيتم تفسيره بواسطة محرك العرض. هنا ، نعرض محتوى المتغير. يمكن استخدام أي كود C# . على سبيل المثال ، بدلاً من عمل طبقتين للوصول إلى المطعم ، كان بإمكاننا القيام بما يلي:

<div>
    Je suis la vue index
</div>
<ul>
    <li>@ViewData["message"]</li>
    <li>@(((DateTime)ViewData["date"]).ToString("dd/MM/yyyy"))</li>
    @{
        ChoixResto.Models.Resto resto = (ChoixResto.Models.Resto)ViewData["resto"];
    }
    <li>@resto.Nom</li>
    <li>@resto.Telephone</li>
</ul>
ستلاحظ أننا نستفيد من الإكمال التلقائي في العرض. على سبيل المثال ، يمكنني الوصول إلى خصائص المطعم دون مشاكل:
ASP.NET framework
الإكمال التلقائي في العرض
من الممكن تبسيط الكتابة باستخدام كائن آخر لتمرير المعلومات من وحدة التحكم إلى العرض ، والذي يعمل تقريبًا مثل الكائن ViewData  . هذا هو الكائن ViewBag  من النوع dynamic ، وهو أحد الأنواع الجديدة لـ C# .
تقريبًا ، يمكننا القول أن النوع الديناميكي يعمل تقريبًا مثل النوع Object ، لأنه يمكن أن يحتوي على أي كائن آخر. في التجميع ، سنكون قادرين على استخدامه والوصول إلى خصائصه دون التحقق من النوع ، وهو أمر Object  لا يسمح به. فقط في وقت التشغيل سيحاول .NET framework الوصول إلى خصائص الكائن وأساليبه. إذا لم تكن موجودة ، فسيكون هناك خطأ.
على سبيل المثال ، يتم تجميع التعليمات البرمجية التالية دون مشاكل:

dynamic resto = new Resto();
resto.Nom = "Resto dynam-hic";
resto.Adresse = "compile, mais ne fonctionnera pas";
ولكن في وقت التشغيل ، عندما يحاول .NET الوصول إلى الخاصية Adresse ، سيتم طرح استثناء لأنه غير موجود.
ستقول لي أنه ليس لها مصلحة في هذا المثال ، وهذا صحيح. بالإضافة إلى ذلك ، مع النوع dynamic ، لا يوجد إكمال تلقائي. باختصار ، العيوب فقط ... هنا ، ربما ، ولكن شاهد كيف يتم تحويل كود العرض بفضل ViewBag  :

<div>
    Je suis la vue index
</div>
<ul>
    <li>@ViewBag.message</li>
    <li>@ViewBag.date.ToString("dd/MM/yyyy")</li>
    <li>@ViewBag.resto.Nom</li>
    <li>@ViewBag.resto.Telephone</li>
</ul>
لا حاجة لاستعمال cast ، وهو الأمر الأكثر وضوحًا على الفور.

العرض المكتوب بقوة


على الرغم من ... هذا ViewBag ... بدون استكمال تلقائي. انها حقا ليست عملية. لحسن الحظ ، هناك حل آخر. بدلاً من تمرير البيانات من خلال ViewBag  (أو ViewData  ) ، يمكننا استخدام النموذج المرتبط بالمشاهدة.
يوجد بالفعل تحميل زائد للطريقة View()   مما يجعل من الممكن تمرير النموذج مباشرة إلى العرض. على سبيل المثال ، تخيل أن عرض index يسمح لك بعرض تفاصيل المطعم ، عليك فقط تمرير المطعم كمُدخل الى طريقة View  لتعيين نموذجنا تلقائيًا لهذا المطعم:

public class AccueilController : Controller
{
    public ActionResult Index()
    {
        Resto r = new Resto { Nom = "La bonne fourchette", Telephone = "1234" };
        return View(r);
    }
}
هنا ، نجتاز مطعمًا تم إنشاؤه حديثًا كمُدخل للطريقة View  . وخلف ذلك ، يقوم محرك إطار العمل تلقائيًا بتعيين خاصية Model  العرض للخاصية التي تم تمريرها كمُدخل. هذا يعني أنه يمكننا الكتابة الآن:

<div>
    Je suis la vue index
</div>
<ul>
    <li>@Model.Nom</li>
    <li>@Model.Telephone</li>
</ul>
نعم ، الأمر ليس سيئًا للغاية ، باستثناء أنه بشكل افتراضي ، يكون نموذج العرض من النوع dynamic ... لذلك ، هناك أفضل ولكنه ليس رائعًا بعد ، لأنه لا يوجد حتى الآن الإكمال التلقائي لهذا.
إلا أنني أعرف نوع النموذج الخاص بي! إنه Resto  ! حسنًا ، فقط علينا ان نقون للعرض ، ويحدث ذلك في الأعلى:

@model  ChoixResto.Models.Resto
هنا ، @model   يسمح بناء الجملة بالإشارة إلى أن نموذج العرض من النوع Resto  . بالإضافة إلى ذلك ، لدينا الآن الإكمال التلقائي الذي يسير على ما يرام. بفضل الكتابة القوية للعرض ، يستطيع Visual Studio معرفة أن النموذج من النوع Resto  :
ASP.NET framework
كتابة قوية لنموذج العرض
عملي جدا أليس كذلك؟

عرض النماذج


حسنًا ، إنه يعمل ، لكنك ستعترف بأنني خدعت قليلاً هنا ... في بداية المثال ، عرضت المعلومات التالية:

<div>
    Je suis la vue index
</div>
<ul>
    <li>@ViewBag.message</li>
    <li>@ViewBag.date.ToString("dd/MM/yyyy")</li>
    <li>@ViewBag.resto.Nom</li>
    <li>@ViewBag.resto.Telephone</li>
</ul>
رسالة وتاريخ و Resto  . ثم هناك ، لتوضيح وجهات النظر المكتوبة بشدة ، اختفت الرسالة والتاريخ كما لو كان سحرًا لتبسيط عملي.  أستطيع أن أشعر أنك لا تزال تريد عرضها!
كنت أعلم أن خفة يدي لن تمر دون أن يلاحظها أحد ، لكن لحسن الحظ لدي أكثر من خدعة في حقيبتي.
فقط قم بتمرير المعلومات الإضافية في ViewData  (أو ViewBag  ) . لذا لدينا النموذج في Model  والباقي في  ViewBag  . الذي يعطي تحكمنا:

public class AccueilController : Controller
{
    public ActionResult Index()
    {
        ViewData["message"] = "Bonjour depuis le contrôleur";
        ViewData["date"] = DateTime.Now;
        Resto r = new Resto { Nom = "La bonne fourchette", Telephone = "1234" };
        return View(r);
    }
}
والعرض:

<div>
    Je suis la vue index
</div>
<ul>
    <li>@ViewBag.message</li>
    <li>@ViewBag.date.ToString("dd/MM/yyyy")</li>
    <li>@Model.Nom</li>
    <li>@Model.Telephone</li>
</ul>
الآن ... عمليةً قليلا و لكنها تعمل 
لا ولكن أوه! ما هي طريقة الكرتون هذه؟
حسنًا ، حسنًا ... في الواقع ، هناك حل أكثر أناقة ، يسمى "نماذج العرض" ، وغالبًا ما يستخدم في ترجماتها الإنجليزية "view-models " .
كن حذرا ، لا ينبغي الخلط بينهم وبين نظرائهم في نمط تصميم MVVM لأنهم ليسوا متكافئين. أخيرًا ... لا يزال لديهم وظيفة مشتركة: "تكييف" النموذج مع العرض.
وهذا بالضبط ما نطلبه هنا في نموذج العرض ، لتزويدنا بشيء سهل وجاهز للاستخدام لواجهات عرضنا. بالإضافة إلى ذلك ، يسمح لنا بإحضار العديد من عناصر النموذج بسهولة في وقت واحد. على سبيل المثال قائمة جميع المطاعم وجميع المستخدمين.
لذلك دعونا ننشئ أول نموذج عرض لدينا. للقيام بذلك ، سنضعه في مجلد في الجذر ، يسمى ViewModels :
ASP.NET framework
إنشاء مجلد ViewModels
ثم قم بإنشاء فئة فيه ، والتي نسميها على سبيل المثال AccueilViewModel  :

public class AccueilViewModel
{
    public string Message { get; set; }
    public DateTime Date { get; set; }
    public Models.Resto Resto { get; set; }
}
وستفهم أن هناك أكثر من استبدال النموذج بنموذج العرض في وحدة التحكم:

public ActionResult Index()
{
    AccueilViewModel vm = new AccueilViewModel
    {
        Message = "Bonjour depuis le contrôleur",
        Date = DateTime.Now,
        Resto = new Resto { Nom = "La bonne fourchette", Telephone = "1234" }
    };
    return View(vm);
}
هناك شيء آخر يجب القيام به: اكتب العرض بشكل صحيح باستخدام نموذج العرض. للقيام بذلك ، قم بتعديل السطر الأول من طريقة العرض:

@model  ChoixResto.ViewModels.AccueilViewModel
وهذه المرة سيكون بإمكاننا الوصول إلى جميع خصائصنا المكتوبة ، وذلك بفضل نموذج العرض:
ASP.NET framework
الإكمال التلقائي من نموذج العرض
كود العرض أكثر وضوحا:

<div>
    Je suis la vue index
</div>
<ul>
    <li>@Model.Message</li>
    <li>@Model.Date.ToString("dd/MM/yyyy")</li>
    <li>@Model.Resto.Nom</li>
    <li>@Model.Resto.T</li>
</ul>
ولدينا نتائجنا ، مطابقة للنتائج السابقة ، ولكن أفضل بكثير .
الجانب السلبي ، لأنه يوجد واحد ، هو أنه يجب علينا تجميع كائن نموذج العرض من عنصر واحد أو أكثر من النموذج ، والذي لا يزال مهمة غير مثيرة للاهتمام ، وإن كانت ضرورية.
لاحظ أنه الآن بعد أن عرفنا ما هي طريقة العرض المكتوبة بقوة ، فمن الممكن تبسيط إعلانها عندما نضيف طريقة عرض. يجب عليك اختيار النموذج Empty واختيار فئة طراز لإنشاء عرض مكتوب بقوة:
ASP.NET framework
اختيار نموذج لكتابة العرض
هنا ، باختيار نموذج العرض الصحيح ، وكذلك طراز الفئة المناسب (هنا في هذه الحالة نموذج العرض) ، سيقوم Visual Studio تلقائيًا بإنشاء طريقة عرض باستخدام النموذج @model   المعبأ بشكل صحيح:

@model  ChoixResto.ViewModels.AccueilViewModel
هذا يبسط عملنا.
كن حذرًا ، إذا لم يظهر فصلك في القائمة المنسدلة ، فربما تحتاج إلى إعادة ترجمة مشروعك لأن Visual Studio لا يكتشف بشكل صحيح الفئات حتى يتم تجميعها مرة واحدة على الأقل بشكل صحيح.
سترى بالتأكيد خيارات أخرى في "نموذج" القائمة المنسدلة ... نتركها فارغة الآن لأننا سنعود إليها لاحقًا ، ولكن نعلم أن هذه ميزة تسمح لنا بإنشاء أشياء في العرض لزيادة تبسيط عملنا. قليلاً من الصبر ، سنعود إلى هذا في نهاية الدورة.

مزيج HTML و C#


لذلك فهمنا أن العرض قد تم إثراء HTML . بشكل طبيعي وبسيط للغاية ، أكملنا العرض ببيانات من نموذجنا باستخدام الحرف @ . هذا يسمح لنا بوضع محتوى ديناميكي مباشرة في صفحاتنا.
لعرض رسالتنا ، تمكنا من القيام بما يلي:

<ul>
    <li>@Model.Message</li>
    [...]
</ul>
لقد رأينا أنه يمكننا وضع أي تعبير C# تقريبًا في كود العرض ، بفضل @ . يسمح هذا على سبيل المثال بعمل عروض شرطية:

<div>Je suis la vue index</div>
@{
    DayOfWeek jour = Model.Date.DayOfWeek;
    if (jour == DayOfWeek.Saturday || jour == DayOfWeek.Sunday)
    {
        <p>Bon week-end</p>
    }
    else
    {
        <p>Bonne semaine</p>
    }
}
كن حذرًا ، مع ذلك ، لا تسيء استخدام هذه الصيغة كثيرًا ، في خطر رؤية العرض بسرعة تصبح غير مقروءة. هنا ، قد يكون من المناسب "تحضير" ما تريد عرضه بنموذج عرض.
من ناحية أخرى ، يعد استخدام C# ضروريًا في بعض الأحيان. على سبيل المثال ، تخيل أنني أريد عرض قائمة المطاعم في جدول HTML . على سبيل المثال ، أقوم بتعديل نموذج العرض للحصول على قائمة من المطاعم بدلاً من مطعم واحد:

public class AccueilViewModel
{
    public string Message { get; set; }
    public DateTime Date { get; set; }
    public List<Models.Resto> ListeDesRestos { get; set; }
}
التي أطعمها في وحدة التحكم الخاصة بي على النحو التالي:

public ActionResult Index()
{
    AccueilViewModel vm = new AccueilViewModel
    {
        Message = "Bonjour depuis le <span style=\"color:red\">contrôleur</span>",
        Date = DateTime.Now,
        ListeDesRestos = new List<Resto> 
        {
            new Resto { Nom = "Resto pinambour", Telephone = "1234" },
            new Resto { Nom = "Resto tologie", Telephone = "1234" },
            new Resto { Nom = "Resto ride", Telephone = "5678" },
            new Resto { Nom = "Resto toro", Telephone = "555" },
        }
    };
    return View(vm);
}
بفضل الحلقة ، إليك كيفية عرض قائمة المطاعم الخاصة بي في جدول HTML :

<div>Je suis la vue index</div>
<table>
    <tr>
        <th>Nom</th>
        <th>Téléphone</th>
    </tr>
    @{
        foreach (var resto in Model.ListeDesRestos)
        {
            <tr>
                <td>@resto.Nom</td>
                <td>@resto.Telephone</td>
            </tr>
        }
    }
</table>
ولدينا:
ASP.NET framework
العرض عبر حلقة في العرض
بالطبع أضفت القليل من CSS للحصول على بعض الحدود:

<style type="text/css">
    table {
        border-collapse: collapse;
    }

    td, th {
        border: 1px solid black;
    }
</style>
لكنها عرضية .
الكثير لهذا الجدول ، بسيطة إلى حد ما ، أليس كذلك؟ كل هذا بفضل حلقتنا foreach  وقدرة ASP.NET MVC على مزج كود HTML و C# ببساطة.
ماذا عن فحوصات النموذج؟ إنه نفس الشيء. نحن نخلط! مثل David G .!
دعنا نعود إلى نموذج العرض القديم حيث لدينا مطعم واحد وليس قائمة. لذا يمكننا فقط إنشاء صفحة بعناصر تحكم في النموذج:

<div>Je suis la vue index</div>
<input type="text" id="nom" value="@Model.Resto.Nom" />
<input type="text" id="telephone" value="@Model.Resto.Telephone" />
<input type="submit" value="Envoyer" />
لقد حذفت علامات النموذج
عن قصد. سنرى لاحقا لماذا.
و HTML بدون مفاجآت:
ASP.NET framework
عرض النموذج المعبأ مسبقًا
بفضل خاصية القيمة المعبأة بشكل صحيح ، يتم تعبئة مربعات النص مسبقًا. ممتاز.
حسنًا ، أعتقد أن لديك الفكرة العامة ، لذا لن أعطيك جميع عناصر تحكم HTML على هذا الكوكب .