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>

MVC CheckBox更改事件

1 个答案: