Javascript @Html.DropDownListFor（）始终显示为空，即使选择了列表项

我正在修一门多视距课程

其中的一部分是返回要保存在数据库中的输入值的表单

无论选择了“Html.DropDownListFor”中的哪个选项，它都显示为空白，提交表单会将所选值保存到数据库中，并且一旦选择了值，验证消息将停止显示，但下拉列表始终显示为空白

提前感谢你的帮助

表格的代码：

@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")
}

型号代码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; }



}
}

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));
        }
    }
}

---

找到解决方案：Site.css包含

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

填充项导致此问题

/*__________________________________________________________________________*/
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;
}

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