How to populate <select> using ajax in asp.net core mvc

Question

I want to populate #2 by using onchange event of #1 and using ajax to call action in controller but it returns 'undefined'.

I tried JsonResultBehavior.AllowGet but it is deprecated in asp.net core

VIEW:

<div class="col-md-4" style="padding-bottom: 1em;">
    <label for="ddlCorporateName">Corporate Name
    </label>
    <select id="ddlCorporateName" class="form-control" required></select>
</div>

AJAX/jquery:

<script type = "text/javascript">
    function GetSelectedStatus(ddlStatus) {
        var id = ddlStatus.options[ddlStatus.selectedIndex].innerHTML;
        var selectedValue = ddlStatus.value;

        //window.location.href = '@Url.Action("PopulateCorporateName", 
        "POMultipleApprovalSummary") / ' + id;
        $(function() {
            var ddlCorporateName = $("#ddlCorporateName");
            ddlCorporateName.empty().append('<option selected="selected" 
            value = "0"
            disabled = "disabled" > Loading..... < /option>');
            $.ajax({
                type: "POST",
                url: '@Url.Action("PopulateCorporateName", "POMultipleApprovalSummary") / ' + id,
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(reponse) {
                    ddlCorporateName.empty().append('<option 
                            selected = "selected"
                            value = "0" > Select All < /option>');
                            $.each(reponse, function() {
                                ddlCorporateName.append('<option selected="selected" 
                                    value = "' +  this.CorporateName + '" > ' + this.CorporateName  + '</option>');
                            });
                        },
                        failure: function(response) {
                            alert(response.responseText);
                        },
                        error: function(response) {
                            alert(response.responseText);
                        }
                });
        });
}
</script>

CONTROLLER:

[HttpPost][Produces("application/json")]
public JsonResult PopulateCorporateName(string id) {
    IPage page = new IPage(_accessor);
    string status = id;
    string accesslevel = string.Empty;
    string CustName = string.Empty;

    if (page.UserPageAccessLevel == Models.Constant.UserAccessLevel.BUHead) {
        if (status == "Printed") {
            accesslevel = "BU01PRINT";
        } else if (status == "Pending SAM") {
            accesslevel = "BU01";
        } else if (status == "Pending Approval") {
            accesslevel = "BU01PENDINGAPPROVAL";
        } else if (status == "Approved SAM") {
            accesslevel = "APPROVEDSAM";
        } else if (status == "Rejected SAM") {
            accesslevel = "REJECTEDSAM";
        }
    } else {
        if (page.UserPageAccessLevel == Models.Constant.UserAccessLevel.ApproverLevel3) {
            accesslevel = "AP03";
        } else if (page.UserPageAccessLevel == Models.Constant.UserAccessLevel.ApproverLevel4) {
            accesslevel = "AP04";
        } else if (page.UserPageAccessLevel == Models.Constant.UserAccessLevel.ApproverLevel2) {
            accesslevel = "AP02";
        } else if (page.UserPageAccessLevel == Models.Constant.UserAccessLevel.ApproverLevel5) {
            accesslevel = "AP05";
        }

        if (status == "All Pending") {
            accesslevel = accesslevel + "ALL";
        } else if (status == "Pending Approval") {} else if (status == "Rejected SAM") {
            accesslevel = "REJECTEDSAM";
        } else if (status == "Approved SAM") {
            accesslevel = "APPROVEDSAM";
        }
    }
    try {
        List < Models.POMultipleApprovalOverride > items2 = new
        List < Models.POMultipleApprovalOverride > ();
        Hashtable htParameters2 = new Hashtable();
        htParameters2.Add("POMultipleGroup", "");
        htParameters2.Add("AccessLevel", accesslevel);
        htParameters2.Add("PONumber", "");
        htParameters2.Add("CorporateName", "Select All");
        items2 = (List < Models.POMultipleApprovalOverride > ) BusinessRules.Corporates.itemPOAppMultiple(htParameters2);

        return Json(items2);
    } catch(Exception e) {
        return Json(e.Message);
    }
}

I just wan to populate "CorporateName" element from the Items2 object.

Is the method itemPOAppMultiple returning the expected results? — Abhishek Bag
– Abhishek Bag, Commented Oct 4, 2019 at 2:44
Yes it will return with parameters (CorporateID, BUID, CorporateName, BusinessName, Amount, Date) but i just want to get the CorporateName and populate it to <select> — Ben Ten
– Ben Ten, Commented Oct 4, 2019 at 2:47
So what is the current issue ? Are you not being able to poulate the response correctly? — Abhishek Bag
– Abhishek Bag, Commented Oct 4, 2019 at 2:50
only 'undefined' populates on <select> Can you tell me where is the problem why its only producing 'undefined' instead of the actual data? — Ben Ten
– Ben Ten, Commented Oct 4, 2019 at 2:57

Abhishek Bag · Accepted Answer · 2019-10-04 03:00:06Z

0

This should work

$.each(reponse, function(index, corpInfo) { ddlCorporateName.append('<option selected="selected" value = "' + corpInfo.CorporateName + '" > ' + corpInfo.CorporateName + '</option>'); }); Hope this helps...

answered Oct 4, 2019 at 3:00

Abhishek Bag

1445 bronze badges

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

3 Comments

Ben Ten Over a year ago

Same result sir :(

Abhishek Bag Over a year ago

Can you console.log the response? And post it here?

malik masis Over a year ago

you may find the solution for a similar issue here stackoverflow.com/questions/1745704/…

Collectives™ on Stack Overflow

How to populate <select> using ajax in asp.net core 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