I am attempting to display the image for each car on my table. When I run the code, the View crashes and I get the error

Object reference not set to an instance of an object

I have images saved on my database and they are linked to the car so I am not sure why I am getting null value.

This is my view

@model IEnumerable<IgnitionHub2._0.Models.Car>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ImageList.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CarID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MarketValue)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Year)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Model.Make.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Model.Name)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
    <tr>
    <td>
        <img [email protected]("/CarImages/{0}",item.Images.FirstOrDefault().Title) />
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.CarID)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.MarketValue)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Year)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Model.Make.Name)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Model.Name)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.CarID }) |
        @Html.ActionLink("Details", "Details", new { id = item.CarID }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.CarID })
    </td>
    </tr>
    }
</table>

This is the controller

public ActionResult _Index()
{
    var cars = new List<Car>(db.Cars); 
    return PartialView(cars);
}

These are the models:

namespace IgnitionHub2._0.Models
{
    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;

    public partial class Car
    {
            public Car()
            {
            }

            public int CarID { get; set; }
            public string Year { get; set; }
            public string Color { get; set; }
            public string Mileage { get; set; }
            public string BodyType { get; set; }
            public string Drive { get; set; }
            public string Notes { get; set; }
            public bool Available { get; set; }
            public string VinNumber { get; set; }
            public int CarLotID { get; set; }
            public int ModelID { get; set; }
            public virtual Model Model { get; set; }
            public virtual ICollection<Image> Images { get; set; }
            public HttpPostedFileBase[] files { get; set; }
            public IEnumerable<Car> SelectedCar { get; set; }
            public virtual Image ImageList { get; set; }
    }
}

This is the model for Image

namespace IgnitionHub2._0.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;

    public partial class Image
    {
        public int ImageID { get; set; }
        public int CarID { get; set; }
        public string Title { get; set; }
        public string ImagePath { get; set; }        
        public virtual Car Car { get; set; }
        public HttpPostedFileBase[] files { get; set; }
    }
}

My application crashes when It get to the @foreach (var item in Model) in the view.

Please Help! Thank you in advance.

CodePudding user response：

I was able to make my code work by changing

<td>
    <img [email protected]("/CarImages/{0}",item.Images.FirstOrDefault().Title) />
</td>

to:

<td>
    @if (item.Images.Count > 0)
    {<img [email protected]("/CarImages/{0}", item.Images.FirstOrDefault().Title) />}
</td>