Cascading population of a mvc dropdown

Question

I have 2 DropDowns in an MVC application. Trying to populate the second one based on the first one's chosen value (Cascading).. Since I am rather new to MVC this is giving me a little problem.. This is how ot looks in my View..

I am getting the data based on the selection in the first DropDown

This is the JS code for retriving the data..

<script type="text/javascript">

        $('#AllShips').change(function () {
            var selectedShip = $("#AllShips").val();
            console.log(selectedShip);
            var arrivalSelect = $('#AllShipArrivals');
            arrivalSelect.empty();
            if (selectedShip != null && selectedShip != '') {
                $.getJSON('@Url.Action("GetArrivals")', { ShipID: selectedShip }, function (arrivals) {
                    console.log(arrivals);
                    if (arrivals != null && !jQuery.isEmptyObject(arrivals))
                    {
                        arrivalSelect.append($('<option/>', {
                            value: null,
                            text: ""
                        }));
                        $.each(arrivals, function (index, arrival) {
                            console.log(arrival.Value);
                            console.log(arrival.Text);
                            arrivalSelect.append($('<option/>', {
                                value: arrival.Value,
                                text: arrival.Text
                            }));
                        });
                    };
                });
            }
        });

Here is my HTML

<div class="col-lg-2 form-group">
                            @Html.LabelFor(model => model.AllShips, htmlAttributes: new { @class = "control-label col-md-12" })
                            <div class="col-md-12">
                                @if (Model.AllShips != null)
                                {
                                    @Html.DropDownListFor(model => model.ShipID, Model.AllShips, new { @class = "form-control", id = "AllShips" })
                                    @Html.ValidationMessageFor(model => model.ShipID, "", new { @class = "text-danger" })
                                }
                            </div>
                        </div>
                        <div class="col-lg-2 form-group">
                            @Html.LabelFor(model => model.AllShipArrivals, htmlAttributes: new { @class = "control-label col-md-12" })
                            <div class="col-md-12">
                                @if (Model.AllShipArrivals != null)
                                {
                                    @Html.DropDownListFor(model => model.ArrivalId, Model.AllShipArrivals, new { @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.ArrivalId, "", new { @class = "text-danger" })
                                }
                                else
                                { @Html.DropDownListFor(model => model.ArrivalId, null, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.ArrivalId, "", new { @class = "text-danger" })}
                            </div>
                        </div>

Still the second DropDown is not changing (initially I populate it with a list of all Arrivals, yes I know..not a good option)

Any idea what I am doing wrong here??

Answer 1

Thanks for the HTML , it is what I suspected. In your JS your are referencing 2nd DDL by var arrivalSelect = $('#AllShipArrivals'); but there is no such element (it is, but this is just a label), instead you should use:

var arrivalSelect = $('#ArrivalId');

Answer 2

edited try making the value to be empty string rather than null

emptyStr="";

arrivalSelect.append('<option value="${emptyStr}"> ${emptyStr} </option>'); arrivalSelect.append('<option value="${arrival.Value}"> ${arrival.Text} </option>');

Answer 3

Make 'PartialView' or 'ViewComponent' for the second Dropdown, do ajax call on changing selection in the first dropdown, choose data depending on the value you passed during the ajax call, pass the data into your partial view and return it. Something like

public IActionResult SecondDropdownPartial(int selectedShip)
{
    var data = GetSomeData(selectedShip);
    return Partial("ViewName", data);
}

In js 'success' you get your view in response. Replace it on the page with

$('#container').html(response);

for example. More information : Rendering Partial Views using ajax