Partial View data is not display in it

Question

I am trying to display countrywise employee details using partial view... It is basically called the Partial view but did not display data in it. Here is my INDEX PAGE CODE

 <select class="form-control" name="CountryID" id="CountryID" onchange="getAllEmployee(this)">
            <option value="null">Select Name</option>
            @foreach (var varAllRecord in ViewBag.VBCountry)
            {
                <option id="@varAllRecord.CountryID" value="@varAllRecord.CountryID ">@varAllRecord.CountryName </option>
            }
        </select>        

        <div id="dvEmployeeResult">
            <partial name="_ClassesEmployees" />
        </div>

Here is my AJAX CALL Details

<script type="text/javascript">
    var valueID;
    var datais;

      function getAllEmployee(selectObject) {

            valueID = selectObject.value;

          $.ajax({
              type: "POST",
              url: "@Url.Action("GetEmployeeDataByCountryID", "Dynamic")",
              data: { EmployeeID: valueID },
            @*dataType: "Text",*@
            @*contentType: "application/text",*@
              success: function (data) {
                  //  alert("In Success");
                  console.log(data);
                  $("#dvEmployeeResult").html(data.responseText);
              },
              error: function (data) {
                  // debugger;
                  $("#dvEmployeeResult").html(data.responseText);
              }
        });

       console.log(valueID)
       

    }

</script>

public async Task<IActionResult> Index()
        {
            await GetCountryList();
            return View();
        }

public async Task<bool> GetCountryList()
        {
            List<tblCountryList> theCountryList = await _dbCountryListContext.GetAllCountryListAsync();
            ViewBag.VBCountry = theCountryList;

            return true;

        }

[HttpPost]      
        public async Task<PartialViewResult> GetEmployeeDataByCountryIDAsync(string EmployeeID)
        
        {
            var CountryID = EmployeeID;
            List<Account> theEmployeeList = await _dbAccountContext.GetAllEmployeeListAsync(CountryID);
            ViewBag.datasourceEmplyee = theEmployeeList;
       
            return PartialView("~/Views/Dynamic/_ClassesEmployees.cshtml", ViewBag.datasourceEmplyee);
        }

Here is my partial view code.

@model IEnumerable<MasterProject.Models.Account>

@if(ViewBag.datasourceEmplyee != null)
{
@foreach (var item in (List<Account>)ViewBag.datasourceEmplyee)
{
    @item.RowID
    @item.FirstName
    @item.CountryID
}
}

can you please suggest to me what went wrong? I am working very hard but did not get the solution. Data is fetched but somehow not displayed in the view.

Answer 1

fix action

[HttpPost]      
public async Task<PartialViewResult> GetEmployeeDataByCountryIDAsync(string CountryID)
{
  List<Account> theEmployeeList = await _dbAccountContext.GetAllEmployeeListAsync(CountryID);

 return PartialView("~/Views/Dynamic/_ClassesEmployees.cshtml", theEmployeeList);
}

but GetAllEmployeeListAsync using CountryId doesn't look right for me

the same way check the partial view, I think it should be

@model List<MasterProject.Models.Account>

@if(model != null && @model.Count > 0)
{
     @foreach (var item in model)
     {
    @item.RowID
    @item.FirstName
    @item.CountryID
   }
}