در بیستمین جلسه از آموزش ASP.NET Core به بررسی و آموزش Strongly Typed View خواهیم پرداخت. به طور کلی این نوع نما (View) به یک Model خاص متصل میباشد و داده‌های واکشی شده از آن Model توسط Controller را نمایش دهد. همچنین در جلسه گذشته به بررسی Dynamic View پرداختیم و انتقال اطلاعات از Controller به View را توسط ViewBag و ViewData بررسی نمودیم، پس توصیه میکنیم در صورتی که جلسه گذشته را مشاهده ننمودید، ابتدا جلسه 19 را مطالعه بفرمایید.
Strongly Typed View چیست؟
Strongly Typed View به نمایی گفته میشود که به یک Model خاص متصل باشد و داده‌های واکشی شده آن Model توسط Controller را نمایش دهد. این نوع نما (View) توسط یه Model Directive به Model مربوطه متصل میگردد. ویژوال استودیو قابلیت‌های IntelliSense و Compile Time Error را برای این نوع نما ارائه میدهد.
ایجاد Strongly Typed View
برای ایجاد یک نمای Strongly Typed ابتدا باید در Controller خود، داده مورد نظر را در یک Object از نوع Model مربوطه ذخیره نماییم. سپس با استفاده از Overload مناسب متد View، داده‌های ذخیره شده در Object را به View منتقل نماییم. مبحث مربوط به Overload متد View در جلسه 18 با جزئیات کامل ارائه گردده است.
|
1 2 3 4 5 6 7 8 9 |
public IActionResult Detail() { Cost model = costRepository.GetCostByID(1); return View(model); } |
سپس توسط Model Directive نمای (View) خود را به مدل مربوطه متصل نمایید. توجه داشته باشید در این قسمت کلمه model میبایست با حرف کوچک آغاز گردد.
|
1 2 3 4 5 |
@model DailyCostWebApplication.Models.Cost |
در انتها میتوانیم داده‌های ارسال شده را توسط Model نمایش دهیم. در این قسمت کلمه Model باید با حرف بزرگ آغاز گردد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div> ID: @Model.ID </div> <div> Amount: @Model.Amount </div> <div> Category: @Model.Category </div> <div> Comment: @Model.Comment </div> |
نمای کلی View از نوع Strongly Typed View
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@model DailyCostWebApplication.Models.Cost <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>@ViewBag.PageTitle</title> </head> <body> <h1>@ViewBag.PageTitle</h1> <div> <div> ID: @Model.ID </div> <div> Amount: @Model.Amount </div> <div> Category: @Model.Category </div> <div> Comment: @Model.Comment </div> </div> </body> </html> |
در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید و لیست کامل جلسات در این قسمت در دسترس شما میباشد.
دانلود اسلایدهای آموزشی این جلسه از اینجا