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);
    }
}

Why are you doing this?: location.reload(); Doesn't that reload the page and lose anything you've done? (In this case before you've even done it.) — David
– David, Commented Sep 30, 2020 at 15:04
@David My bad, I have been staring at this all day and forgot to remove that when posting to SO. It was something that I was trying. — DotNetFullStack
– DotNetFullStack, Commented Sep 30, 2020 at 15:11
@DotNetFullStack: From the code posted, it was the problem. Now that you've solved the problem it's time to re-test. Does it still fail? When you debug, how specifically does it fail? In the browser's debugging tools, are there any errors at all on the console? In the network tab, is the AJAX request made? What is the server's response? When you debug the success function with the browser's script debugger, what specifically happens? — David
– David, Commented Sep 30, 2020 at 15:12
@DotNetFullStack: please proceed as David suggests. It's the proper way to debug such issues — Stefan
– Stefan, Commented Sep 30, 2020 at 15:17

David · Accepted Answer · 2020-09-30 15:28:53Z

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.

answered Sep 30, 2020 at 15:28

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DotNetFullStack Over a year ago

Hi @David, Thank you the handler seems to be my issue. Could I place the ajax call inside a function rather than when the page loads? I believe that I would want to get the data when the user opens the modal (Please let me know if this is a wrong approach). What would I need to add to call a function from the select tag?

David Over a year ago

@DotNetFullStack: If it should happen when the modal opens then you'll need to find what event is exposed for that. This looks like a bootstrap modal? If so they may expose events you can use. It depends on the bootstrap version and how you're using it I imagine. Though from a UX perspective, unless the result of the AJAX request is expected to be different when the modal opens, populating it on page load would mean it's already populated by the time the user sees it, so less waiting for the user.

DotNetFullStack Over a year ago

Sounds good, I will opt for the lesser wait time. Thank you for taking the time to help me, and I really appreciate the extra knowledge. I am now able to move past this hurdle and have a deeper understanding of the mistakes that I made. I hope you have an awesome day dude.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related