präsentieren eine Multi-Select-Liste als toggleuttons in asp mvc

Question

Ich erstelle ein Formular, wo der Benutzer n Tage aus einer Liste der Wochentage auswählen wird.

Beispiel - denken Sie an eine Mehrfachauswahlliste mit den folgenden Werten: Montag, Dienstag, Mittwoch, Donnerstag, Freitag und der Benutzer wählt Dienstag und Donnerstag.

Also, auf meine Aktion ich eine Auswahlliste mit dem Namen der Wochentage und eine ID für jeden von ihnen erstellen und an die View in den ViewData übergeben.

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

auf meine Aktion habe ich so etwas wie dies die Wochentage zu präsentieren:

<% 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") %>" /> 
<% } %> 

und die Seite hat das folgende Skript das Aussehen und fiel von einem Toggle-Button zu erstellen:

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

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

mit einigen CSS-Magie für die Klassen toggleOn und toggleOff dies wird eine Umschaltknopfliste für den Benutzer präsentieren.

Mein Problem ist, wie die vom Benutzer ausgewählten Tage zurück an den Controller zu buchen?

Answer 1

Nun, ich war in der Lage, die Lösung selbst zu finden.

In der Ansicht habe ich das Tag durch zwei Eingänge, eine Taste und einen versteckten Eingang ersetzt.

<% 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" /> 
<% } %> 

und nutzte die jquery die den verborgenen Eingabewert einzustellen, wenn jemand den Knopf drücken:

$('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'); 
    } 
});