How to read Json data using jquery in ASP.Net Core MVC

Question

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 class="btn-small waves-effect waves-light" 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);
    }

type: "GET", You need to send the id to the GetFilteredReports(int id) , so this is type: "Post", — Qing Guo
– Qing Guo, Commented Nov 15, 2022 at 5:58
First use F12 console + network tab to confirm what JSON FinalReports actually returns. Then add a javacsript breakpoint and step through your code — Nick.Mc
– Nick.Mc, Commented Nov 15, 2022 at 6:11

Saraphin34 · Accepted Answer · 2022-11-15 08:09:31Z

1

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 class="btn-small waves-effect waves-light" 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>

edited Nov 15, 2022 at 8:09

answered Nov 15, 2022 at 7:23

Saraphin34

371 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Qing Guo Over a year ago

Could you share your html code about Reports tbody ?

Saraphin34 Over a year ago

@QingGuo just updated the post

Collectives™ on Stack Overflow

How to read Json data using jquery in ASP.Net Core MVC

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related