Question

我正在创建一个表单，用户将从工作日列表中选择n天。

示例 - 考虑具有以下值的多选列表：星期一，星期二，星期三，星期四，星期五，用户将选择星期二和星期四。

因此，在我的操作中，我创建了一个选择列表，其中包含工作日的名称和每个工作日的ID，并将其传递给ViewData中的View。

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

关于我的行动我有这样的事情来呈现工作日：

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

对于类toggleOn和toggleOff使用一些css魔法，这将向用户显示切换按钮列表。

我的问题是如何将用户选择的日期回发给控制器？

Answer 1

好吧，我能够自己找到解决方案。

在视图上我用两个输入，一个按钮和一个隐藏输入替换了标签。

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

在asp mvc中提供多选列表作为togglebuttons

1 个答案: