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:

Step 2

Create an Interface in Model folder as in the following:

Step 3

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

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:

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:

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