Using DropDown Menu Selection

Question

I am new to MVC Core, and I wanted to do an example of DropDown List coming from the Database using ViewModel.

my example is:

Table ( Car ): with CarId,CarName,CarBrand. [FK(ColorId), FK(UserID)] Table ( Color ): with ColorId, Color

 public class Car
{
    [Key]
    public int CarId { get; set; }
    [Required]
    public string CarBrand { get; set; }
    [Required]
    public string CarName { get; set; }


    //--------Foreign[ColorID]--------Foreign[UserId]--------------------------------
    // Foreign key to customer
    public virtual Color Color { get; set; }    // Dropdown List 

    public ApplicationUser ApplicationUser { get; set; }   // Logged in UserId

}

    public class Color
{
    [Key]
    public int ColorId { get; set; }
    [Required]
    public string ColorName { get; set; }
}

in the database save few colors: 1=Red, 2=Yellow, 3=Green

and this my View

@model DropDownListOtherModel.Models.Car
<div ">
    <div class="form">
        <form class="Car-form" method="Post" asp-controller="Car" asp-action="Save">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                @*<label asp-for="FullName"></label>*@
                <input asp-for="CarBrand" placeholder=" Car Brand" />
                <span asp-validation-for="CarBrand" class="text-danger"></span>
            </div>

            <div class="form-group">
                @*<label asp-for="FullName"></label>*@
                <input asp-for="CarName" placeholder=" Car Name" />
                <span asp-validation-for="CarName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label for="cars">Choose a Color:</label>
                <br />
                <select name="cars" id="cars" asp-for="Color">
                    <option value="1">RED</option>
                    <option value="2">YELLOW</option>
                    <option value="3">GREEN</option>
                    <option value="4">BLACK</option>
                    <option value="5">WHITE</option>
                </select>
            </div>

            <button class="btn btn-success" type="submit">submist</button>

        </form>
    </div>
</div>

and in my View I should be showing the Form with 2 input CarName, CarBrand, and 3 Dropdown color, and when I save, it should be attached with the form.

First how should I display color in Select list, second, should I update the Save method, to include colorID?

Answer 1

You can try this way,

Model:

  public class CarColorViewModel
    {
        
        public String CarName { get; set; }
        public List<Color> colors { get; set; }
    }

Controller:

 public IActionResult LoadDropDownFromDatabase()
        {
         // Get your database value here, then bind to list I am  binding here a seed value.
            var color = new List<Color>()
            {
                new Color(){ ColorName = "Select Color",ColorId =1},
                new Color(){ ColorName = "Red",ColorId =2},
                new Color(){ ColorName = "Blue",ColorId =3},
                new Color(){ ColorName = "Green",ColorId =4}

            };
            var model = new CarColorViewModel();
            model.colors = color;


            return View(model);
        }

View:

@model CarColorViewModel

@{ ViewBag.Title = " "; }

<h2>Load DropDown From Backend</h2>

@using (Html.BeginForm("LoadDropDownFromDatabase", "StackOverFlow"))
{
   
  
    <table class="table table-sm table-bordered table-striped">
        <tr><th>Car Name </th><td > @Html.TextBoxFor(r => Model.CarName, new { @class = "form-control" })</td></tr>
        <tr><th>Select Color</th><td> @Html.DropDownListFor(m => m.colors, new SelectList(Model.colors, "ColorId", "ColorName"), new { @class = "form-control" })</tr>
    </table>
  
   
    <input id="Button" type="submit" value="Submit" />

}

Output:

Hope this would help you to achieve your goal.

Answer 2

add ColorId to a Car class

 public class Car
{
    [Key]
    public int CarId { get; set; }
    [Required]
    public string CarBrand { get; set; }
    [Required]
    public string CarName { get; set; }

    public int ColorId { get; set; }  
   [ForeignKey(nameof(ColorId))]
    [InverseProperty("Cars")]
    public virtual Color Color { get; set; }    

    public ApplicationUser ApplicationUser { get; set; }   // Logged in UserId

}

  public class Color
{
    [Key]
    public int ColorId { get; set; }
    [Required]
    public string ColorName { get; set; }

  [InverseProperty(nameof(Car.Color))]
   public virtual ICollection<Car> Cars{ get; set; }    

}

remove id and name from select

<select  asp-for="ColorId">
 <option value="0">Select Color</option>
 <option value="1">RED</option>
  <option value="2">YELLOW</option>
   <option value="3">GREEN</option>
    <option value="4">BLACK</option>
   <option value="5">WHITE</option>
</select>

action

[HttpPost]
public ActionResult Create(Car car)
{
....your code
}