مقدمة الى Views في ASP.NET Core

-

في هذا الدرس بنحكي عن Views في  ASP.NET Core والي هي واجهة المستخدم للتطبيق UI. وبنحكي عن اناعها المختلفة وكيف ممكن نستقبل البيانات منها ونرسل البيانات الها، بالاضافة الى تفاصيل كثيرة.

Shared Views

عند انشاء MVC Project  يقوم ال  Visual Studio بإنشاء Shared folder داخل Views folder. داخل هذا Shared folder ، يمكنك وضع العناصر التي يمكن مشاركتها في التطبيق، من المهم معرفة :

  • يمكن إضافة view هنا باسم Layout.cshtml_ تكون كما هي Master Page في Asp.net. 
  • ال view الموجودة في Shared folder يمكن مشاركتها مع أجزاء أخرى من التطبيق.
  • تحتوي ملفات Layout على أجزاء مشتركة من واجهة المستخدم UI.
تمام وحتى نفهم الموضوع وكالعاده نطبق مثال :
الفكره هون استخدام Shared View وتطبيقها على اكثر من action دون اضافة Views لهاذ ال action


 انشاء Shared View 

يتم الاحتفاظ بـ " Shared Views " داخل مجلد " Views ➤ Shared  ". يمكن مشاركتها بين controllers المختلفة في التطبيق.
طيب تمام نبدا الان باضافة action  في  Home Controller باسم CallSharedView( الكود الموضح تحت):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using StudentsAcademy.Models;
 
namespace StudentsAcademy.Controllers
{
    public class HomeController : Controller
    {
        // removed for clarity
       public IActionResult CallSharedView()
        {
            return View();
        }
    }
}
وكمان نعمل action في StudentsController باسم CallSharedView(الكود):
  public IActionResult CallSharedView()
        {
            return View();
        }
تمام لحد الان عملنا 2 action methods. والاثنين بستدعو view باسم CallSharedView.  
لحد هذه اللحظة اذا حاولنا نشغيل التطبيق بتكون النتيجة خطأ،والسبب عدم وجود View في المشروع.
شغل التطبيق بالدخول الى الرابط :
or 
بتكون النتيجة:



شوف الخطأ : بحاول التطبيق البحث عن View باسم CallSharedView لكن بتكون النتيجة خطأ لان لحد الان ما اضفنا هذا View  الى التطبيق. 
شوف كمان الاماكن الي بحاول يبحث فيها من الخطأ وهي :
/Views/Students/CallSharedView.cshtml
/Views/Shared/CallSharedView.cshtml
الاول : يتم انشاء Folder باسم Controller بحيث يوجد فيه كل ال Views الخاصة بهاذ Controller .
الثاني : مجلد Shared

طيب تمام. وحتي نعالج هذه المشكلة يجب انشاء View بهاذ الاسم CallSharedView  ومثل ما حكينا الهدف هو فهم Shared Folder. طيب ننتقل ال المجلد Shared ونضيف View باسم CallSharedView
بهذه الطريقة سيتم مشاركة هذا View من خلال كلا Action.
لذا قم بإنشاء CallSharedView داخل مجلد Views ➤ Shared الذي يحتوي على الكود الموضح أدناه:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CallSharedView</title>
</head>
<body>
    <h1>Displaying from Shared View</h1>
</body>
</html>

استخدمنا الامر : 
@{
    Layout = null;
}
هذا الامر بيعني ان التطبيق بكون بدون استخدام ملف Layout. يعني صفحة مستقلة بالتصميم يمكن اضافة التصميم الخاص بها
سنتطرق لاحقا الى كيفية استخدام Layout  لغرض تطبيق التصميم في Shared View على View أخرى

تمام التمام، احنا الان جاهزين نشغل التطبيق ونشوف النتيجة.

خلونا نشغل التطبيق بالدخول الى الروابط :
https://localhost:44382 /Home/CallSharedView
https://localhost:44382 /Students/CallSharedView
,وبتكون النتيجة 

كيف يبحث MVC في View file

الجواب لهذا هو: MVC يبحث في الموقعين التاليين:

/Views/<ControllerName>/<ViewName>.cshtml
/Views/Shared/<ViewName>.cshtml

المكان الأول :

في MVC Project يتم انشاء Views التابعة ل controller محدد داخل مجلد بنفس اسم Controller ، في المثال السابق يتم انشاء مجلد Students داخل مجلد Views ويتم انشاء جميع Views التابعه لهذا Controller في هذا المجلد.


المكان الثاني :
يتم انشاء مجلد باسم Shared حيث يكون هذ المجلد مشترك في كل Views في التطبيق

تمام نشوف المثال التالي، عندنا action باسم StudentInfo  بيعمل استدعاء ل View بنفس الاسم (الكود)

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using StudentsAcademy.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace StudentsAcademy.Controllers
{
    public class StudentsController : Controller
    {
        public IActionResult Index()
        {
           
            return View();
        }
        public IActionResult StudentInfo()
        {
            var userContent = HttpContext.Session.Get<LoginModel>("UserDetails");
            ViewBag.UserName = userContent.UserName;
            StudentsModel _Student = new StudentsModel();
            _Student.CustomerNo = "2100001";
            _Student.FullName = "Hatem Altalafha";
            _Student.Birthday = Convert.ToDateTime("01/01/1980");
            _Student.Gender = 1;
            _Student.Nationality = 1;
            _Student.Address = "Jordan";
            _Student.UserName = "Hatem";
            _Student.Password = "abc123";
            _Student.Email = "[email protected]";
            _Student.Mobile = "000000000";
            _Student.Note = "";
            _Student.CurrentDate = DateTime.Now;
            //ViewBag.UserName = "Admin";
            return View(_Student);
        }
    }
}

الكود أعلاه يتم استدعاء View بالأمر
 return View(_Student) 
في هذه الحالة ولأنه لم يتم تحديد اسم View فبناء عليه يقوم MVC بالبحث عن view بنفس اسم controller. لذلك فإنه يبحث عن View files ويبحث في موقعين:
•/Views/Students/StudentInfo.cshtml: إذا عثر على ملف view هنا فإنه يعرض View File. إذا لم يكن الأمر كذلك، فسيتم البحث عن الموقع التالي في النقطة التالية.
• /Views/Shared/StudentInfo.cshtml: إذا عثر على الملف هنا، فسيتم عرض View File. إذا لم يكن الأمر كذلك، فسيتم عرض خطأ  “View not found” في المتصفح.