AJAX Call in C# MVC .NET Core returning Null

Question

I am trying to create a dynamic drop down that changes the options of a second-drop down depending on which option is chosen in the first drop-down. The first drop down is working well and the second drop down changes and will add options. The issue is, inside of my Controller method I want the options being returned to change depending on the first option. However, the pass through parameter is always returning null.

Ajax Call Method:

function AjaxCall(url, data, type) {
    return $.ajax({
        url: url,
        type: type ? type : 'GET',
        data: data,
        contentType: 'application/json'
    });
}  

On Change method (first drop-down change modifies the second drop-down)

    $('#testmanetDropDownList').on("change", function () {
        var test = $('#testmanetDropDownList').val();
        var obj = { testament: test };
        AjaxCall('/Bible/GetBooks', JSON.stringify(obj), 'POST').done(function (response) {
            console.log("JsonStringify: " + JSON.stringify(obj))
            if (response.length > 0) {
                $('#bookDropDownList').html('');
                var options = '';
                options += '<option value="Select">Select</option>';
                for (var i = 0; i < response.length; i++) {
                    options += '<option value="' + response[i] + '">' + response[i] + '</option>';
                }
                $('#bookDropDownList').append(options);

            }
        }).fail(function (error) {
            alert(error.StatusText);
        });
    });  

Controller method - should return different options depending on the parameter. Right now, the testament parameter always returns null and the only Books being added are the Something and FAIL, which are for testing purposes

        [HttpPost]
        public JsonResult GetBooks(string testament) {
            var Books = new List<string>();
            if (!string.IsNullOrWhiteSpace(testament)) {
                if (testament.Equals("Old Testament")) {
                    Books.Add("Genesis");
                    Books.Add("Exodus");
                }
                if (testament.Equals("New Testament")) {
                    Books.Add("Matthew");
                    Books.Add("Mark");
                }
            }
                Books.Add("Something");
                Books.Add("FAIL");
            return Json(Books);
        }

When either Old Testament or New Testament are chosen from the first drop down, the Something and FAIL options are added to the Books dropdown. However, testament is always null.

Answer 1

It is much more simple to use GET in this case but if you still want to use POST you will have to use a ViewModel

public class ViewModel
{
 public string  Testament {get;set;}
}

and change the action header:

[HttpPost]
 public JsonResult GetBooks(ViewModel viewModel) {

 var testament=viewModel.Testament;
....
}

And by the way. It is always better not to invent something and use more traditional algorithm. But if you need to separate code of ajax try this:

function ajaxCall(url, data, type) {
        
        $.ajax({
            type: type,
            url: url,
            data: data ,
            success: successFunc,
            error: errorFunc
        });
    };

        function successFunc(data) {
           
        }

        function errorFunc(hr,status) {
          
        }

or you can use delegates:

function ajaxCall(url, data, successFunc, errorFunc, type) {
        
        $.ajax({
            type: type,
            url: url,
            data: data ,
            success: successFunc,
            error: errorFunc
        });
    };

Answer 2

You are using HttpPost attribute, yet in your ajax you put type: 'get'

Change

  [HttpPost]
  public JsonResult GetBooks(string testament) 

to

  [HttpGet]
  public JsonResult GetBooks(string testament)