View

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new {id = "registration"}))
{
    @Html.ValidationSummary(excludePropertyErrors: true)

    <fieldset>
        <legend>Registration</legend>
        <p>
            @Html.LabelFor(m => m.SelectedHmc, @Resources.RegistrationHmc)
            @Html.DropDownListFor(x => x.SelectedHmc, Model.HmcList)
        </p>
        <p>
            @Html.LabelFor(m => m.SelectedCity, @Resources.RegistrationCity)
            @Html.DropDownListFor(m => m.SelectedCity, Model.CityList, new {onchange = "FetchStreets();"})
        </p>

        <p>
            @Html.LabelFor(m => m.SelectedStreet, @Resources.RegistrationStreet)
            @Html.DropDownListFor(m => m.SelectedStreet, Model.StreetList, new {onchange = "FetchHouses();", @data_bind = "options: StreetList, optionsText: 'Name', optionsValue: 'Id', optionsCaption: 'Select...'"})
        </p>
        <p>
            @Html.LabelFor(m => m.SelectedHouse, @Resources.RegistrationHouse)
            @Html.DropDownListFor(m => m.SelectedHouse, Model.HouseList, new { @data_bind="options: HouseList, optionsText: 'Number', optionsValue: 'Id'"})
        </p>
        <p>
            @Html.LabelFor(m => m.AppartmentNumber, @Resources.RegistrationAppartmentNumber, new {@class = "registration-label-input"})
            @Html.TextBoxFor(m => m.AppartmentNumber)
        </p>
        <p>
            @Html.LabelFor(m => m.Email, @Resources.RegistrationEmail, new {@class = "registration-label-input"})
            @Html.TextBoxFor(m => m.Email)
        </p>
        <p>
            @Html.LabelFor(m => m.PhoneNumber, @Resources.RegistrationPhoneNumber, new {@class = "registration-label-input"})
            @Html.TextBoxFor(m => m.PhoneNumber)
        </p>
        <p>
            @Html.LabelFor(m => m.Password, @Resources.RegistrationPassword, new {@class = "registration-label-input"})
            @Html.PasswordFor(m => m.Password)
        </p>
        <p>
            @Html.LabelFor(m => m.ConfirmPassword, @Resources.RegistrationConfirmPassword, new {@class = "registration-label-input"})
            @Html.PasswordFor(m => m.ConfirmPassword)
        </p>
        <label>&nbsp; </label>
        <input type="submit" value='@Resources.RegistrationButton' />
    </fieldset>
}

<script type='text/javascript'>

    function CascadingDdLViewModel() {
        this.StreetList = ko.observableArray([]);
        this.HouseList = ko.observableArray([]);
    }

    var objVM = new CascadingDdLViewModel();
    ko.applyBindings(objVM);

    function FetchStreets() {
        objVM.HouseList([]);
        objVM.StreetList([]);
        var cityCode = $("#SelectedCity").val();
        $.getJSON("/Account/GetStreets/" + cityCode, null, function(data) {
            objVM.StreetList(data);
        });

    }

    function FetchHouses() {
        var streetCode = $("#SelectedStreet").val();
        $.getJSON("/Account/GetHouses/" + streetCode, null, function(data) {
            objVM.HouseList(data);
        });
    }

</script>