آشنایی با ViewData ، ViewBag و TempData

ViewBag ، ViewData و TempData چیست؟ از ViewBag ، ViewData و TempData در ASP.NET Core به چه منظور استفاده می شود؟ چه تفاوت هایی این ویوها با هم دارند؟ در پروژه های ASP.NET Core بهتر است از ViewBag استفاده کنم یا ViewData ؟

درود ، امیدوارم که حالتون عالی باشه ، من آرزو ابراهیمی هستم طراح و برنامه نویس وب در حوزه ASP.NET ، با یک مقاله آموزشی بسیار جذاب و کاربردی از سری مقالات آموزش asp.net core 2 در خدمت شما دوستان عزیزان هستم پس با من همراه باشید.

ViewBag (ویوبگ) چیست ؟

ViewBag یک Property پویا یا Dynamin از کلاس Controller هست ، پس در هر کلاسی که از کلاس Controller ارث بری می کند می توان از این پراپرتی پویا استفاده کرد ، همین طور که خودتون هم می‌دانید همه کلاس های کنترلر از کلاس پایه Controller ارث بری می‌کنند پس در کلاس‌های کنترلر می توان از ViewBag جهت انتقال اطلاعات از کنترلر به ویو یا به صورت جزئی تر برای ارسال اطلاعات از Action Method های یک Controller به View استفاده نمود.

ViewData (ویودیتا) چیست ؟

ViewData یک نوع Dictionary است که از کلاس ViewDataDictionary ارث بری می‌کند ، ViewData از نظر کارایی بسیار شبیه به ViewBag است.

TempData (تمپ دیتا) چیست ؟

tempdata یک نوع Dictionary است که از ITempDataDictionary ارث بری می کند. و برای ذخیره اطلاعات از Session استفاده می کند پس عمر آن کوتاه هست و در ASP.NET Core برای ذخیره داده های موقت از آن استفاده می‌شود.

کاربرد ViewData ، ViewBag و TempData در ASP.NET Core

به صورت کلی از ViewData ، ViewBag و TempData در پروژه های ASP.NET Core به منظور انتقال اطلاعات بین Action Method و View ، بین Action Method های یک کنترلر و همین طور انتقال اطلاعات بین Action Method های Controller های مختلف استفاده می‌شود.
در ادامه این مقاله آموزشی روش های انتقال اطلاعات با این سه موجود دوست داشتنی را به شما آموزش خواهم داد.

روش های انتقال اطلاعات بین Controller (کنترلر) و View (ویو)

روش اول : انتقال اطلاعات از طریق ViewBag

برای انتقال اطلاعات از Action Method های کلاس کنترلر به View یا به صورت کلی تر برای انتقال اطلاعات از Controller به View می توانیم از ViewBag استفاده نماییم.

به تصویر بالا دقت کنید در تصویر فوق در کنترلر یک ViewBag به نام Site تعریف کرده و آن را مقداردهی کردیم و سپس در View مقدار این ViewBag را گرفتیم تا این مقدار را به کاربر در صفحه مرورگر نمایش بدهیم.

نحوه تعریف و مقداردهی ViewBag در Action Method

برای تعریف یک ViewBag از کلمه کلیدی ViewBag استفاده می‌کنیم سپس علامت دات (.) را قرار داده و بعد از علامت دات یک نام دلخواه برای ویوبگ انتخاب می‌کنیم در تصویر بالا من نام ViewBag را Site قرار داده ام.
پس فرمول تعریف ViewBag به صورت رو به رو است :[highlight color=”yellow”]ViewBag + . + ViewBagName[/highlight]

جهت مقداردهی یک Viewbag بعد از علامت = مقداری که می‌خواهیم درون آن بریزیم را قرار می‌دهیم ، در تصویر بالا من مقدار ViewBag را Mizfa.com قرارداده ام.
پس فرمول تعریف و مقداری ویوبگ در اکشن متد به صورت روبه رو است : [highlight color=”yellow”]ViewBag + . + ViewBagName = Value[/highlight]

نحوه گرفتن مقدار ViewBag در View

در جلسه آموزش افزودن View به پروژه ASP.NET Core بهتون گفتم که در View می‌توانیم از کدهای HTML و Css در کنار هم استفاده نماییم ، اگر شما بخواهید یک کد سی شارپ را درون View قرار دهید درصورتی که کد تک خطی باشد تنها از علامت @ قبل از کد استفاده کرده و درصورتی که کد چندخطی باشد بعد از علامت @ از {} استفاده کنید و کدهای خود را بین {} قرار دهید به صورت روبه رو : @{}

