آموزش طراحی سایتنکات و ترفندهای Asp.Net MVC

ارسال چند 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
ASP.NET MVC - فعال کردن Migrations
فعال کردن Migrations

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

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

update-database
آپدیت کردن دیتابیس در ASP.NET MVC
آپدیت کردن دیتابیس در ASP.NET MVC

حالا دیتابیس 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 داشتید حتما در قسمت نظرات این پست مطرح کنید.

منبع : میزفا

برچسب ها

آرزو ابراهیمی

بیش از 4 سال است که زمینه طراحی و توسعه سایت فعالیت می‌کنم، طراح و برنامه نویس انواع سامانه‌های تخصصی پزشکی، مناقصات، فروشگاهی و ... بودم و هستم و هدفم در سایت میزفا ارائه اطلاعات بروز و ناب در زمینه طراحی سایت است. تا از این طریق بتونم تجربیات و دانسته های خودم را با تمامی علاقمندان به مباحث طراحی سایت به اشتراک بزارم .

نوشته های مشابه

‫16 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام. در asp.net کنترل gridview داشتیم، و خیلی عالی و پرکاربرد بود، الان در mvc کنترلی با همان توانایی و همان کارکرد وجود داره؟ کمی توضیح بفرمایید

    1. سلام… در asp.net mvc دیگه ابزارهایی مثل grid view رو نداریم و شما باید خودتون در View برای نمایش اطلاعات جدولتون رو کدنویسی کنید … اتفاقا از این بابت که در mvc محدود به استفاده از grid view نیستیم به نظرم mvc خیلی بهتره و دست طراح رو کاملا باز میزاره برای طراحی صفحه .

  2. با سلام
    ضمن تشکر از مطالبتون. آیا برای هر جدول در دیتابیس باید یک کلاس در مدل بسازیم؟ و اگر نیاز به یک آبجکت داشتیم که جزئ جداول دیتابیس نبود و از یک یا چند جدول دیتابیس باضافه چند پراپرتی استفاده می کرد و یکسری عملیات حذف و ادیت و…داشت. باید این کلاس کجا ساخته بشه؟ داخل مدل یا ویو مدل

    برای مثال کلاس Cart
    { product p {get;set; } int number {get;set;}}
    در کلاس کارت؛ یکسری عملیات ، اضافه کردن محصول، حذف محصول و … داریم. کلاس کارت را کجا باید ساخت؟

    1. سلام…خواهش میکنم … شما برای نمایش اطلاعات دیتابیس در ویو و با درج اطلاعات می تونید یا از خود model استفاده کنید و یا یک ViewModel ایجاد کنید معمولا زمانی که می خواهیم از پراپرتی های یک یا چند کلاس توی View استفاده کنیم وچون که نمی تونم از دوتا model در یک View استفاده کنیم از ViewModel استفاده میکنیم و پراپرتی های این دو تا model رو داخل ViewModel تعریف می کنیم.
      شما می تونید این کلاس در در هرجایی ایجاد کنید و ازش توی برنامه استفاده کنید ولی من پیشنهاد می کنم که داخل پوشه Models یک پوشه به نام ViewModels ایجاد کنید و ویو مدل هاتون رو داخل این پوشه تعریف کنید.

      1. ممنون از پاسختون. در این حالت ، متدهای add, delete و… مربوط به کلاس کارت رو هم داخل همون کلاس در viewmodel باید گذاشت؟

        1. خواهش میکنم …برای انجام عملیات حذف ، درج و … یک کلاس دیگه ایجاد کنید و این متدها رو داخل این کلاس تعریف کنید.

  3. view model برای نمایش داده ها در لایه ویو هست نه برای ساختن دیتابیس! در واقع view model باید از روی model ها (همون کلاس های انتیتی ) ساخته بشه

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

  4. سلام آیا
    public CollegeViewModel(IEnumerable Student, IEnumerable Professor)
    {
    Students = Student;
    Professors = Professor;
    }
    نباید به
    public CollegeViewModel(IEnumerable Student, IEnumerable Professor)
    {
    var Students = Student ;
    var Professors = Professor;
    }
    تغییر داده شود ؟

    1. سلام … نخیر لزومی نداره …. چون زمانی که نوع متغیر مشخص نباشه از var استفاده میکنیم و همین طور که در کدهای بخش ViewModel مشاهده می کنید ما نوع متغیرها رو هم در قسمت سازنده و هم پراپرتی های کلاس ، از نوع <>IEnumerable مشخص نموده ایم. به پراپرتی هایی که بعد از سازنده تعریف شده دقت کنید ما از طریق سازنده این دو پراپرتی رو مقداردهی می کنیم.

    1. باسلام …پست مجددا بررسی شد من به مشکلی برنخوردم لطفا اگر اشکالی مشاهده می کنید به محل دقیق اشکال اشاره کنید … ممنون

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر