إضافة متحكمات Controllers لموقع ASP.NET MVC

MVC هي اختصار لـ Model-View-Controller. وهي نمط بناء لتطبيقات الويب بطريقة هندسية جيدة، قابلة للاختبار وسهلة التعديل. إنّ التطبيقات التي تعمل على نمط MVC تعتمد على:

1. Models: وهو كلاسات Classes  تمثل البيانات التي سيستخدمها الموقع.
2. Views: قوالب يستخدمها موقعك لتوليد واجهات HTML
3. Controllers: كلاسات Classes للتعامل مع الطلبات Requests القادمة من المستعرضات Browsers، جلب البيانات من الـ Model، وتحديد القوالب التي ستشكل الاستجابة التي سيقوم بها موقعك.

خلال التدوينات القادمة سنتمكن من فهم المبادئ الثلاثة السابقة وتطبيقها في مشاريع برمجية خاصة بكم.

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

• المقالة الأولى:  أول موقع ويب لك باستخدام ASP.NET MVC
• المقالة الثانية: إضافة متحكمات Controllers لموقع ASP.NET MVC
• المقالة الثالثة: إضافة واجهة View لموقع ASP.NET MVC
• المقالة الرابعة: إضافة Model لموقع ASP.NET MVC
• المقالة الخامسة: إضافة Connection String والعمل مع قواعد البيانات LocalDB
• المقالة السادسة: الوصول إلى البيانات عن طريق المتحكم Controller
• المقالة السابعة: شرح وتجريب تابع التعديل Edit Method
• المقالة الثامنة: إضافة ميزة البحث إلى موقع ASP.NET MVC
• المقالة التاسعة: إضافة حقل جديد لقاعدة البيانات انطلاقاً من كود سي شارب Code First Method
• المقالة العاشرة: إضافة التحقق Validation إلى MVC Model وتطبيق مبدأ DRY
• المقالة الحادية عشر: اختبار وشرح توابع Details و Delete

سنبدأ الآن بإنشاء متحكم Controller لمشروعنا السابق ArabicArchive، في نافذة Solution Explorer  اضغط بالزر اليمين على مجلد Controllers ومن ثم انقر على Add وبعدها Controller.

في النافذة الجديدة Add Scaffold، اختر MVC 5 Controller – Empty وانقر على Add.

قم بتسمية المتحكم WelcomeController وانقر على Add. ويستوجب التنبيه هنا إلى أن كتابة كلمة Controller مقترنة بالاسم الذي نرغبه للمتحكم هي أمر ضروري ويجب مراعاة حالة الأحرف أيضاً.

 

نلاحظ في نافذة Solution Explorer إنشاء ملف جديد بإسمWelcomeController.cs بالإضافة إلى إنشاء مجلد جديد داخل مجلد Views بإسم Welcome.

 

نستبدل محتوى ملف المتحكم الجديد بالكود التالي:

 
namespace ArabicArchive.Controllers 
{ 
 public class WelcomeController : Controller 
 { 
 // 
 // GET: /Welcome/ 

 public string Index() 
 { 
 return "This is my <b>default</b> action..."; 
 } 

 // 
 // GET: /Welcome/Greeting/ 

 public string Greeting() 
 { 
 return "This is the Greeting action method..."; 
 } 
 } 
}

الـ methods في المتحكم السابق ستعيد نص html . المتحكم الذي قمنا بإنشائه اسمه WelcomeController وأول method فيه مسماة Index.

لنقوم بتجريب ماقمنا بفعله إلى الآن، قم بالضغط على F5 لتشغيل المشروع، في المستعرض Web Browser قم بإضافة Welcome إلى رابط موقعك,مثال: http://localhost:5642/Welcome . ستظهر لك صفحة كما في الصورة التالية. في الـ method الافتراضية Index كتبنا كود سيعيد نص html وهو بالضبط ماحدث.

 

ASP.NET MVC تمكنك من استخدام عدة متحكمات Controllers وعدة Action Methods بداخل كل متحكم، بحيث نستطيع الوصول إليها عن طريق الـ URL. تستخدم ASP.NET MVC منطق توجيه URL Routing Logic افتراضي هو:

/[Controller]/[ActionName]/[Parameters]

بإمكانك وضع صيغة التوجيه أو منطق التوجيه في ملف RouteConfig.cs داخل مجلد App_Start.

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

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

عندما تقوم بتشغيل مشروع ASP.NET MVC بدون تحديد أي منطق توجيه للـ URL فإنه بشكل افتراضي سيقوم بالتوجيه إلى المتحكم المسمى Home وإلى الـ Action Method التي تسمى Index بداخله, وهذا بالضبط مايعنيه الكود السابق.