حالا می‌خواهیم در View مقدار ViewBag تعریف و مقداردهی شده درون اکشن متد را بگیریم چون می‌خواهیم از کد سی شارپ درون View استفاده کنیم و کد سی شارپ ما تک خطی هست حتما باید قبل از کد از علامت @ استفاده کنیم سپس بعد از علامت @ از کلمه کلیدی ViewBag و سپس از دات (.) استفاده می‌کنم و بعد از علامت دات یا نقطه ، نام ViewBag مقداردهی شده را قرار می‌دهیم (نام ویوبگ را Site قرار دادیم) پس با نوشتن کد @ViewBag.Site در View می‌توانیم مقدار ViewBag را درون View بگیریم و به کاربر نمایش دهیم.

خب حالا که با نحوه تعریف و مقداردهی ویوبگ آشنا شدید پروژه ی جلسه گذشته را باز کنید می خواهیم در این پروژه از ViewBag جهت انتقال اطلاعات استفاده کنیم.
فایل کلاس کنترلر Sample را باز کنید من میخواهم در اکشن متد Index یک ViewBag به نام Site تعریف و سپس آن را مقداردهی کنیم پس اکشن متد Index را مطابق کد زیر تغییر می دهیم.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace MyFirstProject.Controllers
{
    public class SampleController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.Site = "Mizfa.com";
            return View("Details");
        }
    }
}

در اکشن متد Index با اضافه کردن کد ViewBag.Site = "Mizfa.com"; یک ویوبگ تعریف و مقداردهی کردیم.
حالا میریم سراغ ویوی Datails ، می‌خواهیم درون این View مقدار ViewBag را بگیریم پس باید کدهای درون ویو Datails را به صورت زیر تغییر دهیم.

@{
    ViewData["Title"] = "Details";
}
<h1>@ViewBag.Site From Details View</h1>

همانطور که در کد بالا مشاهده می کنید از علامت @ استفاده کردم و سپس بعد از علامت @ کلمه کلیدی ViewBag و سپس علامت دات (نقطه) و در آخر نام ویوبگ که Site هست را نوشتم.
حالا کلیدهای میانبر Ctrl + F5 را فشار دهید تا پروژه اجرا شود و خروجی View را در صفحه مرورگر مشاهده نمایید. خروجی همانند تصویر زیر خواهد بود.

 

روش دوم : انتقال اطلاعات از طریق ViewData

در روش دوم برای انتقال اطلاعات بین Controller و View می‌توانیم از ViewData استفاده کنیم.

به تصویر بالا دقت کنید در تصویر فوق در کنترلر یک ViewData با ایندکس Site تعریف کرده و آن را مقداردهی کردیم و سپس در View مقدار این ViewData را گرفتیم تا این مقدار را به کاربر در صفحه مرورگر نمایش بدهیم.

نحوه تعریف و مقداردهی ViewData در Action Method

جهت تعریف یک ViewData در اکشن متد از کلمه کلیدی ViewData استفاده می‌کنیم سپس از [] استفاده کرده و درون [] یک index از نوع رشته (string) برای ViewData قرار می‌دهیم ، در مثال بالا من مقدار ایندکس ViewData را "Site" قرار دادم.
از طریق این index می‌توانیم مقدار این ViewData را در View نمایش دهیم.
پس فرمول تعریف ViewData به صورت رو به رو است : [highlight color=”yellow”]ViewData[index][/highlight]

جهت مقداردهی ViewData بعد از علامت = مقداری که می‌خواهیم درون آن بریزیم را قرار می‌دهیم ، در تصویر بالا من مقدار ViewData را Mizfa.com قرارداده ام. پس فرمول تعریف و مقداری ویودیتا در اکشن متد به صورت روبه رو است : [highlight color=”yellow”]ViewData[index]=value[/highlight]

نحوه گرفتن مقدار ViewData در View

حالا قصد داریم در View مقدار ViewData تعریف و مقداردهی شده درون اکشن متد را بگیریم چون می‌خواهیم از کد #C درون View استفاده کنیم و کد سی شارپ ما تک خطی هست حتما باید قبل از کد از علامت @ استفاده کنیم سپس بعد از علامت @ از کلمه کلیدی ViewData و سپس [] استفاده می‌کنم و داخل [] ایندکس ویودیتا که “Site” هست را قرار میدهیم ، پس با نوشتن کد @ViewData["Site"] در View می‌توانیم مقدار ViewData را درون View بگیریم و به کاربر نمایش دهیم.

