How I bind dropdownlist using another dropdownlist in MVC5?

See more:

MVC5

i want bind data in drowpdownlist when i choose value from another dropdownlist.

This is My Code:-

//--------Model-------//
// DeviceProduct Model //

[Table("DeviceProduct")]
    public partial class DeviceProduct
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public DeviceProduct()
        {
            this.DeviceInfoe = new HashSet<DeviceInfo>();
            this.DeviceModel = new HashSet<DeviceModel>();
        }
        public int ID { get; set; }
        public string Code { get; set; }
        public string Name { get; set; }

        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<DeviceInfo> DeviceInfoe { get; set; }
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<DeviceModel> DeviceModel { get; set; }
    }

// DeviceModel Model //

[Table("DeviceModel")]
public partial class DeviceModel
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public DeviceModel()
    {
        this.DeviceInfoe = new HashSet<DeviceInfo>();
    }
    public int ID { get; set; }
    public Nullable<int> DeviceProductID { get; set; }
    public string Code { get; set; }
    public string Name { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<DeviceInfo> DeviceInfoe { get; set; }
    public virtual DeviceProduct DeviceProduct { get; set; }
}

// in Controller //

public ActionResult NewDeviceInfo()
       {
           ViewBag.DeviceProductList = db.DeviceProduct;
           return PartialView("NewDeviceInfo");
       }

       [HttpPost]
       [ValidateAntiForgeryToken]
       public ActionResult NewDeviceInfo(DeviceInfo deviceInfo)
       {
           return view();
       }

       public ActionResult FillDeviceModel(int productId)
       {
           var deviceModels = db.DeviceModel.Where(c => c.DeviceProductID ==  productId);
           return Json(deviceModels, JsonRequestBehavior.AllowGet);
       }

// in view //

<div class="form-group col-lg-6">
                            @Html.LabelFor(m => m.DeviceProduct.Name, new { @class = "col-lg-2 control-label" })
                            <div class="col-lg-8">
                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                @Html.DropDownListFor(m => m.DeviceProduct, new SelectList(ViewBag.DeviceProductList, "ID", "Name"), WhiteWhaleLanguage.PleaseSelect, new { @class = "form-control" , @onchange="FillDeviceModel()" })
                                @Html.ValidationMessage("UserErrorMsg", htmlAttributes: new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group col-lg-5">
                            @Html.LabelFor(m => m.DeviceModel.Name, new { @class = "col-lg-2 control-label" })
                            <div class="col-lg-9">
                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                @Html.DropDownListFor(m => m.DeviceModel, new SelectList(Enumerable.Empty<SelectListItem>(), "ID", "Name"), WhiteWhaleLanguage.PleaseSelect, new { @class = "form-control" })
                                @Html.ValidationMessage("UserErrorMsg", htmlAttributes: new { @class = "text-danger" })
                            </div>
                        </div>

// script code //

function FillDeviceModel()
{
var deviceproductid = $('#DeviceProduct').val();
$.ajax({
url: '/ClientsNotifications/FillDeviceModel',
type: "GET",
datatype: "JSON",
data: { DeviceProductID: deviceproductid },
success: function (deviceModels) {
$("#DeviceModel").html("");
$.each(deviceModels, function (i, devicemodel) {
$("#DeviceModel").append(
$('<option></option>').val(DeviceModel.ID).html(DeviceModel.Name));
})
},
error: function()
{
alert("Whooaaa! Something went wrong..")
}
});
}


What I have tried:

i write this code but it's do't work, where's the problem?