إضافة واجهة View لموقع ASP.NET MVC

ASP.NET MVC Add View

بعد التعرف على تعريف الـ ASP.NET MVC  وبدء مشروع ArabicArchive فيها والتعرف على مفهوم المتحكمات، سننتقل في هذه المقالة لتعلم المفهوم الثاني وهو الـ Views، وحسب التعريف السابق فهي: قوالب يستخدمها موقعك لتوليد واجهات HTML.

بداية سوف نقوم بتعديل المتحكم WelcomeController من أجل استخدام ملفات ال View بحيث نولد أول ملف Html.

هذه المقالة جزء من سلسلة لتعلم أساسيات ASP.NET MVC للمبتدئين:

إن تابع index في المتحكم WelcomeController يعيد سلسلة نصية String حالياً، قم بتغيير تابع index   ليعيد View كما هو موضح في الكود التالي:

// GET: Welcome
        public ActionResult Index()
        {
            return View();
        }

إن تابع Index  الذي كتبناه أصبح من نوع Action Method أي أنه أصبح دالة تقوم باستجابة Respond عندما يأتيها طلب من المتصفحات Browsers، والاستجابة هنا تكون بإعادة واجهة View.

سنقوم الآن بإضافة الـواجهة View التي سيعيدها التابع Index:

اضغط بالزر الأيمن على مجلد Views -> Welcome  ثم اضغط Add  واختر: (MVC 5 View Page with Layout (Razor

سيظهر مربع نص يطلب إدخال اسم ال  View، نكتب Index (ينبغي أن يكون مطابق لأسم التابع الذي سيعيده)  ثم نضغط OK

في مربع النصي الجديد سيطلب منك اختيار القالب الافتراضي للواجهة Select a Layout Page، اضغط على استغراض واختر القالب _Layout.cshtml الموجود افتراضياً في مجلد Shared   ثم اضغط OK

نلاحظ أن الملف ArabicArchive -> Views – > Welcome -> Index.cshtml قد تمت اضافته

قم بإضافة الكود التالي في ملف Index.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Index";
}
<h2>Index</h2>

<p>Hello from our View Template!</p>

قم بالضغط بزر الفأرة اليميني على الملف Index.cshtml واختار View in Browser

أو يمكنك أيضا تشغيل المشروع والانتقال الى المتحكم  Welcome

 http://localhost:xxxx/Welcome

نلاحظ أن التابع Index في المتحكم لا يقوم بالكثير من العمل حيث أنه فقط يعيد الواجهة View، وبما أنا أضفنا الواجهة بإسم مطابق للتابع، في المجلد المناسب فإن ASP.NET MVC بشكل افتراضي ستستخدم الملف Index.cshtml الموجود في المجلد   Views -> Welcome

قالب التنسيق الافتراضي Layout

 قالب التنسيق Layout  هو قالب للواجهات، بحيث نضع فيه التعليمات التي سيتكرر استخدامها والأساسية، كالتعليمات الأساسية في صفحة HTML، وذلك لتجنب التكرار ولتحقيق فعالية أكبر. مع التأكيد على أن نضع تابع في هذا القالب بحيث تقوم الواجهات التي تستخدم القالب باستبدال التابع بمحتواها، أي أينما وضعنا التابع في القالب سيتم استبداله بمحتوى الواجهة.

أولا سنقوم بتغيير رابط اسم التطبيق الذي يظهر  في أعلى الصفحة حيث أنه يوضع في مكان واحد في المشروع على الرغم أنه يظهر في كل صفحة في التطبيق

قم بالذهاب الى المجلد /Views/Shared  في Solution Explorer  وقم بفتح الملف Layout.cshtml_

قم بإيجاد السطر()RenderBody@، إن تابع RenderBody هو التابع الذي حدثتكم عنه.

قم بتغيير محتويات  التعليمة <title> ،  إلى ” MVC Arabic Archive” ملف التنسيق الكامل موضح بالأسفل:

<!DOCTYPE html> 
<html> 
<head>  
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">  

<title>@ViewBag.Title - MVC Arabic Archive</title>  

@Styles.Render("~/Content/css")  @Scripts.Render("~/bundles/modernizr") 

</head> 
<body>  

<div class="navbar navbar-inverse navbar-fixed-top">  
<div class="container">  
<div class="navbar-header">  
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
<span class="icon-bar"></span>  
<span class="icon-bar"></span>  
<span class="icon-bar"></span>  
</button>  

@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })  </div>
  
