Блог

Пожалуйста, нажмите здесь, чтобы увидеть отлаженный результат и визуализированное изображение данных

Я разрабатываю функцию в ASP.NET Основное приложение MVC, которое при каждом нажатии на элемент выпадающего списка отображает соответствующие данные на основе идентификатора элемента.

Это мои действия в контроллере

 // this function get list of course and render a dropdown list of courses.
public async Task<IActionResult> Index()
{
    List<SelectListItem> listItem = new List<SelectListItem>();
    var courses = await _context.Course.ToListAsync();

    foreach (var course in courses)
    {
        listItem.Add(new SelectListItem { Text = course.CourseName, Value = course.CourseId.ToString() });
    }

    ViewBag.CourseList = listItem;
    return View();
}
 

Это функция, которая возвращает частичное представление в виде данных JSON, которые зависят от идентификатора курса.

 [HttpGet]
public async Task<IActionResult> GetNoteById(int id)
{
    var noteModel = await _context.Course
                                  .Include(n => n.Notices)
                                  .AsNoTracking()
                                  .FirstOrDefaultAsync(m => m.CourseId == id);

    if (noteModel == null)
        return Json(new { data = NotFound(), message = "Error while retrieving data." });

    return Json(noteModel);
}
 

И это мое .cshtml досье

 // some code ....

<div class="col-sm-4 offset-4 form-inline">
    <label class="">Courses </label>
    <select id="courses_dropdown_list" class="custom-select ml-2"
            asp-items="@(new SelectList(ViewBag.CourseList, "Value","Text") )">
    </select>
</div>

// some code ...

<table class="table table-striped table-bordered" style="width:100%;">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>File Type</th>
                <th>File</th>
                <th>Created On</th>
            </tr>
        </thead>
        <tbody id="note_table">

          // partial view will be loaded in here 
        </tbody>
</table>
 

И, наконец, это мой ajax-скрипт, который помогает отображать данные JSON.

 <script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#courses_dropdown_list").change(function () {
        var id = $("#courses_dropdown_list").val();
        var noteTable = $("#note_table");
        var result = "";
        $.ajax({
            cache: false,
            type: "GET",
            url: "@Url.Action("GetNoteById", "Note")",
            datatype: "json",
            data: { "id": id },
            success: function (data) {
                noteTable.html("");
                $.each(data, function (id, note) {
                    /* this is what I tried to debug 
                    there is no problem with the data 
                    but when it is renderd, it returned undefined */

                    console.log(id);
                    console.log(note);

                    result  = `
                        <tr>
                            <td>${note.Id}</td>
                            <td>
                                <a href="/note/NoteDetail/${note.Id}" class="nav-link mt-0">${note.Name}</a>
                            </td>
                            <td>
                                <a href="/note/DowloadNoteFromDB/${note.Id}" class="nav-link mt-0">###</a>
                            </td>
                            <td>{note.FileType}</td>
                            <td>{note.CreatedOn}</td>
                        </tr>`
                });
                noteTable.html(result);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("failed to load data.");
            }
        });
    });
});
 

Когда я нажимаю на элементы выпадающего списка, таблица отображается так, как я ожидал. Однако данные в каждом столбце возвращаются как undefined . Я пробовал отлаживать с помощью console.log(id) и console.log(note) проверять id note , была ли передана функция ajax в порядке или нет. Но возвращенные данные были в порядке, с этим проблем нет. Надеюсь, кто-нибудь сможет мне помочь!

Вам нужно изменить свою функцию на:

             $.each(data.notices, function (id, note) {

            result  = `
                <tr>
                    <td>${note.id}</td>
                    <td>
                        <a href="/note/NoteDetail/${note.id}" class="nav-link mt-0">${note.name}</a>
                    </td>
                    <td>
                        <a href="/note/DowloadNoteFromDB/${note.id}" class="nav-link mt-0">###</a>
                    </td>
                    <td>{note.fileType}</td>
                    <td>{note.createdOn}</td>
                </tr>`
        });
 

Результат теста:

 $.each(data, function (item) {
                        /* this is what I tried to debug 
                        there is no problem with the data 
                        but when it is renderd, it returned undefined */

                        

                        result  = `
                            <tr>
                                <td>${item.courseId}</td>
                                <td>
                                    <a href="/note/NoteDetail/${item.courseId}" class="nav-link mt-0">${item.courseName}</a>
                                </td>
                                <td>
                                    <a href="/note/DowloadNoteFromDB/${item.courseId}" class="nav-link mt-0">###</a>
                                </td>
                                <td>{item.fileType}</td>
                                <td>{item.createdOn}</td>
                            </tr>`
                    });