Code First در MVC – آموزش View Model

ما  یک مدل برای Database و فیلد های آن در جلسه قبل ایجاد کردیم. در این جلسه قصد داریم تا یک مدل معادل هم برای سمت کاربر ایجاد کنیم. مثلا مدلی که با نام User در جلسه قبل ایجاد کردیم دارای تعدادی پراپرتی است مثل UserID, Name, Family و …  اما شاید در یک صفحه‌ایی فقط نیاز داشته باشیم با نام و نام خانوادگی و رمز عبور کار کنیم و اصلا نیازی به فیلد‌های دیگر نداشته باشیم و همچنین بخواهیم روی این فیلدها dataAnnotation های دیگری هم داشته باشیم.

حالا می‌توانیم برای آن صفحه خاص و برای آن بخش از پروژه یک مدل خاص طراحی کنیم که از روی آن صفحات مورد نظر خود را بسازیم، در واقع View Model ها، مدل هایی هستند که از روی آن‌ها طراحی ظاهری را انجام می‌دهیم و کاربر با آن‌ها در تعامل است اما می‌دانیم که مدل‌های اصلی که به آن‌ها data model می گوییم با دیتابیس در ارتباط هستند.

همچنین گاهی اوقات در یک پروژه‌ی MVC نیاز داریم که چندین Model را به یک View ارسال کنیم ، خب در این مواقع چه باید بکنیم ؟ خب راه چاره استفاده از ViewModel هست ، در معماری ام وی سی (MVC) ، ViewModel ، بسیار شبیه به Model است با این تفاوت که از ویو مدل (ViewModel) برای ارسال چندین Model به یک View استفاده می‌شود.

اگر شما بخواهید چندین Model را به یک View پاس دهید، استفاده از ViewModel ایده بسیار خوبی است.

چگونه یک View Model بسازیم ؟

• گام اول : یک پوشه به نام ViewModels در پوشه مدل های خود ایجاد میکنیم تا تمامی ویو مدل ها را در آن قرار دهیم.
• گام دوم : روی پوشه ViewModels خود کلیک راست کرده و یک کلاس اضافه میکنیم، بهتر است نامی که برای آن قرار میدهیم با ViewModel تمام شود مثلا RegisterViewModel که یک ویو مدل برای ایجاد صفحه رجیستر ما میباشد.
• گام سوم :  به مدل اصلی خود میرویم جایی که قرار است برای آن ویو مدل ساخته شود، حال فیلد هایی که از مدل اصلی در ویو مدل خود نیاز داریم را به ویو مدل خود اضافه میکنیم.

چگونه از یک View Model استفاده کنیم ؟

در استفاده از View Model ها با ۳ حالت روبرو میشویم که به شرح ذیل است:

• ارسال اطلاعات از اکشن به ویو
• ارسال اطلاعات از ویو به اکشن
• ارسال اطلاعات از اکشن به ویو  و از ویو به اکشن

ارسال اطلاعات از اکشن به ویو

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

• گام اول : ابتدا ویو مدل خود را ایجاد میکنیم، فرض کنید که فقط قرار است ۴ فیلد را به کاربر نمایش دهیم.
• گام دوم : آن فیلد هایی که قرار است به کاربر نمایش دهیم توسط دستور زیر دریافت میکنیم. توجه داشته باشید که از جنس User میباشد و مدل اصلی است نه ویو مدل و یک لیست است.

var users = db.Users.Select(t => new { t.UserID, t.ImageUrl, t.Name, t.Family }).ToList();

• گام سوم : توسط دستور زیر یک لیست ایجاد میکنیم از جنس ویو مدل خود.

List<UserListViewModel> list = new List<UserListViewModel>();

گام جهارم : حال باید لیست خود که از جنس مدل اصلی بود را در لیستی که از جنس ویو مدل است بریزیم.

foreach (var user in users)
{
    list.Add(new UserListViewModel
    {
        UserID = user.UserID,
        Family = user.Family,
        ImageUrl = user.ImageUrl,
        Name = user.Name
    });
}

• گام پنجم : حال که لیست ما که از جنس ویو مدل است با اطلاعات مدل اصلی پر شده آن را به سمت ویو ارسال میکنیم.

