2011-04-14 13 views
19

私はいくつかのオプション(支払い方法の現金、クレジットカードなど)を取得し、これらをラジオボタンにバインドしたいと考えています。私はMVC 3にRadioButtonListがないと信じています。強く型付けされたRadioButtonlist

またラジオがバインドされると、回答を編集中に以前に選択したオプションをユーザに表示したいと思います。

+0

のhttp:/ /jonlanceley.blogspot.com/2011/06/mvc3-radiobuttonlist-helper.html – Jon

答えて

37

いつものようにあなたがモデルで始まる:

public enum PaiementMethod 
{ 
    Cash, 
    CreditCard, 
} 

public class MyViewModel 
{ 
    public PaiementMethod PaiementMethod { get; set; } 
} 

コントローラ:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new MyViewModel(); 
     return View(model); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return View(model); 
    } 
} 

し、最終的にビュー:

@model MyViewModel 
@using (Html.BeginForm()) 
{ 
    <label for="paiement_cash">Cash</label> 
    @Html.RadioButtonFor(x => x.PaiementMethod, "Cash", new { id = "paiement_cash" }) 

    <label for="paiement_cc">Credit card</label> 
    @Html.RadioButtonFor(x => x.PaiementMethod, "CreditCard", new { id = "paiement_cc" }) 

    <input type="submit" value="OK" /> 
} 

そして、あなたはいくつかのより一般的な解決策が必要な場合これをヘルパーにカプセル化すると、following answerが役に立ちます。

+3

私の要件は、ラジオボタンをデータベース値からバインドし、テキスト/値のペアをラジオボタンに割り当てて割り当てられるようにすることですModelのプロパティに追加します。 – Vivek

+0

非常に良い仕事! – Funky

+0

完璧!しばらくの間これを探していた – bcahill

0

あなたはViewModelににSelectListのにあなたのオプションを結合しなければならないと私はRadioButtonListsをバインドしたいとどのようにこれは、以前に選択したオプション

4

のための真に属性を選択したセット。ビューモデルには、厳密に型指定されたオブジェクトのコレクションがあります。たとえば、PaymentOptionsがコード表である可能性があります。コレクションに加えて、SelectedPaymentOptionKey(または主キーの前にIDを付ける場合はSelected * Id)があります。最初はこのキーはデフォルト値0になりますが、ポストバック時には選択した項目の値が保持されます。そして、ビューの

public class PaymentSelectionVM 
{ 
    public ICollection<PaymentOption> PaymentOptions { get; set; } 
    public int SelectedPaymentOptionKey { get; set; } 
} 

public ViewResult PaymentSelection() 
{ 
    var paymentOptions = db.PaymentOptions.ToList(); 
    return View(
    new PaymentSelectionVM { 
     PaymentOptions = paymentOptions, 

     //This is not required, but shows how to default the selected radiobutton 
     //Perhaps you have a relationship between a Customer and PaymentOption already, 
     //SelectedPaymentOptionKey = someCustomer.LastPaymentOptionUsed.PaymentOptionKey 
     // or maybe just grab the first one(note this would NullReferenceException on empty collection) 
     //SelectedPaymentOptionKey = paymentOptions.FirstOrDefault().PaymentOptionKey 
    }); 
} 

は:

@foreach (var opt in Model.PaymentOptions) 
{   
    @*Any other HTML here that you want for displaying labels or styling*@ 
    @Html.RadioButtonFor(m => m.SelectedPaymentOptionKey, opt.PaymentOptionKey) 
} 

m.SelectedPaymentOptionKeyには2つの目的があります。まず、ラジオボタンをグループ化して、選択肢が相互に排他的なものになるようにします(FireBugのようなものを使用して、独自の理解を確認することをお勧めします)。あなたのビューの行動を予測することは、最終的には難しいことではありません。ここではほとんど魔法はありません。)次に、ポストバック時に選択した項目の値を保持します。

は、最後にポストハンドラで、私たちは可能なSelectedPaymentOptionKeyを持っている:

[HttpPost] 
public ActionResult PaymentSelection(PaymentSelectionVM vm) 
{ 
    currentOrder.PaymentOption = db.PaymentOptions.Find(vm.SelectedPaymentOptionKey); 
    .... 
} 

SelectListItemsを使用しての上にこの方法の利点はあなたがグリッドを表示している場合、オブジェクトのプロパティのより多くのへのアクセスを持っています/オブジェクトの多くの値を表示する必要があります。私はまた、いくつかの他のアプローチが持っているように、HTMLヘルパーで渡されるハードコード化された文字列がないことが好きです。

不利な点は、すべて同じIDを持つラジオボタンを取得することです。これは実際には良いことではありません。これは、簡単にこれに変更することで固定されている:

@Html.RadioButtonFor(m => m.SelectedPaymentOptionKey, opt.PaymentOptionKey, new { id = "PaymentOptions_" + opt.PaymentOptionKey}) 

は最後に、検証は私が見てきたラジオボタンの技術のほとんどすべてと少し風変わりです。私が本当に必要な場合は、ラジオボタンがクリックされるたびに非表示のSelectedPaymentOptionsKeyを設定するjqueryを接続し、非表示フィールドに[Required]またはその他の検証を配置します。

検証問題の別の回避策 ASP.NET MVC 3 unobtrusive validation and radio buttons

これは有望に見えるが、私はそれをテストする機会がなかった。 役立つかもしれない私のブログにHTMLヘルパーがありhttp://memoriesdotnet.blogspot.com/2011/11/mvc-3-radiobuttonlist-including.html

関連する問題