<div class="navbar-collapse collapse">  
<ul class="nav navbar-nav">  
<li>@Html.ActionLink("Home", "Index", "Home")</li>  
<li>@Html.ActionLink("About", "About", "Home")</li> 
 <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>  

@Html.Partial("_LoginPartial")
</div>  
</div>  
</div>  
<div class="container body-content">  

@RenderBody()  

<hr />  

<footer>  
<p>&copy; @DateTime.Now.Year - MVC Arabic Archive</p>  
</footer>  
</div> 

@Scripts.Render("~/bundles/jquery")  @Scripts.Render("~/bundles/bootstrap")  
@RenderSection("scripts", required: false) 
</body> 

</html>

قم بتشغيل المشروع مع ملاحظة اسم المشروع في شريط التصفح هو MVC Arabic Archive، وبالنقر على رابط  About  نلاحظ أيضا أن اسم التطبيق في شريط التصفح هو MVC Arabic Archive، ومنه نلاحظ أننا قمنا بعمل التعديل لمرة واحدة في قالب التنسيق وانعكس هذا التعديل على جميع صفحات الموقع.

بالعودة إلى الواجهة التي سبق وحضرناها نجد  Views -> Welcome – > Index.cshtml  أنه يحتوي على الكود التالي:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Index"; 
}

وهو تحديد أن هذه الواجهة تستخدم القالب _Layout، وفي حال كنت تريد إضافة واجهة بدون قالب فتكون:

@{
    Layout = null;
    ViewBag.Title = "Index"; 
}

لكن في حالتنا سنتركها على حالها.

كيف يمكن تمرير البيانات بين الواجهات Views والقالب Layout ؟

يكون باستخدام المتغير ViewBag حيث يمكننا بسهولة تمرير البارمترات بين الواجهات، ومثالاً على ذلك يمكنكم الانتباه إلى الواجهة التي أضفناها:

@{
      Layout = "~/Views/Shared/_Layout.cshtml";
      ViewBag.Title = "Index";
}

<h2>Index</h2>
<p>Hello from our View Template!</p>

نلاحظ أنه تم تعريف الـ ViewBag، وتم إعطائها إسم Title وقيمة Index، حيث أن هذا المتغير من نوع Dynamic وتعريفه يكون بالصيغة السابقة، وبإمكاننا تعريف عدد كبير من هذه المتغيرات حسب احتياجنا.

سنقوم بتعديل قيمة Title الموجود في متغير ViewBag إلى: “Book List”

@{
      Layout = "~/Views/Shared/_Layout.cshtml";
      ViewBag.Title = "Book List";
}

<h2>Book List</h2>
<p>Hello from our View Template!</p>

ونلاحظ أيضاً أن قالب التنسيق Views -> Shared -> Layout.cshtml يستخدم المتغير ViewBag أيضاً بنفس الاسم في في القسم Head، وبذلك ستنتقل القيمة من الواجهة المفتوحة إلى القالب.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>@ViewBag.Title - Arabic Archive Application</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

وعليه عندما نريد نقل شيئ ما من واجهة إلى القالب، سنستخدم ViewBag، قم بتشغيل المشروع ولاحظ عنوان المتصفح.

ملاحظة: اذا لم تستطع رؤية التغيرات في المتصفح ربما يكون ذلك بسبب تحميل المتصفح نسخة مخزنة في ذاكرة الكاش الخاصة به، قم بالضغط على Ctrl+F5 في المتصفح ليتم لإعادة طلب الموقع مع تجاهل الكاش الحالي.

