この質問の続き: ドロップダウン リストからのユーザーの選択に基づいて値を計算し、その値をフォーム変数/モデル プロパティに入れたい場合、どうすればよいですか?
2 に答える
実際、ASP.NET MVC開発者にアドバイスが1つあれば、ビューモデルを使用し、ViewBag/ViewDataを忘れてください。ケースの99%で、それが彼の質問/問題の解決策です。
ドロップダウンリストを適切に表現できるようにする最小限のビューモデルは次のとおりです。
public class MyViewModel
{
// a scalar property on the view model to hold the selected value
[DisplayName("item")]
[Required]
public string ItemId { get; set; }
// a collection to represent the list of available options
// in the drop down
public IEnumerable<SelectListItem> Items { get; set; }
... and some other properties that your view might require
}
次に、このビューモデルにデータを入力してビューに渡すコントローラーアクションを作成します。
public ActionResult Index()
{
var model = new MyViewModel
{
// TODO: those values probably come from your database or something
Items = new[]
{
new SelectListItem { Value = "1", Text = "item 1" },
new SelectListItem { Value = "2", Text = "item 2" },
new SelectListItem { Value = "3", Text = "item 3" },
}
};
return View(model);
}
次に、フォームとドロップダウンリストを含むことができるこのビューモデルに対応する強く型付けされたビューを持つことができます。
@model MyViewModel
@using (Html.BeginForm())
{
@Html.LabelFor(x => x.ItemId)
@Html.DropDownListFor(x => x.ItemId, Model.Items, "--Select One--")
<button type="submit">OK</button>
}
最後に、このフォームが送信されるコントローラーで対応するアクションを実行し、その中でドロップダウンリストから選択した値を取得できます。
[HttpPost]
public ActionResult Index(MyViewModel model)
{
// model.ItemId will contain the selected value from the dropdown list
...
}
(前の質問からの情報) ドロップダウンで選択されたアイテムに基づいて ajax を使用してアイテム価格データを取得し、それを通常の形式の投稿の一部としてアクション メソッドに送信したいと思います。
Step1)製品の ViewModel を作成します。
public class ProductViewModel
{
public string SelectedItemId { get; set; }
public IEnumerable<SelectListItem> Items { get; set; }
public decimal ItemPrice { set; get; }
}
Step2)このような製品コントローラーを作成します
public class ProductController : Controller
{
public ActionResult Index()
{
var objProduct = new ProductViewModel();
objProduct.Items = new[]
{
new SelectListItem { Value = "1", Text = "Perfume" },
new SelectListItem { Value = "3", Text = "Shoe" },
new SelectListItem { Value = "3", Text = "Shirt" }
};
return View(objProduct);
}
[HttpPost]
public ActionResult Index(ProductViewModel objProduct)
{
//Validate and Save to DB and do whatever
return View(objProduct);
}
public string GetPrice(int itemId)
{
decimal itemPrice = 0.0M;
//using the Id, get the price of the product from your data layer and set that to itemPrice variable.
itemPrice = 23.57M;
return itemPrice.ToString();
}
}
ステップ 3)厳密に型指定されたビューを追加する
@model MvcApplication1.Models.ProductViewModel
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
@using (Html.BeginForm())
{
@Html.DropDownListFor(x => x.SelectedItemId, Model.Items, "Select..")
<div id="divItemPrice"> </div>
@Html.HiddenFor(x=>x.ItemPrice)
<button type="submit">Save</button>
}
<script type="text/javascript">
$(function(){
$("#SelectedItemId").change(function(){
var val=$(this).val();
console.debug(val);
$.get("@Url.Action("GetPrice","Product")", { itemId : val },function(data){
$("#ItemPrice").val(data);
$("#divItemPrice").html(data);
});
});
});
</script>
ドロップダウンで選択したアイテムを変更すると、jQuery ajax を使用して GetPrice アクション メソッドが呼び出され、データが取得されます。div に表示し、ItemPrice の HiddenField の値として設定します。
フォームを投稿すると、投稿された ViewModel に表示されます。
お役に立てれば。