.NET MVC使用模型属性更新视图

Question

我使用本文中描述的方法来创建下拉列表。

该模型

public class IceCreamFlavor
{
    public int Id { get; set; }
    public string Name { get; set; }
}

视图模型

public class ViewModel
{
    private readonly List<IceCreamFlavor> _flavors;

    [Display(Name = "Favorite Flavor")]
    public int SelectedFlavorId { get; set; }

    public IEnumerable<SelectListItem> FlavorItems
    {
        get { return new SelectList(_flavors, "Id", "Name");}
    }
}

风景

@Html.LabelFor(m=>m.SelectedFlavorId)
@Html.DropDownListFor(m => m.SelectedFlavorId, Model.FlavorItems)
@Html.ValidationMessageFor(m=>m.SelectedFlavorId)
<input type="submit" value="Submit" /> 

这种方法很好。

现在我想在同一视图上显示Model的属性。 举个例子，假设我们有以下属性。

public class IceCreamFlavor
{
    public int Id { get; set; }
    public string Name { get; set; }
    public float Price { get; set; }
}

现在在Dropdown下面我需要显示价格

价格：15.99

我怎样才能做到这一点？

Answer 1

要在提交后从模型中渲染属性，您可以闯入HTML以显示它：

@if (Model.Price != 0.0F)
{
    <b>Price @Model.Price.ToString("0.00") </b>
}

为此，请在ViewModel上添加一个集合：

public class ViewModel
{
       private readonly System.Collections.Generic.List<IceCreamFlavor> _flavors;

        public ViewModel()
        {
         // Construct Flavors
        }

        public List<IceCreamFlavor> AllFlavors
        {
            get
            {
                return _flavors;    
            }
        }

        [Display(Name = "Favorite Flavor")]
        public int SelectedFlavorId { get; set; }

        public System.Web.Mvc.SelectList FlavorItems
        {
            get { return new System.Web.Mvc.SelectList(_flavors, "Id", "Name");}
        }
    }

然后在视图上：

@if (Model.AllFlavors.Any(f => f.Id == Model.SelectedFlavorId))
{
<b>Price @Model.AllFlavors.First(f => f.Id == Model.SelectedFlavorId).Price.ToString("0.00") </b>
}

当然，您可以将选定的Flavor作为ViewModel上的属性公开（类似的显示原理适用）。 但是，将所有Flavors作为属性公开的优点是，您可以轻松地将其存储在页面上的JavaScript中并查询，而不是依赖于提交按钮。

然后，您可以使用JavaScript / JQuery滚动自己的下拉onchange事件，以从该页面上存储的对象中读取。 （或者使用AJAX调用另一个动作来根据需要返回值..）

---

不暴露所有口味的解决方案是：

ViewModel属性：

    public IceCreamFlavor SelectedFlavor
    {
        get 
        {
            return _flavors.FirstOrDefault(f => f.Id == this.SelectedFlavorId);
        }
    }

在视图上显示：

   @if (Model.SelectedFlavor != null)
   {
    <b>Price @Model.SelectedFlavor.Price.ToString("0.00") </b>
   }

Answer 2

我宁愿选择另一个解决方案，因为为每个选定的输入触发ajax是无用的和消耗的。

1. 使用正常的当前DropDownListFor 以及输出完整的价格表来隐藏输入值。 值例如： '10.0;12.0;...' ，每个值都可以通过简单的JavaScript过程使用选项索引作为您应该采用的值的标记。

2. 构造一个新的MyDropDownListFor ，它将作为当前的但不仅仅构建普通的<option>..它还将为该html标签添加价格或您希望它显示的任何其他参数。 例子： 这里 这里 这里

无论您采用何种解决方案，都必须结合支持简单的JavaScript方法，然后呈现已经下载的选择和显示价格。