Thursday 19 November 2015

ViewModel in ASP.net MVC


               In this article I'm going to explain how to create ViewModel and how to pass ViewModel from Controller to View as a Strongly type view. In my previous posts I explained about ViewData and ViewBag in MVC which is not strongly typed because of it's object. But using ViewModel we can make it as strong type.

Implementing View Model in ASP.net MVC:

Summary:


       In this article I'm going to explain how to create ViewModel and how to access the same in controller class. 


Follow below steps to achieve our goal.


Step 1 : Create Folder



Create a new folder called "ViewModels" in the project solution.



Step 2 : Create StudentViewModel



Create a new class called "StudentViewModel" inside ViewModels folder as like below.
 
 
 

 namespace MVCProject.ViewModels  
 {  
   public class StudentViewModel  
   {  
     public int StudentId { get; set; }  
     public string StudentName { get; set; }  
     public string Course { get; set; }  
     public string UserName { get; set; }  
   }  
 }  
 
 

Step 3: Use ViewModel in Views



Open view and use below lines of code in top of the page.
 

 @using MVCProject.ViewModels  
 @model StudentViewModel  
 

Step 4: Display the Data in the View



Use below code snippet in View.
 
 

 @using MVCProject.ViewModels  
 @model StudentViewModel  
 @{  
   Layout = null;  
 }  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <meta name="viewport" content="width=device-width" />  
   <title>DemoView</title>  
 </head>  
 <body>  
   Hello @Model.UserName  
   <hr/>  
   <div>   
     <b>Student Details:</b>  
     <br/>  
     Student Id : @Model.StudentId <br/>  
     Student Name : @Model.StudentName <br/>  
     Course : @Model.Course  
   </div>  
 </body>  
 </html>  


 

Step 5: Create & Pass ViewModel 

 
 public ActionResult GetStudent()  
     {  
       StudentViewModel objStdVM = new StudentViewModel();  
       objStdVM.StudentId = "1";  
       objStdVM.StudentName = "Naveen";  
       objStdVM.Course = "MCA";  
       objStdVM.UserName = "Admin";  
       ///strongly typed view  
       return View("DemoView",objStdVM);  
     }  
 
 

Result:

 

 

Conclusion:


Hope this article will give you the brief description about how to handle ViewModel in MVC and how to pass ViewModel from Controller to View as a Strongly type view.

No comments:

Post a Comment