Ajax call to Controller Action Not Working Asp.net Core 3.1

Question

I have 2 dropdown

 

a) Category

b) SubCategory

 

I need to load Sub Categories on change of Category, but Controller action is never fired and I receive jquery error 

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

 

SuperAdmin is My Area. 

 

 My jQuery action syntax is:

$("#CategoryID").change(function () {

var id = $("#CategoryID").val();

var url = '/SuperAdmin/Home/GetSubCatList';

debugger

$.ajax({

type: "POST",

url: url,

cache: false,

data: {ID : id},

success: function (result) {

var items = '';

$("#SubCategoryID").empty();

$.each(result, function (i, subcategory) {

 items += "<option value='" + subcategory.value + "'>" + subcategory.text + "</option>";

});

$('#SubCategoryID').html(items);

},

error: function (result) {

alert('Oh no aa :(' + result[0]);

}

});

 

And My Controller Action is:

 

[HttpPost]

public ActionResult GetSubCatList(int ID)

{

List<SubCategory> subCategorylist = new List<SubCategory>();

//// ------- Getting Data from Database Using EntityFrameworkCore -------

subCategorylist = (from subcategory in _db.SubCategory

 where subcategory.CategoryID == ID

 select subcategory).ToList();

return Json(new SelectList(subCategorylist, "SubCategoryID", "SubCategoryTitle"));

}

 

My Route Setting in Startup is:

 

app.UseMvc(routes =>

{

routes.MapRoute(

name: "areas",

template: "{area:exists}/{controller=Home}/{action=Index}/{id?}"

);

routes.MapRoute(

name: "default",

template: "{action}/{id?}",

defaults: new { controller = "Home", action = "Index" });

});

 

please suggest a solution.