How to Display Multiple Models in Single View In Web API

Loading

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.
From the "MVC4 Project" window select "Web API".
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".
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.
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.
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).
Click on the "Add" button.

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.