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

【问题标题】：.NET MVC Updating the View with a model property.NET MVC 使用模型属性更新视图
【发布时间】：2016-05-08 13:26:09
【问题描述】：

我使用this article 中描述的方法来创建下拉菜单。

模型

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

这种方法效果很好。

现在我想在同一个视图上显示模型的属性。例如，假设我们具有以下属性。

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

现在我需要在下拉列表下方显示价格

价格：15.99

我怎样才能做到这一点？

【问题讨论】：

您将需要 ajax 来调用服务器方法，该方法根据所选选项返回价格并更新 DOM
@Stephen Muecke：是的，我知道这个选项。但我想知道是否有更好的选择，因为这是一个非常常见的用户场景。
您只是想在提交后显示模型外的值吗？
将所有 IceCreamFlavor 的集合传递给视图并存储在 javascript 数组中的另一种替代方法，然后根据所选选项查找数组并获取值（节省制作ajax 调用，但意味着您在原始页面加载中加载更多数据）
最好在提交之前（即在 DropDown Change 事件中）。但是提交按钮是一个选项，因为没有其他简单的方法可以解决这个问题

标签： c# .net asp.net-mvc model-view-controller razor

【解决方案1】：

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

使用正常电流DropDownListFor 除了输出完整的价目表以隐藏输入值。值，例如：'10.0;12.0;...'，每个值都可以通过简单的 JavaScript 程序获取，选项索引作为您应该获取的值的标记。
构造一个新的MyDropDownListFor，它将作为当前的，但不仅仅是构造普通的<option>..，它还将向该html标签添加价格或您想要的任何其他参数它也显示出来。示例：Here Here Here

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

【讨论】：

OP 正在询问 MVC 特定选项。他知道基于 javascript 的解决方案。
他从来没有说过，我已经再次检查以确保。
查看他的第二条评论。

【解决方案2】：

要在提交后从模型中渲染一个属性，你可以直接分解成 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>
   }

【讨论】：