は、asp mvcのトグルボタンとして複数選択リストを表示します

Question

私は週のリストからn日を選択するフォームを作成しています。

例 - 月曜日、火曜日、水曜日、木曜日、金曜日の値を持つ複数の選択リストを考えると、ユーザーは火曜日と木曜日を選択します。

私のアクションでは、それぞれの日の名前とIDを持つ選択リストを作成し、それをViewData内のViewに渡します。

<% using (Html.BeginForm()) { %> 
    <% foreach (var day in (SelectList)ViewData["WeekDays"]) {%> 
     <a id="<%= day.Value %>" title="<%= day.Text %>" class="toggleOff"> 
      <%= day.Text %> 
     </a> 
    <% } %> 

    <input type="submit" value="<%= Html.Resource("Continue") %>" /> 
<% } %> 

とページが外観を作成するには、次のスクリプトを持っており、トグルボタンの落ちた：

$(document).ready(function() { 
    $('a.toggleOff').click(function() { 
     $(this).toggleClass("toggleOn"); 
    }); 

    $('a.toggleOn').click(function() { 
     $(this).toggleClass("toggleOff"); 
    }); 
} 

私は平日提示するには、このような何かを持っている私の行動に関する

ViewData["WeekDays"] = new SelectList(weeklist, "Id", "Name"); 

toggleOnクラスとtoggleOffクラスのいくつかのCSSマジックでは、ユーザーにトグルボタンリストが表示されます。

私の問題は、ユーザーが選択した日をコントローラにポストバックする方法です。

Answer 1

私は自分で解決策を見つけられました。

ビューでは、タグを2つの入力、ボタンと非表示の入力に置き換えました。

<% foreach (SelectListItem day in (SelectList)ViewData["WeekDays"]) {%> 
    <input id="SelectedDays_<%= day.Value %>_" name="SelectedDays[<%= day.Value %>]" type="button" value="<%= day.Text %>" class="toggleOff" /> 
    <input id="SelectedDays_<%= day.Value %>_Hidden" name="SelectedDays[<%= day.Value %>]" type="hidden" value="false" /> 
<% } %> 

そして、誰かがボタンを押したときに非表示の入力値を設定するためにjqueryのを使用：

$('input.toggleOff').click(function() { 
    var id = '#' + $(this).attr('id') + 'Hidden'; 
    $(this).toggleClass("toggleOn"); 

    if ($(id).attr('value') == "false") { 
     $(id).attr('value', 'true'); 
    } else { 
     $(id).attr('value', 'false'); 
    } 
});