ارسال چند Model به View با استفاده از ViewModel

ویومدل چیست ؟ چگونه چند model را به View ارسال کنیم ؟ چگونه از ViewModel در پروژه های ASP.NET MVC استفاده نماییم ؟ کاربرد ViewModel در ASP.NET MVC چیست ؟ اگر به دنبال یافتن پاسخ این سوالات هستید به هیج عنوان این مقاله آموزشی را از دست ندهید.

ViewModel چیست ؟

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

نحوه ایجاد ViewModel

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

ایجاد جدوال در دیتابیس به روش EF CodeFirst

ابتدا یک پروژه از نوع MVC ایجاد نمایید سپس یک نام دلخواه برای آن انتخاب کنید من نام پروژه خودم را ViewModelProject قرار میدهم. سپس درون پوشه‌ی Model یک کلاس به نام دلخواه ایجاد نموده و فیلدهای جدول Student و Professor را درون آن تعریف کنید. من نام کلاس خودم را MyModel.cs قرار می‌دهم.
از کلاس MyModel.cs برای ساخت جدول Students و Professors در دیتابیس به روش EF CodeFirst استفاده می‌شود.

کلاس Student (اطلاعات دانشجویان) و Professor (اطلاعات اساتید)

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace ViewModelProject.Models
{
    public class Student
    {
        [Key]
        public int Id { get; set; }
        public string Name { get; set; }
        public string Family { get; set; }
        public string NationalNo { get; set; }
    }

    public class Professor
    {
        [Key]
        public int Id { get; set; }
        public string Name { get; set; }
        public string Family { get; set; }
        public string NationalNo { get; set; }
    }
}

تنظیم Web.Config

حال نوبت به تنظیم Web.Config می‌رسد کد زیر را بین تگ <configuration> </configuration> قرار دهید.

  <connectionStrings>
    <add name="DefaultConnection" connectionString="Data Source=(Local);Initial Catalog=ViewModelDB;Integrated Security=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

در کد بالا من نام connectionString را DefaultConnection قرار دادم و در قسمت Initial Catalog نام دیتابیس خودم را ViewModelDB انتخاب کردم شما می‌توانید نام connectionString و Initial Catalog را با نام دلخواه خودتان ویرایش کنید.

ایجاد کلاس Context

حال در پوشه Model یک کلاس به نام دلخواه با پسوند Context ایجاد نموده و کدهای زیر را درون آن بنویسید. من نام کلاس خودم را ViewModelProjectContext.cs قرار داده ام.

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace ViewModelProject.Models
{
    public class ViewModelProjectContext : DbContext
    {
        public ViewModelProjectContext() : base("name=DefaultConnection")
        {
        }

        public System.Data.Entity.DbSet<ViewModelProject.Models.Student> Student { get; set; }
        public System.Data.Entity.DbSet<ViewModelProject.Models.Professor> Professor { get; set; }
    }
}

فعال کردن Migration

حالا از منوی بالای ویژوال استدیو گزینه Tools سپس Nuget Package Manager و پس از آن Package Manager Console را انتخاب کنید حال در محیط Package Manager Console دستور زیر را وارد کنید وسپس دکمه Enter را فشار دهید.

Enable-Migrations -ContextTypeName ViewModelProject.Models.ViewModelProjectContext

آپدیت کردن دیتابیس و ایجاد دیتابیس

حالا نوبت به آپدیت کردن دیتابیس می‌رسد برای این منظور دوباره در محیط Package Manager Console دستور زیر را وارد کرده و سپس دکمه Enter رافشار دهید .

update-database

حالا دیتابیس SQL Server را باز کنید همانطور که مشاهده می‌کنید در دیتابیس ViewModelDB دو جدول Students و Professors برای شما ایجاد شده است.

تعریف کلاس برای ViewModel

توصیه می‌شود در پوشه Model یک پوشه به نام ViewModel ایجاد نموده و سپس درون آن یک کلاس برای ViewModel بسازید من نام کلاس ViewModel را CollegeViewModel.cs قرار می‌دهم .

