javascript - @Html.DropDownListFor() 即使选择了列表项也始终显示空白

Question

我正在学习 Pluralsight 类(class) https://app.pluralsight.com/library/courses/full-stack-dot-net-developer-fundamentals/table-of-contents

其中一部分是一个表单，它返回输入的值以保存在数据库中。

Form Image

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

预先感谢您的帮助。

表单的 Razor 代码:

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

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

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

CSS 代码(还有 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

找到的解决方案:Site.css 包含

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

填充条目导致此问题。