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:

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

  • 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.

mod5.jpg