Departments:
  1. Computer Engineering
  2. Computer Science
Codings:
  1. C#
Softwares:
  1. Microsoft Visual Code
  2. Microsoft Visual Studio
ViewModels in ASP.NET Core,ViewModels ASP.NET Core, asp.net core ViewModels, ViewModels in ASP NET Core
Hello friends, I hope you all are doing great. In today's tutorial, we will have a look at How to Create ViewModels in ASP.NET Core. It's our 9th tutorial in ASP.Net Core series. We have already covered Controllers, Models & Views in our previous lectures and now it's time to understand this fourth pillar of MVC architecture. ViewModel is not an integral part of MVC architecture and can be ignored in simple projects but in complex applications, we have to use ViewModel as it adds flexibility in the project. So, let's have a look at ViewModels in ASP.NET Core:

ViewModels in ASP.NET Core

  • ViewModels in ASP.NET Core,ViewModels ASP.NET Core, asp.net core ViewModels, ViewModels in ASP NET Core
    ViewModels in ASP.NET Core     ( also called Data Transfer Objects [DTO] ) are used to send Models data from Controller to View.
  • Normally in complex cloud based applications, data from multiple Model classes needs to be displayed in a single View file, in such cases it's wise to first combine all the incoming data in a single ViewModel file and then attach this ViewModel class with respective View.
  • We can place ViewModels anywhere in our project but to keep the project files organized, it's better to place all ViewModel files in a folder named ViewModels, as shown in the figure on right side.
  • Inside this ViewModel folder, I have added a new C# file and named it HomeInfoViewModel.cs as this ViewModel is for Info action method of Home Controller, its a convention to place ViewModel at the end of the filename.
  • Inside this ViewModel class, I have just added two properties, ViewModel code is shown in the figure on right side.
  • ViewModels in ASP.NET Core,ViewModels ASP.NET Core, asp.net core ViewModels, ViewModels in ASP NET Core
    You can see in the code that first property is of type Engineers, which is from our Model Class Engineers.
  • While the second property is just a string for Page Title, if you remember in the last lecture, we have hard coded the Page Title in our View file.
Edit Home Controller File
  • ViewModels in ASP.NET Core,ViewModels ASP.NET Core, asp.net core ViewModels, ViewModels in ASP NET Core
    Now open your HomeController.cs file and in the Info action method, add this code shown in figure on right side.
  • In Info action method, I have created a new instance of this ViewModel and have provided values for its properties i.e. first Engineer data & Page Title.
  • Finally I have passed this ViewModel object to respective View.
  • You must be wondering why we need to create this new file and have added extra code, it seems lengthy with single Model data but when you are working with 10 or 20 Models and you have to display their data in single View file, then ViewModels prove really helpful.
Update Info View File
  • ViewModels in ASP.NET Core,ViewModels ASP.NET Core, asp.net core ViewModels, ViewModels in ASP NET Core
    Finally, we need to update our Info.cshtml View file according to this new ViewModel.
  • Code is shown in the figure and you can see that now I am using @model directive for ViewModel class now.
  • Moreover, I am now using properties of that ViewModel using @Model and now we just have the HTML code and rest is coming from C#, thus making it more flexible.
  • Now if you run your project, you will get the same results as in our previous lecture, but now the project is more organized and easily readable, here's the output:
Views in ASP.NET Core MVC, Views in ASP.NET Core, Views in ASP NET Core, view in asp core, view asp net core
So, that was all about ViewModels in ASP.NET Core. I hope you have enjoyed today's tutorial and if you have any questions, please ask in comments. Have fun !!!