Asp.net MVC5 partial view based on dropdownlist

See more:

ASP.NET

jQuery

MVC5

Hello,

I have two tables, Class and ClassFee related on ClassID field, and I want when Class is selected in a Dropdownlist of Classes, then ClassFee should be retrieved and displayed.

For this I created a method in controller.

[HttpGet]
     public PartialViewResult GetClassFee(int? Classid)
     {
         ClassFeeVM CFee = new ClassFeeVM();
         if (Classid != null)
         {
            List<ClassFee> classfees = db.ClassFees.Where(p => p.tblClass.ClassID == Classid).ToList();
             foreach (var item in classfees)
             {
                 CFee.ClassFee = item.ClassFee1;
                 CFee.ClassID = item.ClassID;
                 CFee.ClassName = item.tblClass.ClassName;
                 CFee.FeeType = item.tblFeeType.FeeType;
             }
         //   ViewBag.ClassFees = CFee;
         }
         return PartialView("_ClassFee", CFee);
     }

The error is that instead of values it display as is

The model item passed into the dictionary is of type 'SchoolMVC.Models.ViewModel.ClassFeeVM', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[SchoolMVC.Models.ViewModel.ClassFeeVM]'.

What I have tried:

My JQuery/Ajax code for the DropdownList change even is:

$(function () {
               $("#ClassID").on("change", function () {

                   var url = '@Url.Action("GetClassFee", "ClassFees")' + "?Classid=" + $(this).val();

                   $("#ClassFeeDetails").load(url, function (data) {
                       $("#ClassFeeDetails").html(data);
                   });
               });
           });

And my Partial View is:

@model IEnumerable<SchoolMVC.Models.ViewModel.ClassFeeVM>

    @foreach (var item in Model)
    {
        <p>@item.ClassFee</p>
        <p>@item.FeeType</p>
        <p>@item.ClassName</p>
    }