Cascading Dropdown-Listen aus einzelnen Tabelle in MVC (Razor)

Question

Meine Abfrage besteht darin, zwei kaskadierende Dropdown-Listen, die Daten aus einzelnen Tabelle abruft. Mein Tisch ist wie:

Mein Controller:

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

Hier ersten Jahr Drop-Down-Liste Ich bin Füllung, basierend auf der Auswahl der Monat Drop Down füllt Liste. Für z.B. Hier für UserName = 1832 gibt es ein Jahr, d. H. 2017, und drei Monate (Mai, Juni, Juli) von Daten. Wenn der Benutzer also 2017 auswählt, sollte die Monatsauswahlliste Mai, Juni, Juli ausfüllen.

Problem: Die Dropdown-Liste Monat zeigt "undefined" in der Liste an.

Ansicht und jQuery verwendet:

 @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> 

Bitte vorschlagen Lösung für dieses Problem.

Answer 1

Es gab ein Problem mit Ihrer GetMonth Methode. Sie wählen nur die Spalte month aus der EmployeeSalaries-Tabelle, aber in Sicht verwenden Sie sie als Modelleigenschaften (value.monthId und value.month). Bitte verwenden Sie folgenden Code und es sollte funktionieren:

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