Populating Dropdown in ASP.net Core

Question

Does anyone know how to deal with Dropdowns in Asp.net core. I think I made myself very complicated to understand the new Asp.net core concept. (I am new to Asp.net Core).

I have models called Driver, Vehicle. Basically one can create bunch of vehicles in the master then attach it to the Driver. So that the driver will be associated with a vehicle.

My problem is that I am also using viewmodel in some area to combine two different models.(understood little from default template)

My problem is I have no idea what is the next step since ASP.net Core is very latest, there are not a lot of tutorials and Q/As available.

Driver Model

public class Driver
{
    [Required]
    public int Id { get; set; }

    [Required]
    public string ApplicationUserId { get; set; }

    [Required]
    public int VehicleId { get; set; }

    [Required]
    public string Status { get; set; }


    public virtual ApplicationUser ApplicationUser { get; set; }
    public virtual Vehicle Vehicle { get; set; }
}

Vehicle Model

public class Vehicle
{

    [Required]
    public int Id { get; set; }

    [Required]
    public string Make { get; set; }
    public string Model { get; set; }

    [Required]
    public string PlateNo { get; set; }
    public string InsuranceNo { get; set; }

}

ViewModel of Driver

    public class DriverViewModel
{
    [Required]
    [Display(Name = "ID")]
    public int ID { get; set; }

    [Required]
    [Display(Name = "User ID")]
    public string ApplicationUserId { get; set; }

    [Required]
    [Display(Name = "Vehicle ID")]
    public IEnumerable<Vehicle> VehicleId { get; set; }
    //public string VehicleId { get; set; }

    [Required]
    [Display(Name = "Status")]
    public string Status { get; set; }


}

Here is my View

<div class="col-md-10">
   @*<input asp-for="VehicleId" class="form-control" />*@
   @Html.DropDownList("VehicleId", null, htmlAttributes: new { @class = "form-control"})
   <span asp-validation-for="VehicleId" class="text-danger" />
</div>

Solution 1

Looking at the documentation it appears that asp.net core may be moving away from HTML helpers and towards the use of tag helpers. The following link should help

https://docs.asp.net/en/latest/mvc/views/working-with-forms.html#the-select-tag-helper

specifically

@model CountryViewModel

<form asp-controller="Home" asp-action="Index" method="post">
<select asp-for="Country" asp-items="Model.Countries"></select> 
<br /><button type="submit">Register</button>
</form>

Note the use of "asp-for" which references the Model attribute to bind and the use of "asp-items" which references the model attribute source for the List of Select List items and how it is applied to the select tag

The sample model used in the documentation is referenced below for completeness

namespace FormsTagHelper.ViewModels
{
public class CountryViewModel
{
    public string Country { get; set; }

    public List<SelectListItem> Countries { get; } = new List<SelectListItem>
    {
        new SelectListItem { Value = "MX", Text = "Mexico" },
        new SelectListItem { Value = "CA", Text = "Canada" },
        new SelectListItem { Value = "US", Text = "USA"  },
    };
}
}

Solution 2

Driver Controller

public class DriverController : Controller
{
    private readonly ApplicationDBContext _context;

    public DriverController(ApplicationDBContext context)
    {
        _context = context;
    }

    // GET: Driver/Create
    public IActionResult Create()
    {
        ViewData["VehicleId"] = new SelectList(_context.Vehicle, "Id", "PlateNo");
        return View();
    }
}

Driver View

@model DriverViewModel
<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="VehicleId" class="control-label"></label>
        <select asp-for="VehicleId" class ="form-control" asp-items="ViewBag.VehicleId"></select>
    </div>
</form>

Comments

[Thomas Glaser]

This might just be an ASP.NET Core / Razor Page thing, but this only worked once I added [BindProperty] to Country.

[jamheadart]

Warning to all! At some point I ended up with the select element having a self-closed tag e.g. <select asp-for="Item" asp-items="Model.Items" /> instead of </select> (I think because I'd converted from Input which allows self-closing) - this caused total confusion for about 30 minutes, because it simply doesn't work, but I didn't see any warnings.

[orgg]

@jamheadart I did the exact same thing and then read this comment.... Thanks ha