كيف يمكن تمرير البيانات من المتحكم إلى الـ View؟

قبل أن ننتقل إلى قواعد البيانات والتحدث عن المفهوم الثالث في الـ MVC، سنقوم بمراجعة ماتعلمناه بشكل منطقي وسريع، والتعرف على كيفية تمرير بيانات من المتحكم Controller إلى الـ View.

عندما يقوم المستخدم بطلب عنوان الموقع URL عن طريق مستعرض ويب، فيتم توجيه الطلب إلى المتحكم المختص، وبدوره يحتوي عدة أستجابات، منها مايعيد نص، ومنها مايعيد أنواع أخرى، ومنها مايعيد واجهة View.

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

بالعودة إلى مشروعنا فإن التابع Greeting في المتحكم WelcomeController يأخذ بارمتران هما name و numTimes  ويعيد القيم بشكل مباشر للمتصفح. بدلاً من ذلك سنقوم بتعديل المتحكم ليعيد View، ونريده هذه المرة أن يمرر قيم البارتمرات إلى الواجهة View.

ونستطيع القيام بذلك عن طريق المتحكم ووضع البارامترات التي تحتاجها ال View  في Object من نوع ViewBag بحيث تسطيع الواجهة  الوصول لهذا ال Object وعرض قيمه.

الكود الكامل للمتحكم WelcomeController.cs هو كما يلي:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ArabicArchive.Controllers
{
    public class WelcomeController : Controller
    {
        // GET: HelloWorld
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Greeting(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }


    }
}

ViewBag هو عبارة عن object ديناميكي وهذا يعني أننا نستطيع أن نضع أي شيء نريده في هذا الـ object.

قم ببناء المشروع، لتحديث ماقمنا بإضافته، وذلك بالضغط على Ctr + B

و الآن سنقوم بإضافة الـ View قم بالنقر بزر الفأرة اليميني على مجلد Views\Welcome  ثم انقر Add   ثم انقر  (MVC 5 View Page with Layout (Razor

في مربع الحوار  Specify Name for Item ادخل Greeting ثم اضغط OK

في مربع الحوار Select a Layout Page نترك التنسيق الافتراضي Layout.cshtml_ كما هو ثم نضغط OK

فنلاحظ أن الملف ArabicArchive\Views\Welcome\Greeting.cshtml   قد تمت إضافته.

قم باستبدال الكود الموجود في الملف Greeting.cshtml   بالكود الموجود بالأسفل، حيث يقوم هذا الكود بعمل حلقة لطباعة العبارة الموجودة في البارامتر name عدد من المرات حسب البارامتر numTimes.

الكود الكامل للملف Greeting.cshtml:

  @{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<ul>
@for (int i = 0; i < ViewBag.numTimes; i++)
{

<li>@ViewBag.name</li>

}
</ul>

شغل المشروع وانتقل الى الرابط
http://localhost:xx/HelloWorld/Greeting?name=Student&numtimes=4

وبهذه العملية فإن البيانات تأخذ من الرابط وتمرر للمتحكم باستخدام فيقوم المتحكم بدوره بتجميع البيانات في ViewBag object ويمرر هذا ال object الى ال view ثم تقوم ال view بعرض البيانات للمستخدم

لاحقاً في هذه السلسلة سنستخدم طرق متقدمة أكثر لتمرير البيانات من المتحكم إلى الView كطريقة الـ View Model.

تغذية راجعة

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

 

هذه المقالة مستندة إلى سلسلة دروس مايكروسوفت الرسمية للـ ASP.NET MVC، وذلك لترتيب الدروس المناسب واعتقادي بسلاستها وأهمية نقلها إلى العربية بأسلوب مناسب وتجربة تتوافق مع الأدوات المتاحة لنا والمتوفرة في منطقتنا.

مدير تقني وشريك مؤسس لـ فسيلة تِك، مبرمج متعدد المهارات، مهتم في إنجاز أمور استثنائية في مجال التكنولوجيا وأعمل جاهداً لترك أثر إيجابي في الحياة