I want to create table rows when dropdown value is selected, but at the moment it just returns nothing. I tried changing data.notices to just data, but then it returns "undefined".

Returns Empty

View:

<script>
$(document).ready(function () {
    $('select').formSelect();
});

function onManagerChange() {
    var id = $("#Managers").val();
    var rows = "";

    $.ajax({
        type: "GET",
        url: "@Url.Action("GetFilteredReports", "FinalReports")",
        dataType: "application/json",
        data: { "id": id },
        success: function (data) {
            $("#Reports").html("");
            $.each(data.notices, function (id, report) {
                rows  = `
                <tr>  
                <td>   ${report.ReportName}   </td>  
                <td>   ${report.ReportState}   </td>  
                <td>   <a  asp-action="Download" asp-route-id="report.ID">Download</a>   </td>  
                </tr>`
            });
            $("#Reports").html(rows);
        }
    });
}

Controller:

public IActionResult GetFilteredReports(int id)
    {
        var reportsList = _context.Reports.Include(x => x.ReportManager).Where(x => x.ReportManager.ID == id).ToList();

        return Json(reportsList);
    }

CodePudding user response：

Found an answer, this is the solution

function onManagerChange() {
    $('#Reports tbody').html("");
    var stateName = "";
    var id = $("#Managers").val();
    var downloadURL = '@Url.Action("Download", "FinalReports")';
    $.ajax({
        type: "POST",
        url: "@Url.Action("GetFilteredReports", "FinalReports")",
        dataType: "json",
        data: { id: id },
        success: function (response) {
            $.each(response, function (i, report) {

                if (report.reportState == @((int)ReportState.Pending))
                    stateName = "Pending";
                else if (report.reportState == @((int)ReportState.Accepted))
                    stateName = "Accepted";
                else if (report.reportState == @((int)ReportState.Denied))
                    stateName = "Denied";

                    var row = `
                    <tr>
                        <td> ${report.reportName} </td>
                        <td> ${stateName} </td>
                        <td>
                           <a  href=\"${downloadURL}/${report.id}">Download</a>
                        </td>
                    </tr>`;
                    $('#Reports tbody').append(row);
                });
        }, error: function (data, status, jqXHR) {
            alert('There was an error.');
        }
    });

Controller:

[HttpPost]
    public IActionResult GetFilteredReports(string id)
    {
        var response = _context.Reports.Where(x => x.ReportManager.ID == Int32.Parse(id)).ToList();

        return Json(response);
    }

View:

<form>
    <table id="Reports">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.ReportName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ReportState)
                </th>
                <th>
                    @Html.Raw("File")
                </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <br />
</form>