3
我通過Pluralsight當然 https://app.pluralsight.com/library/courses/full-stack-dot-net-developer-fundamentals/table-of-contents@ 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")
}
代碼控制器：
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; }
}
}
代碼視圖模型：
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;
}