Post
Ask Question

How to Display Multiple Models in Single View In Web API

Introduction

This article explains how to display multiple model data in a single view in Web API. Here we use a collection of data from multiple models.

Procedure for create the application.

Step 1

Create a Web API application as in the following:

  • Start Visual Studio 2012.
  • From the start window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click on the "OK" button.

    mod.jpg

  • From the "MVC4 Project" window select "Web API".

    mod6.jpg

  • Click on the "OK" button.

Step 2

Create an Interface in Model folder as in the following:

  • In the "Solution Explorer".
  • Right-click on the Model Folder select "Add" -> "New Item"
  • Select "Installed" -> "Visual C#" and select "Interface".

    mod1.jpg

  • Click on the "Add" button.

Step 3

Create two model classes, one is named "Employee" and the second is "EmpAddress" and inherit with the interface.

  • In the "Solution Explorer".
  • Right-click on the Model folder.
  • Select "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select class.

    mod2.jpg

  • Click on the "Add" button. 

Add the following code in the "EmpAddress.cs" class:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace CallingApi.Models  
  6. {  
  7.     public class EmpAddress:IEmployee  
  8.     {  
  9.         public int EID { get; set; }  
  10.         public string Address { get; set; }  
  11.     }  
  12. } 

Add the following code in the "Employee.cs" class:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace CallingApi.Models  
  6. {  
  7.     public class Employee:IEmployee  
  8.     {  
  9.         public int EID { get; set; }  
  10.         public string Emp_Name { get; set; }  
  11.     }  
  12. } 

Step 4

Create a Controller as in the following:

  • In the "Solution Explorer".
  • Right-click on the Controller folder.
  • Select "Add" -> "Controller" and change the name.

    mod3.jpg

  • Click on the "OK" button.

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using CallingApi.Models;  
  7. namespace CallingApi.Controllers  
  8. {  
  9.     public class EmployeeController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Employee/  
  13.         public ActionResult Display()  
  14.         {  
  15.             Employee emp = new Employee();  
  16.             EmpAddress empad = new EmpAddress();  
  17.             emp.EID = 1;  
  18.             emp.Emp_Name = "Tanya";  
  19.             empad.EID = emp.EID;  
  20.             empad.Address = "Kanpur";  
  21.             List<IEmployee> List = new List<IEmployee>();  
  22.             List.Add(emp);  
  23.             List.Add(empad);  
  24.             ViewBag.Employees = List;  
  25.             return View("Detail");  
  26.         }  
  27.     }  
  28. }   

Step 6

Now add a MVC4 View Page (aspx) in the Shared folder using the following:

  • In the "Solution Explorer".

  • Right-click on the "Shared" folder then select "Add" -> "New Item".

  • Select "Installed" -> "Visual C#" -> "Web" and select  MVC4 View Page (aspx).

    mod4.jpg

  • Click on the "Add" button.

Add the following code:

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<CallingApi.Models.Employee>" %>   
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head runat="server">  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <div>  
  10.      <% var Value= (List<CallingApi.Models.IEmployee>) ViewBag.Employees; %>  
  11.         <% var Emp_Info =Value[0] as CallingApi.Models.Employee; %>  
  12.         <% var Emp_Add = Value[1] as CallingApi.Models.EmpAddress; %>  
  13.       Employee ID:- <%= Emp_Info.EID %> <br />  
  14.       Employee Name:- <%= Emp_Info.Emp_Name %><br />  
  15.        Employee Address :- <%= Emp_Add.Address %>  
  16.     </div>  
  17. </body>  
  18. </html>   

Step 7

Execute the application.

mod5.jpg


Similar Articles