@model VirtualTask.Models.Cascading

@{
    Layout = null;
}

<script src="~/assets/js/jquery.min.js"></script>

<h2>Cascading Dropdownlist</h2>
<table>
    <tr>
        <td>
            <label>Clienti</label>
        </td>
        <td>
            @Html.DropDownListFor(x => x.ancodice, Model.Clienti, "--Select--", new { @id="ddlClienti"});
        </td>
    </tr>
    <tr>
        <td>
            <label>Impianti</label>
        </td>
        <td id="District">
            @Html.DropDownListFor(x => x.imcodimp, new List<SelectListItem>(), "--Select--", new { @id="ddlImpianti"});
        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () {
        $('#ddlClienti').change(function () {
            $.ajax({
                type: "post",
                url: "/CommesseVT/Cascading",
                data: { ancodice: $('#ddlClienti').val() },
                datatype: "json",
                traditional: true,
                success: function (states) {

                    //alert(states.length);
                    //alert(JSON.stringify(states));

                    var district = "<select id='ddlImpianti' class='form-control'>";
                    district = district + '<option value="">--Seleziona--</option>';
                    for (var i = 0; i < states.length; i++) {
                        district = district + '<option value="' + states[i].value + '">' + states[i].text + '</option>';
                        //alert(states[i].text);
                        //alert(states[i].value);
                        //alert(district);
                    }

                    district = district + '</select>';
                    alert(district);
                    $('#District').html(district);
                }
            });
        });
    });
</script>