Index.cshtml

@using CascadingSelectBoxesSample.Models

<script>
    function onValueChanged(e) {
        let citySelectBox = $("#citySelectBox").dxSelectBox("instance");
        let dataSource = citySelectBox.getDataSource();
        dataSource.filter("StateID", "=", e.value);
        dataSource.load();
        citySelectBox.option("value", null);
    }
    function onFieldDataChanged(e) {
        if (e.dataField === "StateID") {
            let cityEditor = e.component.getEditor("CityID");
            let dataSource = cityEditor.getDataSource();
            dataSource.filter(["StateID", "=", e.value]);
            dataSource.load();
            e.component.updateData("CityID", null);
        }
    }
</script>
<div class="dx-viewport demo-container">
    <div class="dx-fieldset" style="width:50%">
        <div class="dx-fieldset-header">Standalone editors</div>
        <div class="dx-field">
            <div class="dx-field-label">State</div>
            <div class="dx-field-value">
                @(Html.DevExtreme().SelectBox()
                .DisplayExpr("Name")
                .ValueExpr("ID")
                .DataSource(State.States, "ID")
                .ShowClearButton(true)
                .OnValueChanged("onValueChanged"))
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">City</div>
            <div class="dx-field-value">
                @(Html.DevExtreme().SelectBox().ID("citySelectBox")
                .DisplayExpr("Name")
                .ValueExpr("ID")
                .DataSource(City.Cities, "ID"))
            </div>
        </div>
        <div class="dx-fieldset-header">In Form</div>
        <div class="dx-field">
            @(Html.DevExtreme().Form<Address>()
                .FormData(Address.Empty)
                .OnFieldDataChanged("onFieldDataChanged")
                .Items(items => {
                    // State item
                    items.AddSimpleFor(i => i.StateID)
                    .Label(l => l.Text("State"))
                    .Editor(e =>
                        e.SelectBox()
                        .DataSource(State.States, "ID")
                        .DisplayExpr("Name")
                        .ValueExpr("ID")
                        .ShowClearButton(true)
                    );
                    // City item
                    items.AddSimpleFor(i => i.CityID)
                    .Label(l => l.Text("City"))
                    .Editor(e =>
                        e.SelectBox()
                        .DataSource(City.Cities, "ID")
                        .DisplayExpr("Name")
                        .ValueExpr("ID")
                    );
                })
             )
        </div>
    </div>
</div>