Updated July 5, 2023
Introduction to ViewModel in MVC
In this article, we will discuss and learn about the ViewModels in an MVC framework. For that, it is essential to know what are models. Models are the basic domain objects using which we can perform our operations like updation, insertion, deletion, and selection. This is similar to the entities in the Object Relational Mappers(ORM) which represent the tables in case of the relational database. But many times, a single model is not sufficient to display data on the view. In real-time applications, we often feel a need of showing data from multiple models and some additional data which is not in the available models in the view section of our code. This is where the concept of ViewModel arose.
ViewModel is nothing but a collection of one or more models and some additional data which needs to be rendered in the view section and needs to be passed from controller to view. ViewModel’s name itself suggests that it is the model that is defined considering the requirements of the data required to be rendered in the view part of the code. The ViewModel is generated keeping in mind the requirements of model data for a particular view hence it is called ViewModel.
Examples to Implement ViewModel in MVC
Let’s first understand the concept of ViewModel with the help of the visual representation of the example which we will discuss in the further section. Consider an example where we want to store the data of platforms available for online learning and the tutorials they will be providing for the same. Here, we will have two models of platform and tutorials. Now, we want to display the data of the EDUCBA platform and its tutorials along with the title and today’s date on the view. So, we will prepare a ViewModel which will contain all the platform model properties and tutorials model properties and two new properties required to be displayed on the view which is namely title and today’s date.
Lets Code for the same. We will begin with the creation of the basic models which we will require further for the building view model. The two models that we will create are namely Platform.cs and Tutorials.cs
1. Platform Model
Firstly, We will create a new class file within the Models folder named Platform.cs which will contain basic information about the educational platform like it’s the id, name, date of establishment, team size, headquarter, address and contact information. This file will contain the following code in it which will represent it as a model.
Code:
public class Platform
{
public int PlatformId { get; set; }
public string Name { get; set; }
public string EstablishDate { get; set; }
public int TeamSize { get; set; }
public string HeadQuarter { get; set; }
public string Address { get; set; }
public int ContactNo { get; set; }
}2. Tutorials Model
Now, create a new class file named Tutorials.cs under the Models folder of your ASP.Net project. This model will contain basic details about tutorial subjects like it’s id, name, tutor, duration, content, and charges. Here’s how it should look like.
Code:
public class Tutorials
{
public int TutorialId { get; set; }
public string SubjectName { get; set; }
public string Tutor { get; set; }
public int Duration { get; set; }
public string Content { get; set; }
public int Charges { get; set; }
}How to Create ViewModel?
Now, we will create a view model in our application. In ASP.Net, it is allowed to create a ViewModel anywhere in your project. It’s best practice is to create a ViewModel inside the folder named ViewModels. So, first, create a folder named ViewModels and now create a class file inside this folder named PlatformTutorialsViewModel.cs. This file will be a collection of model1 that is Platform model, model2 that is the Tutorials model and two more properties namely current time and title.
Code:
using FirstMVCDemo.Models;
namespace FirstMVCDemo.ViewModels
{
public class PlatformTutorialsViewModel
{
public Platform Platform { get; set; }
public Tutorials Tutorials { get; set; }
public string Title { get; set; }
public string TodayDate { get; set; }
}
}Explanation: In the above PlatformTutorialsViewModel view model the Platform stands for the name of the controller and Tutorials stands for the action method in it. And as it is a ViewModel, we have appended ViewModel at the end of its name. This is the general naming convention followed. Though it is not compulsory to name your files and methods in this manner, it is a part of good programming practice that should be followed.
How to Create the Controller File?
Create a file named PlatformController.cs in the Controller folder of your project. Here, we will assign values to our ViewModel and will return it to view as the parameter of View on=bject which is going to be returned from controller.
Code:
using FirstMVCDemo.ViewModels;
using FirstMVCDemo.Models;
using System.Web.Mvc;
namespace FirstMVCDemo.Controllers
{
public class PlatformController : Controller
{
public ViewResult Tutorials()
{
//Platform Basic Details
Platform platform = new Platform()
{
PlatformId = 1,
Name = "EDUCBA",
EstablishDate = "XX/YY/ZZZZ",
TeamSize = 10000,
HeadQuarter = "Mumbai",
Address = "A- 406, Boomerang, Chandivali Rd, Powai, Mumbai, Maharashtra 400072",
ContactNo = 1234567890
};
//Tutorial Details
Tutorials tutorials = new Tutorials()
{
TutorialId = 1001 ,
SubjectName = "MVC",
Tutor = "Payal",
Duration = 1,
Content = "ViewModel",
Charges = 1000
};
//Creating the View model
PlatformTutorialsViewModel platformTutorialsViewModel = new PlatformTutorialsViewModel()
{
Platform = platform,
Tutorials = tutorials,
Title = "Platform Tutorials Page",
TodayDate = "18/03/2020",
};
//Pass the PlatformTutorialsViewModel to the view
return View(platformTutorialsViewModel);
}
}
}View File
Now, we will get the values of ViewModel and display it according to our choice in the order and structure we want in the view part of the code. For this, create a file named PlatformTutorials.cshtml in the views folder of your project.
Code:
@model FirstMVCDemo.ViewModels.PlatformTutorialsViewModel
@{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@Model.Title</title>
</head>
<body>
<h1>@Model.TodayDate</h1>
<div>
PlatformID : @Model.Platform.PlatformId
</div>
<div>
Name : @Model.Platform.Name
</div>
<div>
EstablishDate : @Model.Platform.EstablishDate
</div>
<div>
TeamSize : @Model.Platform.TeamSize
</div>
<div>
HeadQuarter : @Model.Platform.HeadQuarter
</div>
<div>
Address : @Model.Platform.Address
</div>
<div>
ContactNo : @Model.Platform.ContactNo
</div>
<h1>Platform Tutorials</h1>
<div>
TutorialId : @Model.Tutorials.TutorialId
</div>
<div>
SubjectName : @Model.Tutorials.SubjectName
</div>
<div>
Tutor : @Model.Tutorials.Tutor
</div>
<div>
Duration : @Model.Tutorials.Duration
</div>
<div>
Content : @Model.Tutorials.Content
</div>
<div>
Charges : @Model.Tutorials.Charges
</div>
</body>
</html>Output: After running this cshtml file the output will be as follows –
Recommended Articles
This is a guide to ViewModel in MVC. Here we discuss to implementing two models, how to create view file, ViewModel and controller file. You can also go through our other related articles to learn more –
