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

Adding Controller to ASP.NET MVC Tutorial

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

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

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

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

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

Add new Controller

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

Choose ASP.NET MVC Empty Controller

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

Add new Controller

 

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

New Folder added by the new Controller

 

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

 
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/ , بإمكانك تجربة قيم أخرى للمتغيرات كما تشاء.

ASP.NET MVC - Add new Controller DEMO

في المثال السابق، لم نستخدم الـ 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/

ASP.NET MVC - Add new Controller DEMO, ASP.NET MVC URL Routing

 

في هذه المرة طابق أحد المتغيرات المتغير المعرف في منطق التوجيه الافتراضي، وهو المتغير 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 - Add new Controller DEMO, ASP.NET MVC URL Routing

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

 

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

 

تغذية راجعة

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

 

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

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