Thursday, 19 November 2015

View with Collection in ASP.net MVC


          Until now we are discussing how to display single record in view, now I'm going to display collection of records in view with strongly type ViewModel. In this article I'm going to discuss about View with Collection of records.

 

Summary


Until now we are discussing how to display single record in view, now I'm going to display collection of records in view with strongly type ViewModel. In this article I'm going to discuss about View with Collection of records.



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; }  
   }  
 }  
 
 

Step 3: Create StudentListViewModel



Create one more class "StudentListViewModel" inside ViewModels folder as like below.
 
 
 namespace MVCProject.ViewModels  
 {  
   public class StudentListViewModel  
   {  
     public List Students{get; set;}  
     public string UserName { get; set; }  
   }    
 }  
 
 

Step 4: Use ViewModel in Views



Open view and use below lines of code in top of the page.
 
 
 @using MVCProject.ViewModels  
 @model StudentListViewModel   
 

Step 5: Display all the students in the View



Use below code snippet in View.
 
 @using MVCProject.ViewModels  
 @model StudentListViewModel  
 @{  
   Layout = null;  
 }  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <meta name="viewport" content="width=device-width" />  
   <title>DemoView</title>  
 </head>  
 <body>  
   Hello @Model.UserName  
   <hr/>  
   <div>   
     <table>  
       <tr>  
         <th>  
           Student Id  
         </th>  
         <th>  
           Student Name  
         </th>  
         <th>  
           Course  
         </th>  
       </tr>  
       @foreach(StudentViewModel item in Model.Students)  
       {  
         <tr>  
           <td>  
             @item.StudentId  
           </td>  
           <td>  
             @item.StudentName  
           </td>  
           <td>  
             @item.Course  
           </td>  
         </tr>  
       }  
     </table>      
   </div>  
 </body>  
 </html>  

Step 7: Create BusinessLayer



Create a new class name it as "StudentBusinessLayer" under Model folder, with a method name called as GetStudents.
 
 
 namespace MVCProject.Models  
 {  
   public class StudentBusinessLayer  
   {  
     public List GetStudents()  
     {  
       List lststd=new List();  
       Student std=new Student();  
       std.StudentId=1;  
       std.StudentName="Naveen";  
       std.Course="MCA";  
       lststd.Add(std);  
       Student std1 = new Student();  
       std1.StudentId = 2;  
       std1.StudentName = "Kruthi";  
       std1.Course = "MBA";  
       lststd.Add(std1);  
       Student std2 = new Student();  
       std2.StudentId = 3;  
       std2.StudentName = "Ram";  
       std2.Course = "BTech";  
       lststd.Add(std2);  
       return lststd;  
     }  
   }  
 }  
 

Step 8: Create & Pass from Controller 

 
 public ActionResult GetStudent()  
 {  
       StudentListViewModel objStdlstVM = new StudentListViewModel();  
       StudentBusinessLayer objStdBL = new StudentBusinessLayer();  
       List students = objStdBL.GetStudents();  
       List stdViewmodels = new List();  
       foreach (Student std in students)  
       {  
         StudentViewModel stdViewModel = new StudentViewModel();  
         stdViewModel.StudentId = std.StudentId.ToString();  
         stdViewModel.StudentName = std.StudentName;  
         stdViewModel.Course = std.Course;  
         stdViewmodels.Add(stdViewModel);  
       }  
       objStdlstVM.Students = stdViewmodels;  
       objStdlstVM.UserName = "Admin";  
       return View("DemoView", objStdlstVM);  
 }  
 

Result:

Conclusion:


Hope this article will help you to work around collection of records to be displayed in View and handling BusinessLayer to retrieve data.