Inserting data using ajax post

See more:

ASP.NET

MVC

jQuery

I have two tables Products and Categories .
I have a form with Product Price, Product Name and CategoryName dropDwon
When I try to Insert Data in the database , the CategoryName is saved as null.

This is Add method I have used to save the data in data base.

<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);
        }
    });
}

What I have tried:

DropDownList

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