Listes déroulantes en cascade à partir d'une seule table dans MVC (Razor)

Question

Ma requête consiste à créer deux listes déroulantes en cascade qui extraient des données d'une seule table. Ma table est comme:

Mon contrôleur:

public JsonResult GetYear() 
    { 
     string UserName = User.Identity.Name.ToString(); 

     return Json(dbContext.EmployeeSalaries.Where(f => f.UserName == UserName).GroupBy(f => f.Year).Select(g => g.FirstOrDefault()).ToList(), JsonRequestBehavior.AllowGet); 
    } 

    public JsonResult GetMonth(string year) 
    { 
     string UserName = User.Identity.Name.ToString(); 

     IEnumerable<string> monthList = dbContext.EmployeeSalaries.Where(a => a.Year == year && a.UserName == UserName).Select(u => u.Month).ToList(); 

     return Json(monthList); 
    } 

Ici, je suis d'abord remplir Année Liste déroulante, en fonction de la sélection remplit le mois Drop Down Liste. Par exemple Ici pour UserName = 1832, il y a une année, c'est-à-dire 2017, et trois mois (mai, juin, juillet) de données. Ainsi, lorsque l'utilisateur sélectionne 2017, la liste déroulante mois doit apparaître en mai, juin et juillet.

Problème: La liste déroulante Mois affiche 'non défini' dans la liste.

Voir et jQuery utilisés:

 @Html.DropDownList("ddlYear", new SelectList(string.Empty, "Value", "Text"), "Please select year", new { @style = "width:250px;" }) 

     @Html.DropDownList("ddlMonth", new SelectList(string.Empty, "Value", "Text"), "Please select month", new { @style = "width:250px;" }) 

     <script type="text/javascript"> 
     $.ajax({ 
     type: "GET", 
     url: "/SalaryProcess/GetYear", 
     datatype: "Json", 
     success: function (data) { 
      $.each(data, function (index, value) { 
       $('#ddlYear').append('<option value="' + value.Year + '">' + value.Year + '</option>'); 
      }); 
     } 
    }); 

    $('#ddlYear').change(function() { 
     // $('#ddlMonth').empty(); 
     $.ajax({ 
      type: "POST", 
      url: "/SalaryProcess/GetMonth", 
      data: { year: $('#ddlYear').val() }, 
      datatype: "Json", 
      success: function (data) { 
       $.each(data, function (index, value) { 
        $('#ddlMonth').append('<option value="' + value.MonthId + '">' + value.Month + '</option>'); 
       }); 
      } 
     }); 
    }); 
}); 
</script> 

S'il vous plaît suggérer une solution à ce problème.

Answer 1

Un problème est survenu lors de l'utilisation de la méthode GetMonth. Vous sélectionnez uniquement la colonne month de la table EmployeeSalaries mais en vue de les utiliser comme propriétés du modèle (value.monthId et value.month). S'il vous plaît utiliser le code suivant et il devrait fonctionner:

public JsonResult GetMonth(string year) 
{ 
    string UserName = User.Identity.Name.ToString(); 

    var monthList = dbContext.EmployeeSalaries 
     .Where(a => a.Year == year && a.UserName == UserName) 
     .Select(x => new { MonthId = x.MonthId, Month = x.Month }); 
    return Json(monthList); 
}