2012-08-31 14 views
6

私はビューモデルとチェックボックスでさまざまな投稿を読んできましたが、私の脳はロックアップし始めています。正しい方向に少し押す必要があります。ビューモデルのList <int>プロパティにチェックボックスをバインドするにはどうすればよいですか?

ここに私の単純化されたビューモデルがあります。リストに値を設定する必要があるチェックボックスがあります。私はこれが自動的に起こるとは思わない。私は文字列値の配列とリストの間のギャップを正しく埋める方法がわかりません。提案?

public int AlertId { get; set; } 

public List<int> UserChannelIds { get; set; } 

public List<int> SharedChannelIds { get; set; } 

public List<int> SelectedDays { get; set; } 

答えて

5

今、あなたのメインのViewModelがあなたのGETアクションで今すぐこの

public class AlertViewModel 
{ 
    public int AlertId { get; set; } 
    public List<ChannelViewModel> UserChannelIds { get; set; }  
    //Other Properties also her 

    public AlertViewModel() 
    { 
    UserChannelIds=new List<ChannelViewModel>();  
    } 

} 

のようになりますチェックボックス項目に

public class ChannelViewModel 
{ 
    public string Name { set;get;} 
    public int Id { set;get;} 
    public bool IsSelected { set;get;} 
} 

を表現するために、このようなあなたのビューモデルを持って、あなたが記入しますViewModelの値を取得してビューに送信します。

public ActionResult AddAlert() 
{ 
    var vm = new ChannelViewModel(); 

    //The below code is hardcoded for demo. you mat replace with DB data. 
    vm.UserChannelIds.Add(new ChannelViewModel{ Name = "Test1" , Id=1}); 
    vm.UserChannelIds.Add(new ChannelViewModel{ Name = "Test2", Id=2 }); 

    return View(vm); 
} 

ここでEditorTemplateを作成しましょう。 Views/YourControllerNameに移動し、クレタ島「EditorTemplate」と呼ばれるフォルダとプロパティ名のと同じ名前でそこに新しいビューを作成します(ChannelViewModel.cshtml

あなたの新しいエディタテンプレートROこのコードを追加します。自分のメインビューで今すぐ

@model ChannelViewModel 
<p> 
    <b>@Model.Name</b> : 
    @Html.CheckBoxFor(x => x.IsSelected) <br /> 
    @Html.HiddenFor(x=>x.Id) 
</p> 

EditorFor Htmlのヘルパーメソッドを使用して、エディタのテンプレートを呼び出します。フォームを投稿する際

@model AlertViewModel 
<h2>AddTag</h2> 
@using (Html.BeginForm()) 
{ 
    <div> 
     @Html.LabelFor(m => m.AlertId) 
     @Html.TextBoxFor(m => m.AlertId) 
    </div>  
    <div> 
     @Html.EditorFor(m=>m.UserChannelIds)   
    </div>  
    <input type="submit" value="Submit" /> 
} 

は今、あなたのモデルは、選択したチェックボックスがIsSelectedプロパティのTrue値を持つことになるUserChannelIdsコレクションを持っています。マイビューモデルの

[HttpPost] 
public ActionResult AddAlert(AlertViewModel model) 
{ 
    if(ModelState.IsValid) 
    { 
     //Check for model.UserChannelIds collection and Each items 
     // IsSelected property value. 
     //Save and Redirect(PRG pattern) 
    } 
    return View(model); 
} 
+0

投稿いただきありがとうございます。私はまだ少し混乱しています。いくつかのチェックボックスをビューモデルにマッピングするために3つのクラスと3つのエディタテンプレートを追加するのは過度のようです。これは最も簡単な方法ですか? –

+0

3つのクラスと3つのエディタテンプレートはどこですか?私は2つのクラスと1つのエディタテンプレートを参照してください – Shyju

+0

私は3つのリストのプロパティを持っているので、あなたのソリューションを使用するには3つのクラスと3つの編集テンプレートが必要と思った。それは間違っていますか? –

2

パート:

@using AlertsProcessor 
@using WngAlertingPortal.Code 
@model List<int> 
@{ 
    var sChannels = new List<uv_SharedChannels>(); 
    Utility.LoadSharedChannels(sChannels); 
} 

<p><strong>Shared Channels:</strong></p> 
<ul class="channel-list"> 
@{ 
    foreach (var c in sChannels) 
    { 
     string chk = (Model.Contains(c.SharedChannelId)) ? "checked=\"checked\"" : ""; 

     <li><input type="checkbox" name="SharedChannelIds" value="@c.SharedChannelId" @chk /> @c.Description (@c.Channel)</li> 
    } 
} 

public List<int> UserChannelIds { get; set; } 

public List<int> SharedChannelIds { get; set; } 

public List<int> Weekdays { get; set; } 

public MyViewModel() 
{ 
    UserChannelIds = new List<int>(); 
    SharedChannelIds = new List<int>(); 
    Weekdays = new List<int>(); 
} 

は、私は(私はこの時点でエディタテンプレートについては知りませんでした)私の再利用可能なチェックボックスを表示する部分のビューを使用しました

3つのチェックボックスの部分表示はすべて同じです。チェックボックスの値は整数なので、ビューモデルのリスト名とチェックボックスの名前を並べることで、バインディングが機能します。

私はint値で作業しているので、チェックボックスを表すために余分なクラスが必要なように感じません。チェックされたチェックボックスだけが送信されるので、チェックされていることを確認する必要はありません。私は送られた値がほしいだけです。リストをコンストラクタで初期化することによって、null例外を回避する必要があります。

これは、他の解決策より優れているか、悪化しているか、それとも優れていますか?他のソリューション(余分なクラスを含む)はベストプラクティスですか?

以下の記事は、私には便利だった:

http://forums.asp.net/t/1779915.aspx/1?Checkbox+in+MVC3

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

1

ビューモデルとの結合リスト

このサイトは

https://www.exceptionnotfound.net/simple-checkboxlist-in-asp-net-mvc/

非常にうまくそれを処理します

enter image description here

public class AddMovieVM 
{ 
    [DisplayName("Title: ")] 
    public string Title { get; set; } 

public List<CheckBoxListItem> Genres { get; set; } 

public AddMovieVM() 
{ 
    Genres = new List<CheckBoxListItem>(); 
} 
} 
+1

この回答は素晴らしいです!それがこの作業の鍵となるエディタテンプレートも含めることにします。 –

関連する問題