How in an ASP.NET MVC view do I convert primary keys to actual names / descriptor fields

Question

I am looking to display an ASP.NET MVC view to show my booking table data via a view.

However the view outputs the Movie and Venue data simply as ID values corresponding to their primary keys. This is not very readable for humans of course. I've tried for approximately 4 hours to get this resolved and what should be simple isn't. I can't find a way to make that ID into the movie or venue name. Any help is appreciated this is for some coursework that is due in a few days. Thanks

Markup of my view:

@model IEnumerable<MovieClubSite.Controllers.Booking>

@{
    ViewBag.Title = "Booking Manager";
}

<br />
<h2>Booking Manager</h2>

<ul class="list-group">
    <li class="list-group-item list-group-item-dark">Pick a showing</li>

    @foreach (var item in Model)
    {
        <li class="list-group-item list-group-item-action list-group-item-info">
            <div class="float-left">
                <b>Username:</b> @Html.DisplayFor(modelItem => item.CustomerReference)<br />
                <b>Movie:</b>@Html.DisplayFor(modelItem => item.Showing.MovieID)<br />
                <b>Venue:</b>@Html.DisplayFor(modelItem => item.Showing.VenueID)<br />
                <b>Date/Time:</b>@Html.DisplayFor(modelItem => item.Showing.ShowingDateTime)<br />
            </div>
            <div class="float-right">
                <a href='@Url.Action("Edit", "Bookings", new { id = item.BookingID })'><img src="~/Resources/pencil.png" style="width: 1.5rem"></a><br />
                <a href='@Url.Action("Delete", "Bookings", new { id = item.BookingID })'><img src="~/Resources/recycle-bin.png" style="width: 1.5rem"></a>
            </div>
        </li>

    }
    <a href='@Url.Action("Create", "Bookings")' class="list-group-item list-group-item-action list-group-item-success">
        Add a new showing
    </a>
</ul>

Code for my Booking controller:

// GET: Bookings
public ActionResult Index()
{
    var bookings = db.Bookings
                     .Include(b => b.Member)
                     .Include(b => b.Showing);

    return View(bookings.ToList());
}

BOOKING CLASS

namespace MovieClubSite.Controllers
{
    using System;
    using System.Collections.Generic;
    
    public partial class Booking
    {
        public int BookingID { get; set; }
        public int ShowingID { get; set; }
        public int MemberID { get; set; }
        public string CustomerReference { get; set; }
    
        public virtual Member Member { get; set; }
        public virtual Showing Showing { get; set; }


    }
}

MOVIE CLASS

namespace MovieClubSite.Controllers
{
    using System;
    using System.Collections.Generic;
    
    public partial class Movie
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public Movie()
        {
            this.Showings = new HashSet<Showing>();
        }
    
        public int MovieID { get; set; }
        public string MovieName { get; set; }
        public Nullable<int> MovieYear { get; set; }
        public string MovieImage { get; set; }
        public string MovieDescription { get; set; }
        public string MovieLinkWiki { get; set; }
        public string MovieLinkIMDB { get; set; }
    
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<Showing> Showings { get; set; }
    }
}

SHOWING CLASS

namespace MovieClubSite.Controllers
{
    using System;
    using System.Collections.Generic;
    
    public partial class Showing
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public Showing()
        {
            this.Bookings = new HashSet<Booking>();
        }
    
        public int ShowingID { get; set; }
        public int MovieID { get; set; }
        public int VenueID { get; set; }
        public System.DateTime ShowingDateTime { get; set; }
    
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<Booking> Bookings { get; set; }
        public virtual Movie Movie { get; set; }
        public virtual Venue Venue { get; set; }
    }
}

VENUE CLASS

namespace MovieClubSite.Controllers
{
    using System;
    using System.Collections.Generic;
    
    public partial class Venue
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public Venue()
        {
            this.Showings = new HashSet<Showing>();
        }
    
        public int VenueID { get; set; }
        public string VenueDescription { get; set; }
        public int VenueCapacity { get; set; }
        public string VenueName { get; set; }
        public string VenueImage { get; set; }
    
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<Showing> Showings { get; set; }
    }
}

Answer 1

I've solved it with help from the posters above and a bit of searching online. Its taken about 4 hours to solve this, that's programming tho :/ Hopefully this post will help others with the same issue.

