MVC CheckBox更改事件

Question

我是MVC的新手,所以我认为我需要指出正确的方向.

我的模型中有一个布尔值,它在我的视图中使用以下方法创建一个复选框:

@Html.EditorFor(model => model.Adults)

我还有一个下拉框,显示ViewBag中的内容.我想根据该复选框的条件显示不同的ViewBag集.

我可以通过在我的html中使用Razor语法检查我的mode.Adults变量来做到这一点,但这只能在我的编辑页面上工作,而不能在创建页面上工作.此外,当我点击复选框时它将无法工作(我需要在下拉列表中重新加载新值).

我希望避免使用jQuery回发到服务器,而是在客户端进行.但是,如果这是唯一的方法,那么有人可以帮忙解决这个问题.

Answer 1

我希望避免使用jQuery回发到服务器,而是在客户端进行.

您可以将2个列表直接序列化到视图中.然后订阅.change复选框的事件并切换下拉值:

<script type="text/javascript">
    // This assumes that ViewBag.List1 and ViewBag.List2 are IEnumerable<SelectListItem>
    var list1 = @Html.Raw(ViewBag.List1);
    var list2 = @Html.Raw(ViewBag.List2);

    $(function() {
        $('#Adults').change(function() {
            var checked = $(this).is(':checked');
            setDropDownValues(checked);
        });
    });

    function setDropDownValues(checked) {
        var dropDown = $('#id_of_your_drop_down');
        dropDown.empty();
        var list = checked ? list1 : list2;
        $.each(list, function() {
            dropDown.append('<option/>', {
                value: this.Value,
                html: this.Text
            });
        });
    }
</script>