Вставка данных с помощью ajax post

---

У меня есть две таблицы продуктов и категорий .
У меня есть форма с ценой продукта, названием продукта и именем категории dropDwon
Когда я пытаюсь вставить данные в базу данных, имя категории сохраняется как null.

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

<pre>function Add() {
    var res = validate();
    if (res == false) {
        return false;
    }
    var proObj = {
        ProductName: $('#ProductName').val(),
        ProductPrice: $('#ProductPrice').val(),
        
        CategoryName: $('#CategoryName option:selected').val()
         //CategoryName is saved as null in db
      
    };
    
    
    $.ajax({
        url: "/AjaxProducts/Add",
        data: JSON.stringify(proObj),
        type: "POST",
        contentType: "application/json;charset=utf-8",
        
        dataType: "json",
        success: function (result) {
            //$("#ddlcountry").append($("<option></option>").val
            //(value.CountryId).html(value.CountryName));
            loadData();
            $('#myModal').modal('hide');
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

Что я уже пробовал:

Выпадающий список

<pre><div>
                        @Html.DropDownList("CategoryName", new SelectList(string.Empty, "Value", "Text"), "Please select a category",  new { @style = "width:250px;" })
                    </div>

---