MVC View With Multiple Models Using Tuples And Expendo Object.

DownLoad Sample Project: MvcViewWithMultipleModels 

In mvc programming model a view can be associate with multiple models and developers have to send multiple models from controller to cshtml page.There are many  common approaches like ViewBag,ViewData,ViewModel etc can be use to achieve this functionality.

But here i am not going to demonstrate all above three can use .net framework 4.0 new features to pass the multiple models from controller to view effeciently.

  1. Expendo Object
  2. Tuples

1.) Using Expendo Object:

The ExpandoObject class enables you to add and delete members of its instances at run time and also to set and get values of these members. This class supports dynamic binding, which enables you to use standard syntax like sampleObject.sampleMember instead of more complex syntax like sampleObject.GetAttribute(“sampleMember”).

Let say you have two models named as “Department” and “Employee” and you want bind these two models with mvc view.Below are the model definitions:





Controller.cs :


Method details fetch employee and department details as per below:


View (Index.Html):

On the view you have to use dynamic property of .net framework 4.0 and need to be declared as @model dynamic.this is not strongly type of view.


Rendered output:


2.) Using Tuples:

In C#, tuples are used to store data. It’s sort of like a variable, but in order for it to be a tuple it must contain more than one value. Each instance of a tuple has a fixed number of items within it (and each item has its own distinct type, eg. a variable or an int), and once the tuple has been created, it can’t be altered in any way.

Let’s continue with previous create models and there are no changes in model class.the only change need to do in controller and view.

Now Controller looks like after code updating for tuples:



View (index.html)

you have use tuples at top of the view and you have to declare as per below:

@model Tuples<List<Employee>,List<Department>

complete view looks like:


Rendered Output:


You can see there is no change in final rendered output.

this article describe how to pass multiple models from controller to view .I hope this will be helpful for programmers.

Display Templates in Asp.Net MVC -Part 1

Display and editor templates are way to automatically build UI based on a data model. Essentially, it allows us a way to return mark-up required to display the data for the specified model.

This is awesome because we can create templates for commonly used data models, allowing reuse and a clean razor view. The difference between display and editor templates are:

  • Display templates are used for read-only HTML elements.
  • Editor templates are used for editable HTML elements (e.g. input fields).

It was always painful to generate HTML for each property when we have a great feature in the MVC framework (@Html.EditorForModel() and @Html.DisplayForModel() and site.css (Default) where we can modify the user interface).


Let’s take Blog landing page as an example:

A common section called “categories” and “Tags” are important part of blog sites and may be these two sections shows many time on different pages.

so my view and it’s html and model classes would typically look something like this.


public class BlogPosts
        public Categories CatObj;
        public Tags TagObj;
        public List<Categories> lstCat;
        public List<Tags> lstTag;
        public BlogPosts()
        public void GetCategories()
            lstCat = new List<Categories>();
            lstCat.Add(new Categories() { catId = 1, catName = "" });
            lstCat.Add(new Categories() { catId = 2, catName = "C#" });
        public void GetTags()
         lstTag = new List<Tags>();
         lstTag.Add(new Tags() { tagid = 1, tagName = "C++ Programming" ,Url=""});
         lstTag.Add(new Tags() { tagid = 2, tagName = "SSIS", Url = "" });
         lstTag.Add(new Tags() { tagid = 3, tagName = "SSRS", Url = "" });
         lstTag.Add(new Tags() { tagid = 4, tagName = "SSAS", Url = "" });
         lstTag.Add(new Tags() { tagid = 5, tagName = "Amazon Services", Url = "" });
         lstTag.Add(new Tags() { tagid = 6, tagName = "Azure Services", Url = "" });


public class Categories
        public int catId { get; set; }
        public string catName { get; set; }


public class Tags
       public int tagid { get; set; }
       public string tagName { get; set; }
       public string Url { get; set; }


public class HomeController : Controller
       // GET: Home
       public ActionResult Index()
           BlogPosts bp = new BlogPosts();
           return View("Index", bp);


@model MVCTemplate.Models.BlogPosts
    @* Author:Rakesh Mahur *@
    @* This is traditional way to bind model with html by using foreach loop *@
   <h1>Common way to bind model with html</h1>
        @foreach (var CatItem in Model.lstCat)
                <a href="#">@CatItem.catName</a>
            @foreach (var tagItem in Model.lstTag)
                    <a href="@tagItem.Url">@tagItem.tagName</a>




 Url: http://localhost:<port>/home/index


Output is exactly same as the the desired but there are few things need to be noted that here  foreach loop is used to fetch all items from the collection and bind with html tags.So page performance directly depends on number of items in collection.

it seems ugly with lot of codes with foreach. so it’s better our views remain very simple and clean. With display templates we can make it cleaner.

How Come ?

To make code cleaner we can pass a model or a list of models into html.displayfor() and the framework will take of the rest.

before creating the display templates,folder structure is very import part of it.if you are going to create templates which will use any where in whole application as as reusable component then a folder structure looks like below and all display templates should be created under this folder.



let’s create display templates for tag and categories.


@model MVCTemplate.Models.Categories
            <a href="#">@Model.catName</a>


@model MVCTemplate.Models.Tags
        <a href=@Model.Url>@Model.tagName</a>

Now add new cshtml page  with name “ViewWithTemplate” under view/home folder:


@model MVCTemplate.Models.BlogPosts

Now Add new action method in homecontroller and now modified code look like this:

public class HomeController : Controller
    // GET: Home
    // Call this method to see view output with foreach loops
    public ActionResult Index()
        BlogPosts bb = new BlogPosts();
        return View("Index", bb);
// Call this method to see view output with Display templates.
    public ActionResult ViewWithTemplates()
           BlogPosts bb = new BlogPosts();
           List<Categories> objcat = bb.lstCat;
           return View("ViewWithTemplate", bb);


Output of modified code for Display templates:

 Url: http://localhost:<port>/home/ViewWithTemplates


if you noticed and compare both outputs with display templates and with foreach loops as shown below,no differences found in both output but there are lot of differences at cshtml level and you can see cstmal with display templates are more manage and cleaner to traditional way.



Another Example of Display Templates:

assume you have to show color thumbnail along with other details in tabular format as per below and you may download complete project:


Sample Project for Color Thumbnail: DisplayNameForTemplate


Display templates are  a useful HTML helper built into the MVC framwork. Using them to replace foreach loops allow sus to write clean,readable code that can easily be used across the application.

Start removing your loops today !