return View(list);

مشاهده کد ها به صورت یک جا

public ActionResult Index()
{
    var users = db.Users.Select(t => new { t.UserID, t.ImageUrl, t.Name, t.Family }).ToList();
    List<UserListViewModel> list = new List<UserListViewModel>();
    foreach (var user in users)
    {
        list.Add(new UserListViewModel
        {
            UserID = user.UserID,
            Family = user.Family,
            ImageUrl = user.ImageUrl,
            Name = user.Name
        });
    }
    return View(list);
}

توجه داشته باشید که در این روش باید اطلاعات از مدل اصلی به ویو مدل نگاشت شود.

ارسال اطلاعات از ویو به اکشن

با استفاده از ویو مدل ها میتوانیم اطلاعات را از سمت ویو به اکشن ببریم، مثلا فرمی برای ایجاد یک کاربر ایجاد کنیم و یا صفحه رجیستر بسازیم و اطلاعات کاربر را به سمت اکشن ببریم و از آنجا در دیتابیس ذخیره کنیم.

• گام اول : یک ویو مدل میسازیم مثلا برای ایجاد یک کاربر جدید.
• گام دوم : برای ویو مدل خود یک اکشن ایجاد میکنیم و برای اکشن خود یک ویو از نوع Create میسازیم چون قرار است به صورت فرم باشد. توجه داشته باشید که نباید Context داشته باشد و به ویو مدل  مد نظر شما متصل باشد.

public ActionResult Create()
{
    return View();
}

ارسال اطلاعات از ویو به اکشن

• گام سوم : اکشن گام دوم را از جنس HttpPost ایحاد میکنیم و فیلد هایی که از سمت ویو ارسال شده را دریافت میکنیم. توجه داشته باشید که فیلد هایی که ارسال میشوند از جنس ویو مدل شما میباشد. و در اصل میتوان گفت همان اطلاعات ویو مدل است.

public ActionResult Create([Bind(Include = "UserID,Name,Family,Password,RePassword,Email,MobileNumber,Gender")] UserRegisterViewModel UserRegisterViewModel)
{
    return View(UserRegisterViewModel);
}

• گام چهارم : حال باید اطلاعات ویو مدل خود را در مدل اصلی بریزیم یا به زبان ساده اطلاعات ویو مدل را نگاشت کنیم به مدل اصلی.

User MyUser = new User() {
    Name = UserRegisterViewModel.Name,
    Family = UserRegisterViewModel.Family,
    Password = UserRegisterViewModel.Password,
    Email = UserRegisterViewModel.Email,
    MobileNumber = UserRegisterViewModel.MobileNumber,
    Gender = UserRegisterViewModel.Gender,
    RegisterDate = DateTime.Now,
    IsActive = true
};

• گام پنجم : ذخیره اطلاعات در دیتابیس

db.Users.Add(MyUser);
db.SaveChanges();

مشاهده کد ها به صورت یک جا

public ActionResult Create()
{
    return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "UserID,Name,Family,Password,RePassword,Email,MobileNumber,Gender")] UserRegisterViewModel UserRegisterViewModel)
{
    if(ModelState.IsValid)
    {
        User MyUser = new User() {
            Name = UserRegisterViewModel.Name,
            Family = UserRegisterViewModel.Family,
            Password = UserRegisterViewModel.Password,
            Email = UserRegisterViewModel.Email,
            MobileNumber = UserRegisterViewModel.MobileNumber,
            Gender = UserRegisterViewModel.Gender,
            RegisterDate = DateTime.Now,
            IsActive = true
        };
        db.Users.Add(MyUser);
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(UserRegisterViewModel);
}

توجه داشته باشید که در این روش باید اطلاعات از ویو به مدل اصلی نگاشت شود.

ارسال اطلاعات از اکشن به ویو  و از ویو به اکشن

این حالت ترکیب ۲ حالت فوق است مثلا زمانی که قرار است یک کاربر را ویرایش کنیم اطلاعات را از سمت اکشن به ویو میبریم و پس از تغییرات و ویرایش مجدد آن را به سمت اکشن برمیگردانیم.