MVC متشکل از Model View Controller است ، امایک موجودیت مهم دیگر به نام ViewModel در آن وجود دارد.در این مقاله قصد داریم ViewModel را با مثال آموزش دهیم .

گام 1 :یک برنامه جدید MVC، ایجاد کرده و   Empty Template  را انتخاب میکنیم

گام 2:  یک کلاس در مدل به نام اضافه میکنیم  'Student.cs.

گام 3: درStudent   سه property   مانند Roll no ، Name و Marks ایجاد میکنیم.

    public class Student  
    {  
        public int RollNo  
        {  
            get;  
            set;  
        }  
        public string Name  
        {  
            get;  
            set;  
        }  
        public double marks  
        {  
            get;  
            set;  
        }  
    } 

گام 4 :  یک کنترلر خالی  برای   Student Model اضافه کنید  ، یک لیست  ایجاد کنید و اطلاعات Student  را به آن اضافه کنید.

 public ActionResult Index()
        {
            List<Student> stud = new List<Student>  
      {  
        new Student  
        {  
            RollNo = 1, Name = "Sara", marks = 34  
        },  
        new Student  
        {  
            RollNo = 2, Name = "Arash", marks = 79  
        },  
        new Student  
        {  
            RollNo = 3, Name = "Setayesh", marks = 67  
        }  
    };
             
            return View(stud);
        }

گام 5 : روی   ActionResult index  راست کلیک کنید و View  را به آن اضافه کنید

گام 6: نرم افزار خود را اجرا  کنید . خواهید دید که  اطلاعات Student را نشان میدهد.

گام  7

در حال حاضر،  یک view جدید برای   Student . ایجاد میکنیم  Studentکه marks از 35 بزرگتر باشد با رنگ سبز و  دیگری به رنگ قرمز نمایش دهد

ما نیاز به نوشتن این منطق داریم ، بنابراین  یک  ViewModel جدید ، به نام vmStudMarks  در فایل ' Student.cs. ایجاد میکنیم.

در اینجا  پروپرتی  Name، marks و Colorname ایجاد میکنیم ، از Colorname برای  پیاده سازی UI Logic استفاده میکنیم.

گام 8

یک () ActionResult getStud  و  یک لیست برای داده های Student ایجاد میکنیم. و لیستی دیگر برای ViewModel  و نوشتن  حلقه foreach برای بررسی لیست داده ها ی Student و بررسی اینکه اگر   Marks> 35 باشد ،   ViewModelColor = سبز  شود و  ViewModelColor دیگر با قرمز تنظیم شود.

 public ActionResult getStud()
        {
            List<Student> studs = new List<Student>  
          {  
            new Student  
            {  
                RollNo = 1, Name = "Sara", marks = 34  
            },  
            new Student  
            {  
                RollNo = 2, Name = "Arash", marks = 79  
            },  
            new Student   
            {  
                RollNo = 3, Name = "Setayesh", marks = 67  
            }  
        };
            List<vmStudMarks> vmSt = new List<vmStudMarks>();
            foreach (Student stud in studs)
            {
                vmStudMarks vm = new vmStudMarks();
                vm.Name = stud.Name;
                vm.marks = stud.marks.ToString("C");
                if (stud.marks > 35)
                {
                    vm.colorname = "green";
                }
                else
                {
                    vm.colorname = "red";
                }
                vmSt.Add(vm);
            }
            return View("getStud", vmSt);
        }  

گام 9

 روی   ActionResult getsudt  راست کلیک کنید و View  را به آن اضافه کنید( 'ViewModel 'getStud )

گام 10:

کد زیر را در فایل 'getStud.cshtml'  بنویسید

@model IEnumerable<ExamMVC.Models.vmStudMarks>

@{
    ViewBag.Title = "getStud";
}

<h2>getStud</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

   
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.marks)
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <span>@item.Name</span>
                </td>
                <td>
                    <span style="background-color:@item.colorname">@item.marks</span>
                </td>
            </tr>
        }
    </table>

گام 11:

برنامه را اجرا کنید ،رکورد Student که  marks  آن از 35 بزرگتر باشد سبز رنگ است   و Student که این شرط را نداشته باشد قرمز رنگ است