@model Cars.Web_New.Models.DropDownViewModel


@{
    ViewBag.Title = "Home Page";
}

<h4>Make</h4>

@using (Ajax.BeginForm("SelectMake", "Home", new AjaxOptions()
{
    HttpMethod = "POST",
    UpdateTargetId = "models",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "UpdateModelsHiddenForms('SelectedMakeId', 'makes-input')"

}, new { id = "make-dropdown" }))
{
    @Html.DropDownListFor(
            m => m.SelectedMakeId,
            new SelectList(Model.Makes, "Id", "Name"),
                new { id = "makes-input" }
        )
}

<div id="models"></div>
<div id="years"></div>

@using (Html.BeginForm("Submit", "Home", FormMethod.Post))
{

    <p>@Model.SelectedModelId</p>
    <p>@Model.SelectedCarYearId</p>
    <p>@Model.SelectedMakeId</p>


    @Html.HiddenFor(m => m.SelectedCarYearId)
    @Html.HiddenFor(m => m.SelectedModelId)
    @Html.HiddenFor(m => m.SelectedMakeId)



    <input type="submit" value="submit dropdowns" , class="btn btn-default" />
}


@section Scripts{
    <script>
        $("#makes-input").change(function () {
            $("#make-dropdown").submit();
        });

        function UpdateModelsHiddenForms(target, selection) {
            var selectedMakeId = $('#' + selection + ' :selected').val();
            $("#" + target).val(selectedMakeId);
        }

    </script>
}