مقدمة الى ملف ViewImports في تطبيق ASP.NET Core MVC
-
مقدمة الى ملف ViewImports في تطبيق ASP.NET Core MVC
في هذا الدرس ان شاء الله بناقش ViewImports في تطبيقات ASP.NET Core MVC. حيث يعتبر هذا الملف Razor ViewImports إحدى الميزات الجديدة في Net Core. في هذاالدرس بنعرف على ميزات هذا الملف ولماذا يستخدم وكيفية انشاءه والتسلسل الهرمي.
تمام التمام جاهزين نبدا الدرس:
ما هو _ViewImports.cshtml في تطبيق ASP.NET Core MVC؟
هو عبارة عن ملف شبيه لملف ViewStart بيعمل على توفير الوقت والجهد في تطبيقات ASP.NET Core MVC ، بحيث يوفر هذا الملف آلية لتضمين بعض directives globally في صفحات View Razor واكيد هذا الامر بوفر علينا وقت وجهد بحيث ما نضطر إلى إضافتها بشكل فردي في كل صفحة. ال directives التي يدعمها ملفViewImports.cshtml _ هي:
@addTagHelper
@tagHelperPrefix
@removeTagHelper
@namespace
@inject
@model
@using
طيب هذه directives لماذا تستخدم شو بنستفيد منها: خلونا نوخذ فكره سريعه عنها.
directives التالية addTagHelper @tagHelperPrefix@ و removeTagHelper@ تستخدم لإدارة Tag Helpers.
namespace@ لتحديد namespace التي تنتمي إليها ViewImports.
تستخدم inject@ للمساعدة في دعم Dependency injection.
يستخدم model@ في التعامل مع models لتحديد ما هي Model التي سيتم التعامل معاها في view.
يُستخدم using@ لتضمين namespaces globally حتى لا تضطر إلى تضمين namespaces في كل صفحة view.
ملاحظة:اذا ما فهمت ايش المقصود من هذا الكلام ما تستعجل لان بنشرحها كلها ان شاء الله في الدروس القادمه مع امثلة، تمام الان في هذا الدرس بناقش استخدام التوجيه using@ في ملف ViewImports.cshtml_.
طيب خلونا نفهم شو هو ملف ViewImports بمثال:
في المشروع الي عملناه قمنا بانشاء class باسم StudentsModel.cs داخل مجلد Models ، وضافنا الكود التالي:
sing System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace StudentsAcademy.Models
{
public class StudentsModel
{
public string CustomerNo { get; set; }
public string FullName { get; set; }
public DateTime Birthday { get; set; }
public int Gender { get; set; }
public int Nationality { get; set; }
public string Address { get; set; }
public string UserName { get; set; }
public string Password { get; set; }
public string Email { get; set; }
public string Mobile { get; set; }
public string Note { get; set; }
}
}
تمام في هذا class تم اضافة على 11 properties (الرقم، الاسم، تاريخ الميلاد، الجنس، ... الخ) سنستخدم هنا، المطلوب في هذه المرحلة استخدام جزء منها لغاية توضيح مفهوم ViewImports.
الان خلونا نتقل الى HomeController وبنعدل الكود الى في Action المسمى AllStudent الى الكود التالي:
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using StudentsAcademy.Models;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using StudentsAcademy.Services;
using StudentsAcademy.Share;
namespace StudentsAcademy.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
private TotalStudents _TotalStudents;
ApplicationDbContext db;
public HomeController(TotalStudents TS)
{
_TotalStudents = TS;
}
public ViewResult AllStudent ()
{
List<StudentsModel> listStudents = new List<StudentsModel>()
{
new StudentsModel() { CustomerNo = "0001", FullName = "Hatem", Birthday = Convert.ToDateTime("10/10/1980"), Address = "A", Email = "[email protected]" },
new StudentsModel() { CustomerNo = "0002", FullName = "Ahmad", Birthday = Convert.ToDateTime("12/08/1978"), Address = "B", Email = "[email protected]" },
new StudentsModel() { CustomerNo = "0003", FullName = "Ali", Birthday = Convert.ToDateTime("01/12/1985"), Address = "A", Email = "[email protected]" },
new StudentsModel() { CustomerNo = "0004", FullName = "Layan", Birthday = Convert.ToDateTime("22/08/2011"), Address = "A", Email = "[email protected]" },
new StudentsModel() { CustomerNo = "0005", FullName = "Lareen", Birthday = Convert.ToDateTime("14/08/2014"), Address = "B", Email = "[email protected]" }
};
return View(listStudents);
}
public ViewResult Details(int Id)
{
var studentDetails = new StudentsModel() { CustomerNo = "0001", FullName = "Hatem", Birthday = Convert.ToDateTime("10/10/1980"), Address = "A", Email = "[email protected]" };
return View(studentDetails);
}
}
}
الكود الي فوق عملنا تم Action 2 وهما.
Action الأول المسمى AllStudent : في هذا action يتم عرض جميع بيانات الطلاب.
Action الثاني المسمى Details : في هذا Action بنعرض بيانات الطالب حسب ID.
في هذه المرحلة لان الهدفViewImports بتلاحظ ان Action المسمى Details يعيد بيانات الطالب رقم 0001 حيث لم نقوم ببرمجة الاجراء لإرجاع معلومات الطالب بناء على ID .
تمام الان دور نعمل View لعرض البيانات من actions
لاضافة View الى AllStudent and Details، انقر يمين فوق action ثم اختر Add New View (الصورة)
بعد الاضافة ولان الشغل تحت HomeController فا اكيد بتكون الاضافة داخل هذا المجلد (شوف الصورة).
تمام الان دور ننتقل الى View باسم AllStudent ونعمل اضافة للكود التالي :
@model List<StudentsAcademy.Models.StudentsModel>
@{
Layout = null;
}
<html>
<head>
<title>Index</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Student No</th>
<th>FullName</th>
<th>Birthday</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach (var student in Model)
{
<tr>
<td>
@student.CustomerNo
</td>
<td>
@student.FullName
</td>
<td>
@student.Birthday
</td>
<td>
@student.Address
</td>
<td>
@student.Email
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
تشغيل التطبيق:
شغل التطبيق بالدخول الى الرابط :
ننتقل الان الى View المسمى Details.cshtml ونضيف الكود التالي :
@model StudentsAcademy.Models.StudentsModel
@{
Layout = null;
}
<html>
<head>
<title>Student Details</title>
</head>
<body>
<div>
CustomerNo : @Model.CustomerNo
</div>
<div>
FullName : @Model.FullName
</div>
<div>
Birthday : @Model.Birthday
</div>
<div>
Address : @Model.Address
</div>
<div>
Email : @Model.Email
</div>
</body>
</html>
قم بتشغيل التطبيق بإدخال الرابط
https://localhost:44382/Home/Details
ستكون النتيجة:
لاحظ ان في View المسمى ِAllStudnet استخدمنا الامر :
@model List<StudentsAcademy.Models.StudentsModel>
و في View المسمى ِDetails استخدمنا الامر :
@model StudentsAcademy.Models.StudentsModel
الفرق بينهم: الاول بنستخدم List لاستقبال جميع الطلاب، الثاني استقبال طالب واحد، لكن كلاهما فيهم model@ الكود
StudentsAcademy.Models.StudentsModel
وبالتالي لنفرض ان عندنا في التطبيق عدد كبير من Views بتستخدم StudentsModel فا باستخدام هذه الطريقة الكود بيتكرر في جميع ال Views.وحتي نحل هاذي المشكلة بنستخدم ViewImports ,وهذا هو استخدام Using@
كيف انشاء ملف ViewImports.cshtml في تطبيقات ASP.NET Core MVC
بالزبط مثل ViewStart وبشكل عام يتم إنشاء ملفات ViewImports.cshtml_ داخل مجلد Views أو داخل أي مجلد فرعي subfolder للمجلد Views.
تمام ولإنشاء ملف "ViewImports.cshtml_" انقر بزر الماوس الأيمن على مجلد Views ثم حدد خيار " Add – New Item " من القائمة، والتي ستفتح نافذة " New Item ". من نافذة " New Item “، ابحث عن "Razor" ثم حدد "Razor View Import" وانقر فوق الزر "Add" كما هو موضح في الصورة أدناه والذي يجب أن ينشئ "ViewImport.cshtml_" داخل مجلد "Views”.
بمجرد إنشاء ملف ViewImports.cshtml_ ، قم بإضافة الكود التالي الى الملف.
using StudentsAcademy.Models
وهذا الكود بيعني ان تم تعريف ووضع namespace المسمى StudentsAcademy.Models في ملف ViewImports، والتالي يمكن استخدام جميع الملفات والاناع الموجودة داخل ( StudentsAcademy.Models ) ضمن هذا المجلد الذي تمت إضافة ViewImports اليه دون الحاجة الى إضافة namespace مرة أخرى داخلها، في هذه الحالة تم إضافة ملف ViewImports على مجلد View الرئيسي.
يمكنك إضافة أكثر من ملف ViewImports في أكثر من مكان
بناء على ذلك يمكن تعديل الكود في AllStudnet, Details وحذف ال namespace الذي تم اضافته في اول الصفحات والاكتفاء بإضافة model class فقط وبكون الكود :
Details.cshtml
@model StudentsModel
@{
Layout = null;
}
<html>
<head>
<title>Student Details</title>
</head>
<body>
<div>
CustomerNo : @Model.CustomerNo
</div>
<div>
FullName : @Model.FullName
</div>
<div>
Birthday : @Model.Birthday
</div>
<div>
Address : @Model.Address
</div>
<div>
Email : @Model.Email
</div>
</body>
</html>
AllStudents.cshtml
@model List<StudentsModel>
@{
Layout = null;
}
<html>
<head>
<title>Index</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Student No</th>
<th>FullName</th>
<th>Birthday</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach (var student in Model)
{
<tr>
<td>
@student.CustomerNo
</td>
<td>
@student.FullName
</td>
<td>
@student.Birthday
</td>
<td>
@student.Address
</td>
<td>
@student.Email
</td>
</tr>
}
</tbody>
</table>
</body> </html>
قم بتشغيل التطبيق ويجب أن يعمل كما هو دون أي تغيير.
التسلسل الهرمي ل ViewImports_ في ASP.NET Core MVC:
تمامًا مثل ملف ViewStart_، يكون ملف ViewStart_ أيضًا هرميًا. من الممكن أيضًا وضع ملف ViewStart_ في أي مجلد الفرعي لمجلد Views كما هو موضح في الصورة أدناه. هنا لدينا ملف ViewStart_ واحد في مجلد Views وملف _ViewImports آخر داخل المجلد Home.
الاولوية بتكون ل Sub Folder اذا ما كان في ملف ViewImport في Sub Folder بنتقل الى Folder Views الرئيسي ، اذا ما كان في Folder Views الرئيسي بطبق من ملف View
اترك تعليقك