.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方法，然后呈現已經下載的選擇和顯示價格。