خب حالا که با نحوه تعریف و مقداردهی ViewData آشنا شدید ، در پروژه ی جلسه گذشته ، فایل کلاس کنترلر Sample را باز کنید من میخواهم در اکشن متد Index یک ViewData با ایندکس Site تعریف و سپس آن را مقداردهی کنیم پس اکشن متد Index را مطابق کد زیر تغییر می دهیم.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace MyFirstProject.Controllers
{
    public class SampleController : Controller
    {
        public IActionResult Index()
        {
            ViewData["Site"]= "Mizfa.com";
            return View("Details");
        }
    }
}

در اکشن متد Index با اضافه کردن کد ViewData["Site"]= "Mizfa.com";  یک ViewData با ایندکس Site تعریف کردیم ، حالا میریم سراغ ویوی Datails ، می‌خواهیم درون این View مقدار ViewData را بگیریم پس باید کدهای درون ویو Datails را به صورت زیر تغییر دهیم.

@{
    ViewData["Title"] = "Details";
}
<h1>@ViewData["Site"] From Details View</h1>

دوستان ، همانطور که در کد بالا مشاهده می کنید از علامت @ استفاده کردم و سپس بعد از علامت @ کلمه کلیدی ViewData و سپس بین [] ایندکس ViewData که برابر “Site” هست ، را نوشتم.
حالا کلیدهای میانبر Ctrl + F5 را فشار دهید تا پروژه اجرا شود و خروجی View را در صفحه مرورگر مشاهده نمایید. خروجی همانند تصویر زیر خواهد بود.

روش سوم : انتقال اطلاعات از طریق TempData

برای انتقال اطلاعات از Action Method های کلاس کنترلر به View یا به صورت کلی تر برای انتقال اطلاعات از Controller به View می توانیم از TempData هم استفاده نماییم. ولی استفاده از TempData جهت انتقال اطلاعات از Controller به View پیشنهاد نمی‌شود تا زمانیکه ViewBag و ViewData هستند.

از TempData می‌توانیم برای انتقال اطلاعات از یک کنترلر به کنترلر دیگر استفاده کنیم اما ViewBag و ViewData توانایی انتقال اطلاعات از یک کنترلر به یک کنترلر دیگر را ندارند. در ادامه با TempData و چگونگی انتقال اطلاعات توسط آن آشنا خواهیم شد.

روش انتقال اطلاعات از یک Controller به Controller دیگر

برای انتقال اطلاعات از اکشن متد یک کنترلر به اکشن متد کنترلر دیگر از TempData استفاده می شود.

به تصویر بالا دقت کنید ، می خواهیم سناریوی تصویر بالا را ابتدا به شما توضیح دهم و سپس این سناریو را به صورت عملی در پروژه پیاده سازی کنیم .

در تصویر بالا یک کنترلر به نام Product داریم و یک کنترلر به نام Sample ، و میخواهیم انتقال اطلاعات را بین دو کنترلر با استفاده از TempData انجام دهیم. در کنترلر Product یک اکشن متد به نام Index تعریف کردیم و میخواهیم زمانی که این اکشن متد اجرا شد TempData مقداردهی شود و سپس عمل Redirect یا انتقال به اکشن متد Index کنترلر Sample صورت بگیرید بدین ترتیب از یک کنترلر به کنترلر دیگر انتقال پیدا کرده ایم ، حالا در ویو اکشن متد Index کنترلر Sample می توانیم به مقدار TempData دسترسی پیدا کنیم.

نحوه تعریف و مقداردهی TempData در Action Method

جهت تعریف یک TempData در اکشن متد از کلمه کلیدی TempData استفاده می‌کنیم سپس از [] استفاده کرده و درون [] یک key یا کلید از نوع رشته (string) برای TempData قرار می‌دهیم ، در مثال بالا من مقدار کلید TempData را "Site" قرار دادم.
از طریق key می‌توانیم مقدار این TempData را در View نمایش دهیم.
پس فرمول تعریف TempData به صورت رو به رو است : [highlight color=”yellow”]TempData[key][/highlight]

جهت مقداردهی TempDataبعد از علامت = مقداری که می‌خواهیم درون آن بریزیم را قرار می‌دهیم ، در تصویر بالا در اکشن متد کنترلر Product ، مقدار TempData را Mizfa.com قرارداده ام. پس فرمول تعریف و مقداری تمپ دیتا در اکشن متد به صورت روبه رو است : [highlight color=”yellow”]TempData[key]=value[/highlight]

نحوه گرفتن مقدار TempData در View

حالا قصد داریم در View مقدار TempDataتعریف و مقداردهی شده درون اکشن متد را بگیریم چون می‌خواهیم از کد #C درون View استفاده کنیم و کد سی شارپ ما تک خطی هست حتما باید قبل از کد از علامت @ استفاده کنیم سپس بعد از علامت @ از کلمه کلیدی TempDataو سپس [] استفاده می‌کنم و داخل [] مقدار کلید تمپ دیتا که “Site” هست را قرار میدهیم ، پس با نوشتن کد @TempData["Site"] در View می‌توانیم مقدار TempData را درون View بگیریم و به کاربر نمایش دهیم.

