@Html.DropDownListFor() Always Displays Blank even with a List Item selected

Question

I'm working through a Pluralsight course https://app.pluralsight.com/library/courses/full-stack-dot-net-developer-fundamentals/table-of-contents

Part of this is a form which returns entered values to be saved in the database.

Form Image

No matter which option in the "Html.DropDownListFor" is selected it shows as blank, submitting the form saves the selected value to the database fine, and once a value is chosen the validation message stops showing, but the dropdown is always showing as blank.

Thanks in advance for your help.

Razor Code for Form:

@model GigHub.Web.ViewModels.GigFormViewModel
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Add a Gig</h2>

@using (Html.BeginForm("Create", "Gigs"))
{
    @Html.AntiForgeryToken()
    <p class="alert alert-info">All fields are <strong>required</strong></p>
    <div class="form-group">
        @Html.LabelFor(m => m.Venue)
        @Html.TextBoxFor(m => m.Venue, new { @class = "form-control", autofocus = "autofocus" })
        @Html.ValidationMessageFor(m => m.Venue)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Date)
        @Html.TextBoxFor(m => m.Date, new { @class = "form-control", placeholder = "eg: 1 Jan 2017" })
        @Html.ValidationMessageFor(m => m.Date)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Time)
        @Html.TextBoxFor(m => m.Time, new { @class = "form-control", placeholder = "eg: 13:55" })
        @Html.ValidationMessageFor(m => m.Time)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Genre)
        @* Parameter after new SelectList(Model.Genres, "Id", "Name") & before new { @class = "form-control" } is for default choice,
            passing null leaves list as it should be, passing empty string adds a blank item to choose from.  *@
        @Html.DropDownListFor(m => m.Genre, new SelectList(Model.Genres, "Id", "Name"), "---Select One---", new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Genre)
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
}
@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

Code for Controller:

using GigHub.Web.Models;
using GigHub.Web.ViewModels;
using Microsoft.AspNet.Identity;
using System;
using System.Linq;
using System.Web.Mvc;

namespace GigHub.Web.Controllers
{
    public class GigsController : Controller
    {

        private readonly ApplicationDbContext _context;

        public GigsController()
        {
            _context = new ApplicationDbContext();
        }

        [Authorize]
        public ActionResult Create()
        {
            var viewModel = new GigFormViewModel
            {
                Genres = _context.Genres.ToList()           

             };           
            return View(viewModel);
        }

        [Authorize]
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(GigFormViewModel viewModel)
        {
            if (!ModelState.IsValid)
            {
                viewModel.Genres = _context.Genres.ToList();
                return View("Create", viewModel);

            }



            var gig = new Gig
            {
                ArtistId = User.Identity.GetUserId(),
                DateTime = viewModel.GetDateTime(),
                GenreId = viewModel.Genre,
                Venue = viewModel.Venue
            };

            _context.Gigs.Add(gig);
            _context.SaveChanges();


            return RedirectToAction("Index", "Home");
        }
    }
}

Model Code Genre.cs & Gig.cs:

using System.ComponentModel.DataAnnotations;

namespace GigHub.Web.Models
{
    public class Genre
    {
        public byte Id { get; set; }

        [Required]
        [StringLength(255)]
        public string Name { get; set; }
    }
}

using System;
using System.ComponentModel.DataAnnotations;

namespace GigHub.Web.Models
{
    public class Gig
    {
        public int Id { get; set; }


        public ApplicationUser Artist { get; set; }

        [Required]


 public string ArtistId { get; set; }

    public DateTime DateTime { get; set; }

    [Required]
    [StringLength(255)]
    public string Venue { get; set; }

    [Required]
    public byte GenreId { get; set; }

    public Genre Genre { get; set; }



}
}

Code for ViewModel:

using GigHub.Web.Models;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace GigHub.Web.ViewModels
{
    public class GigFormViewModel
    {
        [Required]
        public string Venue { get; set; }

        [Required]
        [FutureDate]
        public string Date { get; set; }

        [Required]
        [ValidTime]
        public string Time { get; set; }

        [Required]
        public byte Genre { get; set; }


        public IEnumerable<Genre> Genres { get; set; }


        public DateTime GetDateTime()
        {
            return DateTime.Parse(string.Format("{0} {1}", Date, Time));
        }
    }
}

CSS Code(also bootstrap.css:

/*__________________________________________________________________________*/
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
/*_____________________Other Overrides_____________________________________*/
span.field-validation-error {
    color: red;
    font-weight: bold;
}

/*_____________________BootStrap Overrides_________________________________*/

.navbar-inverse {
    background-color: #f44;
    border-color: #f44;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}

.navbar-inverse .navbar-brand {
    color: #fff;
}
.navbar-brand {
    font-weight: 700;
}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    background-color: rgba(205,40,40,0.55);
}

.dropdown-menu{
    -webkit-box-shadow:none;
    box-shadow:none;

}
.navbar-inverse .navbar-nav > .dropdown > a .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
}

body {
    font-size: 17px;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.form-group {
    margin-bottom: 20px;
}
.form-control {
    font-size: 17px;
    padding: 20px 15px;
    -ms-border-radius: 9px;
    border-radius: 9px;
}
.form-control:focus {
    border-color: #2196f3;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.btn {
    padding: 7px 20px;
    font-size: 17px;
    -ms-border-radius: 9px;
    border-radius: 9px;
}

Answer 1

Solution found: Site.css contains

.form-control {
    font-size: 17px;
    padding: 20px 15px;
    -ms-border-radius: 9px;
    border-radius: 9px;
}

The padding entry is causing this issue.