Выбранное значение в раскрывающемся списке для получения идентификатора значения

Question

У меня есть 2 модели классов, одна называется WorkCategory, а вторая называется ServiceCategory. На основе каждой категории, выбранной из раскрывающегося списка (WorkCategory), второй заполненный список будет заполнен данными из второго класса (ServiceCategory) на основе внешнего ключа.

Первый раскрывающийся список заполняется из базы данных без javascript, во втором раскрывающемся списке я заполняю значение javascript, основанным на первом раскрывающемся списке, методом изменения.

Это мой модельный вид, который имеет атрибуты, которые я хочу захватить.

 public class PostJobViewModel
{

    [Required]
    public WorkCategory Category { get; set; }
    [Required]
    public string Headline { get; set; }
    [Required]
    public string JobAddress { get; set; }

    [Required]
    public string AboutJob { get; set; }
    [Required]
    public string JobCity { get; set; }
    [Required]
    public string JobPostCode { get; set; }

    public ServiceCategory JobService { get; set; }
}

Это первый выпадающий список, который хорошо заполняется из БД, а также, когда я публикую форму, у нее есть идентификатор выбранной опции.

 @Html.DropDownListFor(m => m.Category.CategoryName, ViewBag.whatWorkToBeDone as SelectList, "-- Select Category --", new { @class = "form-control", @onchange="FillService()" })
                                        @Html.ValidationMessageFor(m => m.Category.CategoryName, "", new { @class = "text-danger" })

и это второй раскрывающийся список, который заполняется во время выполнения с помощью Ajax на основе первого выбранного параметра.

@Html.DropDownListFor(m => m.JobService.Category, new SelectList(Enumerable.Empty<SelectListItem>(), "ServiceId", "ServiceName"), "-- Select Service --", new { @class = "form-control" })
                                        @Html.ValidationMessageFor(m => m.JobService.Category, "", new { @class = "text-danger" })

Проблема, с которой я сталкиваюсь, заключается в том, что при отладке контроллера «JobService» всегда имеет значение null, даже если параметр имеет значение ids. Несмотря на это, состояние модели недопустимо и выдает ошибку в пользовательском интерфейсе, говоря «Недопустимое значение« 14 ». (Где 14 - число (id), но по какой-то причине представляется в виде строки).

А ниже приведен вызов JavaScript / ajax, который я заполняю в раскрывающемся списке.

     function FillService() {
    var serviceId = $('#Category_CategoryName').val();
    $.ajax({
        url: '@Url.Action("FillServ", "PostJob")',
        type: "GET",
        contentType: "JSON",
        data: { ServiceCategory: serviceId },
        success: function (services) {
            if (services == '') {

               // $('#step-wizard').load(' .step-anchor');

                document.getElementById('JobService_Category').disabled = true;
                $("#Title-Category").html(""); // clear before appending new list
                $("#JobService_Category").html(""); // clear before appending new list
                $("#Title-Category").append('Please skip this step!');

                $("#secondStep").html("");
                $("#secondStep").append('Skip this step!');
            } else {

                document.getElementById('JobService_Category').disabled = false;
                $("#JobService_Category").html(""); // clear before appending new list
                $.each(services, function (i, service) {
                    $("#JobService_Category").append($('<option></option>').val(service.ServiceId).html(service.ServiceName));
                });


            }

        }
    });

что с этим не так?

--- UPDATE ---

Класс обслуживания категории

 public class ServiceCategory
{
    [Key]
    public int ServiceId { get; set; }
    public string ServiceName { get; set; }

    public WhatToHaveDone Category { get; set; }

    public string ServiceDescription { get; set; }
}




public class WhatToHaveDone
{
    [Key]
    public int WhatToDoneId { get; set; }
    public string WhatToDoneItem { get; set; }
    public string ItemDescription { get; set; }
    public ICollection<ServiceCategory> Services { get; set; }
}

И это метод, который возвращает данные из вызова Api в ajax

[HttpGet]
    public ActionResult FillServ(int ServiceCategory)
    {
        var services = (from s in _context.JobService where s.Category.WhatToDoneId == ServiceCategory select s).ToList();
        return Json(services, JsonRequestBehavior.AllowGet);
    }

контроллер отладки

[HttpPost]
    public ActionResult Index(PostJobViewModel JobModel, List<HttpPostedFileBase> jobImages)
    {

        if (User.Identity.Name == "")
        {
            return RedirectToAction("Login","Account");
        }
        else
        {
        var imgList = new List<JobImage>();

            var user = (from u in _context.Users where u.Email == User.Identity.Name select u.Id).First();
            foreach (var item in jobImages)
        {
                var newJobimage = new JobImage
                {
                    JobFileName = item.FileName,
                    JobImageContentBytes = new byte[item.ContentLength],


                };
                imgList.Add(newJobimage);
            }


        if (ModelState.IsValid)
        {


            var newJob = new JobPost{
                Category = JobModel.Category,
                JobAddress=JobModel.JobAddress,
                AboutJob=JobModel.AboutJob,
                JobCity=JobModel.JobCity,
                JobPostCode=JobModel.JobPostCode,

                JobImages=imgList,
                UserId = user,
                JobService=JobModel.JobService

            };
            _context.jobPosts.Add(newJob);
            _context.SaveChanges();
        }
        else
        {

        }
        }

        var workCategories = new SelectList(_context.Categories, "CategoryId", "CategoryName");
        ViewBag.WorkCategories = workCategories;

        var whatWorkToBeDone = new SelectList(_context.JobWizardCategories, "WhatToDoneId", "WhatToDoneItem");
        ViewBag.whatWorkToBeDone = whatWorkToBeDone;

        return View();
    }