使用下拉菜单选择

Question

我是 MVC Core 的新手，我想使用 ViewModel 做一个来自数据库的下拉列表示例。

我的例子是：

Table ( Car ): CarId,CarName,CarBrand。 [FK(ColorId), FK(UserID)] Table（颜色）：使用 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; }
}

在数据库中保存几种颜色：1=红色，2=黄色，3=绿色

这是我的观点

@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>

在我的视图中，我应该显示带有 2 个输入 CarName、CarBrand 和 3 种下拉菜单颜色的表单，当我保存时，它应该附在表单上。

首先我应该如何在 Select 列表中显示颜色，其次，我是否应该更新 Save 方法以包含 colorID？

Answer 1

将 ColorId 添加到汽车 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; }    

}

从 select

中删除 ID 和名称

<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>

动作

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

Answer 2

你可以这样试试，

型号：

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

控制器：

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

查看：

@model CarColorViewModel

@{ ViewBag.Title = " "; }

<h2>Load DropDown From Backend</h2>

@using (Html.BeginForm("LoadDropDownFromDatabase", "Whosebug"))
{
   
  
    <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" />

}

输出：

希望这能帮助您实现目标。

使用下拉菜单选择

Using DropDown Menu Selection

c#

asp.net-core-mvc

asp.net-core