title: MVC Error using Lists and Model
body: <p>I am very new to this and am doing a little project to get to know how it all works.</p>
  
  <p>So I'm looking to create a header image area on each page by placing the code in the "_Layout.cshtml" file and attempting to control what image displays according to "ViewBag.Title".</p>
  
  <p>I have broken the code up into the pages, followed by a pic. of the error. I just can't work out what the problem is.</p>
  
  <p>HomeController.cs</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  
  namespace WebSite_Project_1.Controllers
  {
  public partial class HomeController : Controller
  {
      public ActionResult Index()
      {
          return View();
      }
  
      public ActionResult About()
      {
          ViewBag.Message = "Your application description page.";
  
          return View();
      }
  
      public ActionResult Contact()
      {
          ViewBag.Message = "Your contact page.";
  
          return View();
      }
  
      [ActionName("Funny-Bones")]
      public ActionResult FunnyBones()
      {
          ViewBag.Message = "This is funny bones.";
  
          return View();
      }
      public class Headers
      {
          public string HeaderName { get; set; }
          public string PageName { get; set; }
          public int HeaderWidth { get; set; }
          public int HeaderHeight { get; set; }
          public string HeaderType { get; set; }
      }
      public ActionResult HeaderImages()
      {
              var model = new List&lt;Headers&gt;();
  
              model.Add(new Headers { HeaderName = "home", PageName = "Home Page", HeaderWidth = 2200, HeaderHeight = 1172, HeaderType = ".png" });
              model.Add(new Headers { HeaderName = "about", PageName = "About", HeaderWidth = 2200, HeaderHeight = 1172, HeaderType = ".png" });
              model.Add(new Headers { HeaderName = "contact", PageName = "Contact", HeaderWidth = 2200, HeaderHeight = 1172, HeaderType = ".png" });
              model.Add(new Headers { HeaderName = "funnybones", PageName = "Funny Bones", HeaderWidth = 2200, HeaderHeight = 1172, HeaderType = ".png" });
  
              return View(model);
      }
  }
  }
  </code></pre>
  
  <p>_Layout.cshtml</p>
  
  <pre><code>@model IEnumerable&lt;WebSite_Project_1.Controllers.HomeController.Headers&gt;
  
  &lt;div class="headersImage"&gt;
          @foreach (var item in Model)
          {
              if (@item.PageName == @ViewBag.Title)
              {
                  &lt;img src="~/Content/Images/@item.HeaderName+@item.HeaderType" title="@item.HeaderName" /&gt;
              }
          }
  &lt;/div&gt;
  @RenderBody()
  </code></pre>
  
  <p>The problem starts when I try and publish it and then i get this error pointing to Model in the "foreach" loop.</p>
  
  <p>I'm not a 100% sure the loop is right, but haven't been able to get that far yet.</p>
  
  <p><a href="https://i.stack.imgur.com/z5eZk.png" rel="nofollow noreferrer">Link to MVC error</a></p>