ドロップダウンからフォーム値を入力するにはどうすればよいですか？

Question

フォローオンthis question：ドロップダウンリストからユーザーの選択に基づいて値を計算し、その値をフォーム変数/モデルプロパティに入れる場合、どうすればよいですか？

Answer 1

ASP.NET MVC開発者には、というビューモデルを使用し、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); 
} 

フォームとドロップダウンリストを含むことができる、このビューモデルに対応する強く型付けされたビューを持つことができます。

、あなたはこのフォームが送信されますし、その内側にドロップダウンリストから選択した値を取得することができるようになりますあなたのコントローラに対応するアクション可能性があり、最終的：

[HttpPost] 
public ActionResult Index(MyViewModel model) 
{ 
    // model.ItemId will contain the selected value from the dropdown list 
    ... 
} 

Answer 2

を私はから（情報を推測します前の質問）、ドロップダウンで選択した項目に基づいてajaxを使用してItem Priceデータを取得し、通常のフォーム投稿の一部としてアクションメソッドに送信したいとします。

手順1）製品のViewModelを作成します。

public class ProductViewModel 
{ 
    public string SelectedItemId { get; set; } 
    public IEnumerable<SelectListItem> Items { get; set; } 
    public decimal ItemPrice { set; get; } 
} 

ステップ2）ドロップで選択した項目を変更するとは強く型付けされたビュー

@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> 

を追加）この

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のような製品のコントローラを作成します。ダウン、jQueryのajaxを使用して、GetPriceアクションメソッドを呼び出して、データを取得します。 divに表示し、ItemPriceのHiddenFieldの値として設定します。

フォームを投稿すると、投稿されたViewModelにそのフォームが表示されます。

これが役に立ちます。