Dropdown not populating with ajax C# / ASP.NET MVC

Question

I am trying to populate a dropdown inside a modal however my dropdown is not populating and I am not sure why. I have provided my code below. I have tried the url as InspectionController and Inspection but I am not getting any results.

I have referred to dropdown menu populate another c# mvc json ajax but am slightly more confused

Model: Auto generated model from T4 Templates

public IDBSet<TradePartner> TradePartners { get; set; }

View Model:

public class TradePartnerViewModel
{
    public int Id {get; set;}
    ...
    public string ConstructionPhase{get;set;}
    ...
}

View:

<td class="moveTo" style="padding: 0" ng-hide="printMode">
    <div class="dropdown pull-right">
        <a class="btn btn-sm btn-link" data-toggle="dropdown">
            <b>move to</b>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li>
                @if (appName.Contains("ABC"))
                {
                    <a class="btn btn-sm btn-link" data-toggle="modal" data-target="#modalEmailItem"><b>Email Item</b></a>
                }
            </li>
        </ul>
        <div id="modalEmailItem" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title" style="text-align-last: center">Email Item</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <form id="myForm">
                                <label for="ConstructionPhaseDropdown">ConstructionPhase</label>
                                <select class="form-control" id="ConstructionPhaseDropdown" name="ConstructionPhaseDropdown"></select>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</td>

               
<script type="text/javascript">
    $(document).ready(function () {
        $("#ConstructionPhaseDropdown").change(function () {
            $.ajax({
                type: 'GET',
                contentType: "application/json; charset=utf-8",
                data: {},
                url: "/Inspection/TradePartner/",
                success: function (data) {
                    var a = '<option value="-1">Please select an item</option>';
                    for (var i = 0; i < data.length; i++) {
                        a += '<option value="-1"' + data[i].ConstructionPhase + '">' + '</option>'
                    }
                    $("#ConstructionPhaseDropdown").html(a);
                },
                error: function (a, jqXHR, exception) { }
            });
        });
    });
</script>

Controller Method:

public class InspectionController : Controller
{
    public ActionResult TradePartner()
    {
        return Json(db.TradePartners.Select(x => new
        {
            ConstructionPhase = x.ConstructionPhase
        }).ToList(), JsonRequestBehavior.ALlowGet);
    }
}

Answer 1

The AJAX operation happens when you change the drop-down value:

$("#ConstructionPhaseDropdown").change(function () {
    // populate the drop-down
});

But you can't change the drop-down value because it has no values:

<select class="form-control" id="ConstructionPhaseDropdown" name="ConstructionPhaseDropdown"></select>

So you can never invoke the operation to populate the drop-down.

It sounds like you want to populate it when the page loads:

$(document).ready(function () {
    $.ajax({
        // your current AJAX code
    });
});

Basically remove the change handler that's wrapping the whole thing, since you can't change the value yet.