انتقال داده از Controller به View توسط ViewModel – جلسه ۲۱

DataModel - Session 21

در این جلسه از آموزش ASP.NET Core انتقال داده از Controller به View توسط ViewModel را با جزئیات بررسی خواهیم کرد. در جلسه بیستم به شما همراهان گرامی نشان دادیم که چگونه یک نمای Strongly Typed View ایجاد نمایید و داده را توسط Model به View ارسال نمایید. اما در آن جلسه مجبور بودیم بخشی از داده‌های مورد نیاز را توسط ViewBag و یا ViewData به View ارسال نماییم. در این جلسه به شما آموزش خواهیم داد که چگونه یک Model برای View مورد نظر خود ایجاد کرده و همه داده‌ها را با ViewModel ارسل نمایید.

DataModel چیست؟

DataModel یک کلاس میباشد که موجودیت‌های (Properties) آن بر اساس نیاز یک مدل خاص ایجاد شده باشند. بوسیله DataModel ما میتوانیم تمامی داده‌های مورد نیاز View را از Controller بوسیله Model ارسال نماییم. این کار ما را از ارسال داده توسط ViewBag و ViewData بی نیاز میکند.

ایجاد DataModel و ارسال داده به View توسط DataModel

ابتدا بهتر است در مسیر اصلی پروژه یک پوشه به نام DataModels ایجاد نمایید. سپس درون آن یک کلاس با نام معنادار ایجاد کرده و موجودیت‌های (Properties) مورد نیاز View مورد نظر را به آن اضافه نمایید.

namespace DailyCostWebApplication.ViewModels
{
    public class CostDetailViewModel
    {
        public Cost CostData { get; set; }
        public string PageTitle { get; set; }
    }
}

در ادامه، داده‌های مورد نیاز View را در ActionMethod مربوطه، درون Object ایجاد شده از ViewModel مرحله قبل ذخیره کرده و توسط متد View به نما ارسال نمایید.

public IActionResult Detail()
{
  CostDetailViewModel model = new CostDetailViewModel
  {
     CostData = costRepository.GetCostByID(1),
     PageTitle = "Cost Detail"
  };
  return View(model);
}

در انتها در View مربوطه Model Directive را از نوع DataModel ایجاد شده قرارداده و اطلاعات ارسالی را از مدل بازیابی میکنیم.

@model DailyCostWebApplication.ViewModels.CostDetailViewModel
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@Model.PageTitle</title>
</head>
<body>
    <h1>@Model.PageTitle</h1>
    <div>
        <div>
            ID: @Model.CostData.ID
        </div>
        <div>
            Amount: @Model.CostData.Amount
        </div>
        <div>
            Category: @Model.CostData.Category
        </div>
        <div>
            Comment: @Model.CostData.Comment
        </div>
    </div>
</body>
</html>

در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید و لیست کامل جلسات در این قسمت در دسترس شما میباشد.

تماشای ویدیو در یوتیوب ما

دانلود اسلایدهای آموزشی این جلسه از اینجا

برچسب ها

5 1 رای
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
0
افکار شما را دوست داریم، لطفا نظر دهید.x