MVC 5 Scaffolds Do Not Release Bootstrap Classes for Base Data Derived from EF

Question

Firstly, I am new to MVC and ASP.NET, so I apologize if I am missing something simple.

I am working on the first MVC 5 application for code, for brevity I will say that I have two models, such as:

public class Platform { [Key] public int Id { get; set; } [Required(ErrorMessage = "You must select a manufacturer")] [DisplayName("Manufacturer")] public int ManufacturerId { get; set; } public virtual Manufacturer Manufacturer { get; set; } [Required(ErrorMessage="You must enter a name for the platform")] [StringLength(50, ErrorMessage="Reduce length to 50 characters or less")] public string Name { get; set; } } 

and

 public class Manufacturer { [Key] public int Id { get; set; } [Required(ErrorMessage="You must enter a name for the manufacturer")] [StringLength(50, ErrorMessage="Reduce length to 50 characters or less")] public string Name { get; set; } public virtual ICollection<Platform> Platforms { get; set; } } 

When creating the "MVC 5 Controller with views using the Entity Framework" for these models, all CRUD actions work correctly. Form elements, on the other hand, are unformatted, lacking the form-control class that Bootstrap wants.

I can get around this for each type by adding an EditorTemplate to it with something like @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "form-control" }) , but certainly scaffolding for Bootstrap MVC 5 project should already emit valid code? Looking at the various MVC 5 tutorials, they seem to work correctly with the right style, so I'm a bit confused about what I'm doing wrong.

For reference, the output in the Create.cshtml file for each model (tied to important form elements for short):

 <div class="form-group"> @Html.LabelFor(model => model.ManufacturerId, "ManufacturerId", new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownList("ManufacturerId", String.Empty) @Html.ValidationMessageFor(model => model.ManufacturerId) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> </div> 

and

 <div class="form-group"> @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> </div> 

Why is ManufacturerId indicated as shortcut text for the drop-down list when DisplayName set in the model?

Why did you choose using DropDownList() instead of the strongly typed DropDownListFor() ?

Thanks in advance.

Answer 1

It looks like you did what I did - upgrade Bootstrap 2.x to 3.0 or 3.0.1. Microsoft project templates are based on Bootstrap 2.x not 3.x. You can read about how others stumble on GitHub .

I also received a response from Rick Anderson of Microsoft, who wrote several lessons on www.asp.net, and he confirmed that ...

Great catch. In fact, some of the images in my tutorial are in beta and RC, which use bootstrap v2 rather than V3, so our images will be different. Look at the opinions of your account controller to see "form-control". You can download my complete project and compare it with your project.

As for your other question, I came across the same problem and think it might be a mistake. Some annotations seem to be ignored. Try adding the [ForeignKey ()] annotation to Platform.ManufacturerId and see if it affects the field label.

Answer 2

It looks like MVC 5.1 will have a workaround for the form management issue with Bootstrap 3, as mentioned here . It will be possible to use styles for the editor.