Returning Multiple Models in 1 View in ASP.NET MVC3

Many mvc developers where asking on how to return multiple Models on a single view. Well its not that complex,  and here is how I did it.

First : Create the models

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcProject.Models {
     public class FirstModel : IEnumerable<FirstModel>, IList<FirstModel> {
         public string Title { get; set; }
         public string Message { get; set; }
         ...
     }
     public class SecondModel : IEnumerable<SecondModel>, IList<SecondModel> {
         public string Title { get; set; }
         public string Message { get; set; }
         ...
     }

     /*Strongly typed wrapper model*/
     public class WrapperModel {
          FirstModel firstModel;
          SecondModel secondModel;
          public WrapperModel() {
                 firstModel = new FirstModel();
                 secondModel = new SecondModel();
          }
     }
}

Second : Create our controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcProject.Models;

namespace MvcProject.Controllers {
     public class HomeController : Controller {
          public ActionResult Index() {
                WrapperModel wrapperModel = new WrapperModel();
                return View(wrapperModel);
          }
     }
}

Finally : Access our model through Razor

@model MvcProject.Models.WrapperModel
<div>
     @{
                foreach (MvcProject.Models.FirstModel fm in ViewData.Model.firstModel) {
                    <div>
                        <div id="SponsorNameContainer">@fm.Title</div>
                        <div id="SponsorMessageContainer">@fm.Message</div>
                    </div>
                }
            }
</div>
<div>
     @{
                foreach (MvcProject.Models.SecondModel sm in ViewData.Model.secondModel) {
                    <div>
                        <div id="SponsorNameContainer">@sm.Title</div>
                        <div id="SponsorMessageContainer">@sm.Message</div>
                    </div>
                }
            }
</div>

Advertisement