خب حالا میریم سراغ تصویر بالا ، و میخواهم سناریویی که در تصویر پیاده سازی شده را به صورت عملی در پروژه پیاده سازی کنم. به پروژه خود یک کنترلر به نام Product اضافه کنید و سپس اکشن متد Index را درون این کنترلر تعریف کنید مطابق کدهای زیر

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace MyFirstProject.Controllers
{
    public class ProductController : Controller
    {
        public IActionResult Index()
        {
            TempData["Site"] = "Mizfa.com";
            return RedirectToAction("Index", "Sample");
        }
    }
}

در اکشن متد Index در کد TempData["Site"] = "Mizfa.com"; یک TempData تعریف و سپس آن را مقداردهی کرده ایم سپس با استفاده از متد RedirectToAction میخواهیم که عمل Redirect یا انتقال به اکشن متد Index کنترلر Sample را انجام دهیم پس به منظور انتقال بین اکشن متدهای کنترلرهای مختلف می توانیم از متد RedirectToAction استفاده نماییم به عنوان پارامتر اول ، نام اکشن متدی که میخواهیم به آن منتقل شویم و به عنوان پارامتر دوم نام کنترلی که این اکشن متد در آن تعریف شده است را به این متد پاس میدهیم به صورت رو به رو RedirectToAction("Index", "Sample");
من می خواهم به اکشن متد Index در کنترلر Sample ، ریدایرکت شوم پس به عنوان پارامتر اول مقدار Index و به عنوان پارامتر دوم مقدار Sample را به این اکشن متد پاس داده ام. با متد RedirectToAction در جلسات آموزشی آینده بیشتر آشنا خواهیم شد.

حالا به سراغ کنترلر Sample می رویم این کنترلر را در جلسات آموزشی گذشته تعریف کردیم اگر شما در پروژه خود این کنترلر را ندارید آن را به پروژه اضافه کنید سپس اکشن متد Index را برای این کنترلر مطابق با کد زیر تعریف میکنیم :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace MyFirstProject.Controllers
{
    public class SampleController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

حالا به سراغ ویوی Index ، ایم اکشن متد میرویم اگر این اکشن متد ویو Index را نداشت یک View به نام Index برای آن اضافه کنید و حالا در ویو Index طبق کد زیر مقدار TempData را میگیریم.

@{
    ViewData["Title"] = "Index";
}
<h1>@TempData["Site"] From Index View</h1>

حالا با فشردن کلیدهای میانبر Ctrl + F5 پروژه خود را اجرا کنید بعد از اجرای پروژه در مرورگر آدرس https://localhost:44323/Product را وارد کنید تا اکشن متد Index کنترلر Product اجرا شود ، نتیجه ای که در مرورگر مشاهده میکنید همانند تصویر زیر خواهد بود.

مقایسه ی ViewBag و ViewData

شباهت های ViewBag و ViewData

[one_half] [box type=”info” align=”alignright” class=”” width=””]

ViewBag

۱) از ViewBag برای انتقال اطلاعات از Controller به View استفاده می شود.

۲) مقدار درون ViewBag فقط طی درخواست جاری اعتبار دارد.

[/box] [/one_half] [one_half_last] [box type=”info” align=”alignright” class=”” width=””]

ViewData

۱) از ViewData هم همانند ViewBag جهت انتقال اطلاعات از Controller به View استفاده می‌شود.

۲) مقدار درون ViewData هم فقط طی درخواست جاری اعتبار دارد.

[/box] [/one_half_last]

 

تفاوت های ViewBag و ViewData

[one_half] [box type=”info” align=”alignright” class=”” width=””]

ViewBag

۱) ViewBag یک پراپرتی Dynamic است که در #C نسخه  4.0 معرفی شد.

[/box] [/one_half] [one_half_last] [box type=”info” align=”alignright” class=”” width=””]

ViewData

۱) ViewData یک نوع دیکشنری است و از کلاس ViewDataDictionary ارث بری می‌کند.

[/box] [/one_half_last]

 

بسیار خب به پایان این جلسه آموزشی رسیدیم امیدوارم که مطالب این مقاله‌ی آموزشی از سری مقالات آموزش core برای شما عزیزان مفید واقع شود ، ضمنا دوستان ، خوش حال میشم که هر گونه سوال ، مشکل و یا پیشنهادی در رابطه با این مقاله آموزشی دارید با من در قسمت نظرات درمیون بزارید.