ایجاد سازنده برای کلاس ViewModel

حال برای ViewModel خود یک سازنده ایجاد نموده و لیستی از مدل های Student و Professor  را به عنوان پارامتر های ورودی به این سازنده پاس دهید به صورت زیر :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ViewModelProject.Models.ViewModel
{
    public class CollegeViewModel
    {
        public CollegeViewModel(IEnumerable<Student> Student, IEnumerable<Professor> Professor)
        {
            Students = Student;
            Professors = Professor;
        }
        public IEnumerable<Student> Students { get; set;}
        public IEnumerable<Professor> Professors { get; set; }
    }
}

ایجاد Controller  و ActionMethod

حال بر روی پوشه Controller راست کلیک کرده و یک Controller خالی به پروژه خود اضافه نمایید من اسم Controller خودم را College قرار می‌دهم. سپس درون کنترلر ایجاد شده یک ActionMethod ایجاد نمایید من نام این اکشن متد را Index قرار می‌دهم .

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ViewModelProject.Controllers
{
    public class CollegeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

واکشی اطلاعات از جداول Student و Professor با LINQ و مقدارهی ViewModel

حال درون ActionMethod با دستور LINQ تمام رکوردهای جدول Student و Professor را گرفته و سپس به عنوان پارامتر ورودی سازنده‌ی CollegeViewModel قرار دهید و در انتها این ویو مدل را به ویوی اکشن متد Index ارسال کنید.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ViewModelProject.Models;
using ViewModelProject.Models.ViewModel;

namespace ViewModelProject.Controllers
{
    public class CollegeController : Controller
    {
        ViewModelProjectContext db = new ViewModelProjectContext();
        public ActionResult Index()
        {
            var Student = (from s in db.Student select s).ToList(); // دریافت اطلاعات دانشجویان 
            var Professor= (from p in db.Professor select p).ToList(); // دریافت اطلاعات استادان 
            CollegeViewModel ViewModel = new CollegeViewModel(Student, Professor);
            return View(ViewModel);
        }
    }
}

نمایش اطلاعات ارسال شده با ViewModel در View

حال یک ویو برای اکشن متد Index بسازید و کدهای زیر درون ویوی Index کپی کنید در کد زیر با دستور foreach اطلاعات مدل Student و مدل Professor ، از دیتابیس واکشی شده  و در دوجدول نمایش داده شده است.

@model ViewModelProject.Models.ViewModel.CollegeViewModel
@{
    ViewBag.Title = "Index";
    Layout = null;
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style>
    .row {
        direction: rtl !important;
        width: 60%;
        margin: 50px auto;
    }

    .box-info {
        margin-bottom: 40px;
        padding: 20px;
        border: 1px solid #e7dada;
    }

    .table {
        direction: rtl !important;
    }

    .title {
        padding: 10px;
        background-color: #e7e7e7;
        font-size: 18px;
    }


    .table th, .table td {
        text-align: right;
    }
</style>

<div class="row">
    <div class="box-info">
        <p class="title">اطلاعات دانش آموزان</p>
        <table class="table">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>کدملی</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    @foreach (var item in Model.Students)
                    {
                        <td> @item.Name </td>
                        <td> @item.Family </td>
                        <td> @item.NationalNo </td>
                    }
                </tr>
            </tbody>
        </table>
    </div>

    <div class="box-info">
        <p class="title">اطلاعات اساتید</p>
        <table class="table">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>کدملی</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    @foreach (var item in Model.Professors)
                    {
                        <td> @item.Name </td>
                        <td> @item.Family </td>
                        <td>@item.NationalNo </td>
                    }
                </tr>
            </tbody>
        </table>

    </div>
</div>

حالا فقط کافیه پروژه خود را اجرا نمایید .

خب به پایان این مقاله آموزشی از سایت میزفا رسیدیم اگر سوالی در رابطه با این مقاله و سایر مقالات آموزشی ASP.NET MVC داشتید حتما در قسمت نظرات این پست مطرح کنید.

منبع : میزفا