Asp.net razor page - how to return JSON result for $.getjson request?

See more:

C#

Javascript

ASP.NET-Core

Hello Everyone,

I am very new to web development and I've been searching around for a while now and I can't seem to find a solution to this. I am using razor pages in asp.net core 2.0 and I want to fill a drop down box based on another drop down box's selection. I set up the below javascript to hit a procedure in my razor page when the value of the first drop down box changes. When I run the code though, I can't get it to work. I think it is due to my return value but I can't seem to get that to be a json value as it keeps throwing an error at me when I try to. The error is that "JSON is not valid in this context". Can anyone suggest to me how to return JSON from razor pages to a javascript call? I tried to simply use the namespace JSON for my return but it doesn't work in ASP.Net Core 2.0 as I get the following message "The name Json does not exist in the current context". Any help would be appreciated!

What I have tried:

Here is my C# code below:

// If the user selects a division then make sure to get the cards for that division only
   [HttpGet]
   public ActionResult GetCardsByDivisionAndStatus(string divisionID)
   {
       int checkinStatus;
       int intdivisionID;

       if (divisionID != "0" && divisionID != null)
       {
           // Retrieve a status of checked in so that only cards with a checked in status can
           // be checked out.
           checkinStatus = linqQuery.GetCardStatusByStatusDesc("Checked In", _Context);

           intdivisionID = Convert.ToInt32(divisionID);

           // Retrieve list of cards that have the checkin status ID
           CardList = linqQuery.GetCardListByStatusIDandDeptID(checkinStatus, intdivisionID, _Context);

           // Create the drop down list to be used on the screen.
           carddropdown = new List<CardDropDown>();
           carddropdown = loaddropdowns.ReturnDropDownList(CardList);
           return new JsonResult(CardList);
       }

       return null;
   }

Here is the javascript from the view:

@section Scripts {
    <script type="text/javascript">
        $('#Department').change(function () {
            var selectedDepartment = $("#Department").val();                 
            var cardSelect = $('#Card');
            cardSelect.empty();
            if (selectedDepartment != null && selectedDepartment != '') {
                $.getJSON('@Url.Action("/CheckOutCard?handler=CardsByDivisionAndStatus")', { divisionID: selectedDepartment }, function (cards) {
                    if (cards != null && !jQuery.isEmptyObject(cards)) {
                        cardSelect.append($('<option/>', {
                            Card_ID: null,
                            Card_Number: ""

                        }))
                        $.each(cards, function (index, card) {
                            cardSelect.append($('<option/>', {
                                Card_ID: card.Card_ID,
                                Card_Number: card.Card_Number
                            }));

                        });

                    };
                    
                });                                
            }
        });
    </script>