【问题标题】:ASP.NET MVC 4 ViewModel with DropDownList data带有 DropDownList 数据的 ASP.NET MVC 4 ViewModel
【发布时间】:2013-02-01 20:56:23
【问题描述】:

我正在使用@html.EditorFor 在编辑模式下渲染我的模型,但没有渲染下拉列表。

这是我的 ViewModel:

     public class RiskAutoViewModel
     {
       public RiskAutoViewModel()
       {
         VehicleMakeList = new SelectList(new List<VehicleMake>() { new VehicleMake() { Id = 1, Name = "Renault" }, new VehicleMake() { Id = 2, Name = "Peugeot" } });
       }


    public int NoClaimsDegree { get; set; }

    public int VehicleValue { get; set; }

    public int EngineCapacity { get; set; }

    public int VehicleMake { get; set; }

    public SelectList VehicleMakeList { get; set; }
  }

VehicleMake 被渲染为 文本框VehicleMakeList 根本不被渲染。我想要的是呈现一个包含VehicleMake 列表的下拉列表,并将其值设置为VehicleMake 之一。

保存模型时,VehicleMake 应设置为列表中所选项目的值。

我该怎么做?

编辑

由于我无法在下面的评论框中输入任何代码,我将在这里写一个跟进。

我最终创建了一个 EditorTemplate,例如:

<div class="editor-label">
    @Html.LabelFor(model => model.VehicleMakeList)
</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.VehicleMake, Model.VehicleMakeList)
    @Html.ValidationMessageFor(model => model.VehicleMake)
</div>

现在我的 ViewModel 看起来像这样:

[Required]
[ScaffoldColumn(false)]
public int VehicleMake { get; set; }

[Display(Name = "Marque", Prompt = "Marque", Description = "Renseigne la marque du véhicule")]
public SelectList VehicleMakeList { get; set; }

现在这将我引向另一个问题(也许我应该在不同的线程中),但实际上我在该视图中有两个下拉菜单。第二个下拉列表中的项目基本上是动态的,它们取决于第一个下拉列表中选择的项目。使用 AJAX 很容易做到这一点,但使用 MVC 我迷路了。人们通常是怎么做的?

【问题讨论】:

  • 提醒您,如果您决定使用@Html.DropDownlistFor 跟随@Html.EditorFor(),您将遇到将VehicleMake 属性与下拉选择绑定的问题,因为它是值将由 EditorFor() 重新定义的文本框确定
  • 用最简单的解决方案编辑了我的答案

标签: asp.net asp.net-mvc asp.net-mvc-4 html-select


【解决方案1】:

不幸的是,模板编辑器中没有内置对下拉列表的支持。您可以编写自己的编辑器模板,也可以在视图中使用 html 辅助方法 @Html.DropDownListFor()

如果您愿意,Darin Dimitrov 对this question 的回答可以引导您完成为下拉列表构建编辑器模板的过程。

让这个工作的最快方法是在你的视图中这样做:

@Html.EditorFor(model => model.NoClaimsDegree)
@Html.EditorFor( model => model.VehicleValue )
@Html.EditorFor( model => model.EngineCapacity )
@Html.DropDownListFor( model => model.VehicleMake, Model.VehicleMakeList, "Select a make" )

【讨论】:

  • 我最终在 EditorTemplate 中做了类似的事情(为什么我不能在这个评论框中输入代码,这很烦人......)
    @Html.LabelFor( model => model.VehicleMakeList)
    @Html.DropDownListFor(model => model.VehicleMake, Model.VehicleMakeList) @Html.ValidationMessageFor(model => model.VehicleMake)
【解决方案2】:

我认为下拉列表的模型应该是:

public List<System.Web.Mvc.SelectListItem> VehicleMakeList {get; set;}

并像这样初始化:

VehicleMakeList = new List<System.Web.Mvc.SelectListItem>() 
{ 
   new SelectListItem { Value = "1", Text = "Renault" }, 
   new SelectListItem { Value = "2", Text = "Peugeot" } 
};

或使用数据源:

    VehicleMakeList = db.VehicleMakers /*EF, LINQ2SQL, ADO.NET or any supported external source*/
       .Select(v=> new SelectListItem { Text = v.Name, Value = v.Id})
       .ToList();

查看:

@Html.DropDownListFor(model => model.VehicleMake, Model.VehicleMakeList)

【讨论】:

  • 这是否意味着我必须对 selectlistitem 的值进行硬编码?
  • 不,您可以从任何来源填充值。这只是为了简洁。
【解决方案3】:

在 MVC 中绑定下拉列表非常棘手 您可以在控制器中执行此操作,将所有城市列表放入 viewBag 中

创建

      ViewBag.CityId = new SelectList(db.Cities, "ID", "Name");

user.CityID 如果您在编辑中,则在编辑时选择城市

      ViewBag.CityId = new SelectList(db.Cities, "ID", "Name", user.CityID);

在你的视图中做这个技巧

     @Html.DropDownList("CityId", "Select")

这是我知道的最简单的方法....

【讨论】:

  • 通常不推荐使用 viewbag 存储方法,尤其是对于 model 数据。这些应该从 model 封装到 viewmodel 中。
  • 我的评论的 point,将 Dropdowns 与“模型”演示文稿分开很麻烦,这不会产生长期的良好结果.. 制作一个 ViewModel 并封装列表,然后部分视图更新以更改“逐步”规则。对“Partials”使用相同的规则,然后细化您在部分中的其他选择。 stackoverflow.com/questions/9517627/…
【解决方案4】:

绑定下拉列表很容易。代码如下

public ActionResult BindWithModel()
{
    List<SelectListItem> items = new List<SelectListItem>();

    items.Add(new SelectListItem 
                { Text = "Select Category", Value = "0", 
                        Selected = true });
    items.Add(new SelectListItem
                { Text = "Beverages", Value = "1" });
    items.Add(new SelectListItem
                { Text = "Condiments", Value = "2" });
    items.Add(new SelectListItem
                { Text = "Confections", Value = "3" });
    items.Add(new SelectListItem
                { Text = "Dairy Products", Value = "4" });
    items.Add(new SelectListItem
                { Text = "Grains/Cereals", Value = "5" });
    items.Add(new SelectListItem
                { Text = "Meat/Poultry", Value = "6" });
    items.Add(new SelectListItem
                { Text = "Produce", Value = "7" });
    items.Add(new SelectListItem
                { Text = "Seafood", Value = "8" });

    var model = new CategoryModel()
    {
        lstCategory = items,
        selected = 1
    };

    return View(model);
}

查看代码

@model BindMvcDropdownList.Models.CategoryModel

<h1>Bind MVC DropDownList with Model</h1>

@Html.DropDownListFor(x => x.selected, Model.lstCategory)

代码取自这里http://dotnetmentors.com/mvc/how-to-bind-dropdownlist-in-asp-net-mvc-application.aspx

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-07-17
    • 1970-01-01
    • 2012-12-14
    • 1970-01-01
    • 1970-01-01
    • 2016-09-06
    • 2013-08-03
    相关资源
    最近更新 更多