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

Posted 2023-04-01

【中文标题】.NET MVC 使用模型属性更新视图

【英文标题】：.NET MVC Updating the View with a model property

【发布时间】：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 事件中）。但是提交按钮是一个选项，因为没有其他简单的方法可以解决这个问题

【参考方案1】：

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

使用正常电流DropDownListFor 除了输出完整的价目表以隐藏输入值。值，例如：'10.0;12.0;...'，每个值都可以通过简单的 JavaScript 程序获取，选项索引作为您应该获取的值的标记。

构造一个新的MyDropDownListFor，它将作为当前的，但不仅仅是构造普通的<option>..，它还将向该html标签添加价格或您想要的任何其他参数它也显示出来。示例：HereHereHere

无论您采用何种解决方案，都必须结合支持简单的 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>