VIEW

        public ActionResult Index()
        {
            var bookings = db.Bookings
                             .Include(b => b.Member)
                             .Include(b => b.Showing)
                             .Include(x => x.Showing.Movie)
                             .Include(x => x.Showing.Venue)
                            .ToList();
        return View(bookings);
        }

CONTROLLER

model IEnumerable<MovieClubSite.Controllers.Booking>

@{
    ViewBag.Title = "Booking Manager";
}

<br />
<h2>Booking Manager</h2>





<ul class="list-group">
    <li class="list-group-item list-group-item-dark">Pick a showing</li>

    @foreach (var item in Model)
    {
        <li class="list-group-item list-group-item-action list-group-item-info">
            <div class="float-left">
                <b>Username: </b> @Html.DisplayFor(modelItem => item.CustomerReference)<br />
                <b>Movie: </b>@Html.DisplayFor(modelItem => item.Showing.Movie.MovieName)<br />
                <b>Venue: </b>@Html.DisplayFor(modelItem => item.Showing.Venue.VenueName)<br />
                <b>Date/Time: </b>@Html.DisplayFor(modelItem => item.Showing.ShowingDateTime)<br />
            </div>
            <div class="float-right">
                <a href='@Url.Action("Edit", "Bookings", new { id = item.BookingID })'><img src="~/Resources/pencil.png" style="width: 1.5rem"></a><br />
                <a href='@Url.Action("Delete", "Bookings", new { id = item.BookingID })'><img src="~/Resources/recycle-bin.png" style="width: 1.5rem"></a>
            </div>
        </li>

    }
    <a href='@Url.Action("Create", "Bookings")' class="list-group-item list-group-item-action list-group-item-success">

        Add a new showing

    </a>
</ul>
model IEnumerable<MovieClubSite.Controllers.Booking>

@{
    ViewBag.Title = "Booking Manager";
}

<br />
<h2>Booking Manager</h2>





<ul class="list-group">
    <li class="list-group-item list-group-item-dark">Pick a showing</li>

    @foreach (var item in Model)
    {
        <li class="list-group-item list-group-item-action list-group-item-info">
            <div class="float-left">
                <b>Username: </b> @Html.DisplayFor(modelItem => item.CustomerReference)<br />
                <b>Movie: </b>@Html.DisplayFor(modelItem => item.Showing.Movie.MovieName)<br />
                <b>Venue: </b>@Html.DisplayFor(modelItem => item.Showing.Venue.VenueName)<br />
                <b>Date/Time: </b>@Html.DisplayFor(modelItem => item.Showing.ShowingDateTime)<br />
            </div>
            <div class="float-right">
                <a href='@Url.Action("Edit", "Bookings", new { id = item.BookingID })'><img src="~/Resources/pencil.png" style="width: 1.5rem"></a><br />
                <a href='@Url.Action("Delete", "Bookings", new { id = item.BookingID })'><img src="~/Resources/recycle-bin.png" style="width: 1.5rem"></a>
            </div>
        </li>

    }
    <a href='@Url.Action("Create", "Bookings")' class="list-group-item list-group-item-action list-group-item-success">

        Add a new showing

    </a>
</ul>

Answer 2

Since you are already including the navigation properties in your model, you could just change the displayed properties:

<b>Movie:</b>@Html.DisplayFor(modelItem => item.Showing.Name)<br />
<b>Venue:</b>@Html.DisplayFor(modelItem => item.Showing.Name)<br />

Where .Name is the actual property that holds the value, you want to show.

But, as a rule you do not want to pass your whole entities down to your view, ever. A better practice is to create a view model class and only select the properties you need:

public class BookingViewModel
{
    public int BookingId { get; set; }
    public string CustomerReference { get; set; }
    public string Venue { get; set; }
    public string Movie { get; set; }
    public DateTime ShowingDateTime { get; set; }
}

// GET: Bookings
public ActionResult Index()
{
    var bookings = db.Bookings
                     .Include(b => b.Member)
                     .Include(b => b.Showing)
                         .ThenInclude(sh => sh.Movie)
                         .ThenInclude(sh => sh.Venue)
                     .Select(x => new BookingViewModel {
                        BookingId = x.BookingId,
                        CustomerReference = x.CustomerReference,
                        Venue = x.Showing.Venue.VenueName,
                        Movie = x.Showing.Movie.MovieName,
                        ShowingDateTime = x.Showing.ShowingDateTime
                     })
                     .ToList()
    return View(bookings);
}

Then you just need to update your view model declaration and properties to fit:

@model IEnumerable<MovieClubSite.Models.BookingViewModel>