#c# #ajax #asp.net-core-mvc
Вопрос:
Пожалуйста, нажмите здесь, чтобы увидеть отлаженный результат и визуализированное изображение данных
Я разрабатываю функцию в 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 в порядке или нет. Но возвращенные данные были в порядке, с этим проблем нет. Надеюсь, кто-нибудь сможет мне помочь!
Комментарии:
1.
GetNoteById
действие возвращает только один объектnoteModel
, а не коллекцию. Но вы пытаетесь пройти через него в успехе AJAX. Поэтому либо вы возвращаете коллекцию из метода действия, либо меняете успех AJAX, чтобы рассматривать ответ как отдельный объект, а не как коллекцию.2. @ChetanRanpariya Нет, эта возвращенная модель содержит коллекцию другого экземпляра. Вы можете увидеть изображение, которое я прикрепил к сообщению.
3. Коллекция находится внутри
noteModel
модели.. так что в AJAX успехdata
будетnodeModel
. и чтобы получить доступ к коллекции, вам нужно пройти циклdata.notices
4. @ChetanRanpariya Как я могу сделать это внутри функции ajax? Не могли бы вы предоставить фрагмент кода? Заранее спасибо!
5. попробуйте изменить
$.each(data, function (id, note) {
на$.each(data.notices, function (id, note) {
Ответ №1:
Вам нужно изменить свою функцию на:
$.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>`
});
Результат теста:
Комментарии:
1. Спасибо, что потратили время и усилия на тестирование этой функции. Потому что моя модель
Course
содержит коллекциюnotices
, и в каждойnotices
из них есть1 or N further notice
, поэтому я понял, что мне нужно пройти циклdata.notices or note
, чтобы иметь возможность получить доступ к данным, которые мне нужны, и это сработало сейчас! Спасибо!
Ответ №2:
$.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>`
});
Комментарии:
1. не могли бы вы дать более подробное описание фрагментов? Я сделал по-твоему, но это не сработало.