إن أول جزء من العنوان URL يحدد المتحكم المطلوب استدعائه، وبذلك الرابط Welcome/ يقصد به أننا نريد استدعاء المتحكم WelcomeController, بينما الجزء الثاني من الرابط يحدد الـ Action Method التي نريد استدعائها بداخل المتحكم المطلوب، أي Welcome/Index/ سيجلب لنا مابداخل الـ Method المسماة Index بداخل WelcomeContorller. ونلاحظ أننا قبل قليل كتبنا Welcome/ وحصلناعلى نتيجة الـ Method المسماة Index بدون أن نكتبها في الرابط بعد اسم المتحكم، وذلك بسبب كونها Method Action افتراضي معرف مسبقاً بمنطق التوجيه.

يتكون الجزء الثالث من الرابط URL من Parameters سأقوم بإيضاح هذا الجزء بعد قليل.

 

قم بالذهاب داخل المستعرض إلى العنوان: Welcome/Greeting/ نلاحظ بذلك اننا استدعينا الـ Action Method المسماة Greeting وعادت نتيجتها بالفعل. كما شاهدنا فإن منطق التوجيه الافتراضي هو [Controller]/[ActionName]/[Parameter]/ وفي حالتنا هنا فإن المتحكم هو Welcome، والـ Action هو Greeting بينما الـ Parameter فهي فارغة ولم نكتب بها شيئ.

لنقم بتعديل مثالنا قليلاً بحيث نمرر بعض المتغيرات parameters في الرابط URL ، بحيث يكون

Welcome/Greeting?name=Waleed&numtimes=24/

. ولكي نحصل على نتيجة علينا تعديل الـ Action Method المسماة Greeting داخل المتحكم Welcome بحيث نضيف متغيران Parameters كما في الكود التالي:

using System.Web;
using System.Web.Mvc;
public string Greeting(string name, int numTimes = 1) {
return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes);
}

ووجب التنويه هنا إلى أننا استخدمنا ميزة “المتغير الاختياري” في لغة سي شارب عند تعريف المتغير numTimes، وماكتبناه يعني أنه في حالة لم يتم تمرير اي قيمة للمتغير numTimes فإنه سيأخذ القيمة 1 بشكل افتراضي.

إن استخدام الكود HttpUtility.HtmlEncode يحمي الموقع من الإدخالات الخبيثة للمتغيرات، والتي تستخدم عادة لاختراق المواق.

 

قم بتشغيل المشروع واذهب إلى: Welcome/Greeting?name=Waleed&numtimes=5/ , بإمكانك تجربة قيم أخرى للمتغيرات كما تشاء.

في المثال السابق، لم نستخدم الـ parameter الافتراضي المعرف ضمن منطق التوجيه، بل استخدمنا مايدعى query strings حيث أن الرمز ؟ هو فاصل يليه الـ query strings والرمز & هو فاصل بين الـ query strings.

قم بتعديل الـ Action Method المسماة Greeting كالتالي:

public string Greeting(string name, int ID = 1)
{
    return HttpUtility.HtmlEncode("Hello " + name + ", ID: " + ID);
}

والآن شغل المشروع واذهب إلى العنوان: Welcome/Greeting/3?name=Waleed/

 

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

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

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

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

[Controller]/[ActionName]/[name]/[id]/

لتعديل ذلك قم بفتح الملف RouteConfig الموجود بداخل المجلد App_Start وأضف إليه التالي:

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

      routes.MapRoute(
          name: "Default",
          url: "{controller}/{action}/{id}",
          defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
      );

      routes.MapRoute(
           name: "Welcome",
           url: "{controller}/{action}/{name}/{id}"
       );
   }
}

شغل البرنامج واذهب إلى العنوان:

Welcome/Greeting/waleed/53/

في العديد من تطبيقات ASP.NET MVC لن تكون بحاجة لتعديل منطق التوجيه، حيث يوجد هناك طرق أخرى تمرير البيانات للـ Action Methods سنقوم باستعراضها لاحقاً في تدوينات مستقبلية.

 

في هذه التدوينة قمنا باستعراض المبدأ C والمبدء V من الـ MVC ، كمثال كنا نعيد html بشكل مباشر، لكن في التدوينة القادمة سنتعرف على المبدأ الثالث الذي سيساعدنا على عرض النتائج وإعادتها بشكل احترفي أكثر.

 

تغذية راجعة

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

 

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