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:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace CallingApi.Models
{
public class EmpAddress:IEmployee
{
public int EID { get; set; }
public string Address { get; set; }
}
}
Add the following code in the "Employee.cs" class:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace CallingApi.Models
{
public class Employee:IEmployee
{
public int EID { get; set; }
public string Emp_Name { get; set; }
}
}
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:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CallingApi.Models;
namespace CallingApi.Controllers
{
public class EmployeeController : Controller
{
//
// GET: /Employee/
public ActionResult Display()
{
Employee emp = new Employee();
EmpAddress empad = new EmpAddress();
emp.EID = 1;
emp.Emp_Name = "Tanya";
empad.EID = emp.EID;
empad.Address = "Kanpur";
List<IEmployee> List = new List<IEmployee>();
List.Add(emp);
List.Add(empad);
ViewBag.Employees = List;
return View("Detail");
}
}
}
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]()
Add the following code:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<CallingApi.Models.Employee>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
<% var Value= (List<CallingApi.Models.IEmployee>) ViewBag.Employees; %>
<% var Emp_Info =Value[0] as CallingApi.Models.Employee; %>
<% var Emp_Add = Value[1] as CallingApi.Models.EmpAddress; %>
Employee ID:- <%= Emp_Info.EID %> <br />
Employee Name:- <%= Emp_Info.Emp_Name %><br />
Employee Address :- <%= Emp_Add.Address %>
</div>
</body>
</html>
Step 7
Execute the application.
![mod5.jpg]()