在ASP.NET MVC 4中填充和选择下拉列表值

Question

ASP.NET MVC中的下拉列表让我感到困惑.我有一个模特课.模型类有一个名为SelectedValue的字符串.此字符串表示先前选择的值.我收集了一些我从数据库中提取的项目.集合中的每个项目都有一个ID和一个Name值.我的问题是,我不知道将这些信息输入UI的推荐方法是什么.

我不确定是否应该使用ViewBag或Model.一旦价值存在,我甚至不确定填充UI的最佳方式是什么.我见过HTML助手和使用RAZOR语法的人.我很困惑.人们推荐什么？

谢谢

Answer 1

这是我怎么做的,假设你有2个型号Team and Player:

Player.cs

public class Player
{
    [HiddenInput(DisplayValue = false)]
    [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int Id { get; set; }        

    [Required]
    [ForeignKey("Team")]
    [Display(Name = "Team")]
    public int TeamId { get; set; }        

    [Display(Name = "First name")]
    public string FirstName { get; set; }

    [Display(Name = "Last name")]
    public string LastName { get; set; }

    public virtual Team Team { get; set; }        
}

Team.cs

 public class Team
{
    [Key]
    [HiddenInput(DisplayValue = false)]
    public int TeamId { get; set; }

    [Display(Name = "Full Name:")]
    public string Name { get; set; }        

    public virtual ICollection<Player> Players { get; set; }
}

然后在你的PlayerController中: 注意:团队需要存在来创建一个玩家

    private void PopulateTeamsDropDownList(object selectedTeams = null)
    {
        var teamsQuery = from d in _dataSource.Teams
                         orderby d.Name
                         select d;
        ViewBag.TeamID = new SelectList(teamsQuery, "TeamId", "Name", selectedTeams);
    }

    [HttpGet]
    public ActionResult Create()
    {
        PopulateTeamsDropDownList();
        return View();
    }

    [HttpPost]
    public ActionResult Create(Player model)
    {
        if (ModelState.IsValid)
        {
            using (EFootballDb db = new EFootballDb())
            {
                try
                {
                    var player = new Player
                                     {
                                         FirstName = model.FirstName,
                                         LastName = model.LastName
                                     };
                    db.Players.Add(player);
                    db.SaveChanges();
                    return RedirectToAction("About", "Home");
                }
                catch (Exception)
                {
                    ModelState.AddModelError("", "Unable to save changes. Try again, and if the problem persists, see your system administrator.");
                }
            }
        }
        PopulateTeamsDropDownList(model.TeamId);
        return View(model);
    }

最后,您的播放器创建视图将如下所示:

@{
ViewBag.Title = "Create";
 }

<h2>Create</h2>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>Player</legend>

    <div class="editor-label">
            @Html.LabelFor(model => model.TeamId, "Pick Your Team")
    </div>
    <div class="editor-field">
        @Html.DropDownList("TeamId", String.Empty)
        @Html.ValidationMessageFor(model => model.TeamId)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.FirstName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FirstName)
        @Html.ValidationMessageFor(model => model.FirstName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.LastName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.LastName)
        @Html.ValidationMessageFor(model => model.LastName)
    </div>        

    <p>
        <input type="submit" value="Create" />
    </p>
  </fieldset>
 }

 <div>
     @Html.ActionLink("Back to List", "Index")
 </div>

 @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 2

我这样做的方法是将下拉列表作为我的ViewModel的一部分......说它是Products ....所以在我的ViewModel中我有一个

public SelectList Products { get; set;}
public int ProductId { get; set; }  // For the the selected Product

因此,当View加载,并且我填充模型以返回到控制器中的视图时,我执行以下操作:

model.Products = new SelectList(MyEnumerableofProducts, "ValueField", "TextField", {value of the selected item in the dropdown, as a string)

在我看来,我会:

@Html.DropDownListFor(model => model.ProductId, Model.Products, "Please Select")



return View(model)