Обновление тела таблицы (tbody) без обновления всей страницы c помощью mvc-контроллера
Необходимо обновить тело tbody таблицы не перезагружая страницу. Страница формируется mvc-контроллером. Сама таблица:
<table class="table" id="pollingStationsTable">
<thead>
<tr>
<th></th>
<th>
@Html.DisplayNameFor(model => model.Station)
</th>
<th>
@Html.DisplayNameFor(model => model.City)
</th>
<th>
@Html.DisplayNameFor(model => model.Street)
</th>
<th>
@Html.DisplayNameFor(model => model.House)
</th>
<th></th>
</tr>
</thead>
<tbody id="tableBodyPollingStation">
@foreach (var item in Model)
{
<tr>
<td></td>
<td>
@Html.DisplayFor(modelItem => item.Station.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.City.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Street.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.House.Name)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.IdPollingStation">Править</a> |
<a asp-action="Delete" asp-route-id="@item.IdPollingStation">Удалить</a>
</td>
</tr>
}
</tbody>
</table>
Для этого в mvc-контроллере, который формирует данную страницу прописал нужный метод, который принимает POST-запросы - GetPolingStationsByElectoralDistrict:
[Authorize(Roles = "admin")]
public class PollingStationsController : Controller
{
private readonly VoterCollectorContext _context;
public PollingStationsController(VoterCollectorContext context)
{
_context = context;
}
// GET: PollingStations
public async Task<IActionResult> Index()
{
var voterCollectorContext = _context.PollingStation.Include(s => s.Station).Include(p => p.City).Include(p => p.House).Include(p => p.MicroDistrict).Include(p => p.Street);
return View(await voterCollectorContext.ToListAsync());
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult GetPolingStationsByElectoralDistrict([FromBody] ElectoralDistrictDTO electoralDistrictDTO)
{
List<District> districts = _context.District.Where(d => d.ElectoralDistrictId == electoralDistrictDTO.IdElectoralDistrict).ToList();
List<int> selectStationsId = districts.Select(d => d.StationId ?? 0).ToList();
IQueryable<PollingStation> pollingStations = _context.PollingStation.Include(p => p.Station).Include(p => p.City).Include(p => p.Street).Include(p => p.House)
.Where(p => selectStationsId.Contains(p.StationId ?? 0));
return PartialView(pollingStations);
}
}
Подключил файл , написал в нем JS функцию, которая формирует и отправляет ajax-запрос на сервер:
$(function () {
$("#SelectElectoralDistrictId").change(function () {
var formData = {'IdElectoralDistrict': Number.parseInt($('#SelectElectoralDistrictId').val()), 'Name': $('#SelectElectoralDistrictId>option:selected').text() };
$.ajax({
type: 'POST',
// url: '@Url.Action("GetPolingStationsByElectoralDistrict")',
url: 'PollingStations/GetPolingStationsByElectoralDistrict/',
headers:
{
'Accept': 'application/json',
'Content-Type': 'application/json',
'RequestVerificationToken': $('#RequestVerificationToken').val()
},
dataType: "json",
data: JSON.stringify(formData),
success: function (data) {
$('#tableBodyPollingStation').replaceWith(data);
},
error: function (result, status, er) {
alert("error: " + result + " status: " + status + " er:" + er);
}
});
});
});
Для обновления tbody таблицы данными с сервера создал представление:
@model IEnumerable<voteCollector.Models.PollingStation>;
@{
ViewData["Title"] = "GetPolingStationsByElectoralDistrict";
}
<tbody id="tableBodyPollingStation">
@foreach (var item in Model)
{
<tr>
<td></td>
<td>
@Html.DisplayFor(modelItem => item.Station.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.City.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Street.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.House.Name)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.IdPollingStation">Править</a> |
<a asp-action="Delete" asp-route-id="@item.IdPollingStation">Удалить</a>
</td>
</tr>
}
</tbody>
После возврата объектов на фронт он попадает в for, созданного частичного представления GetPolingStationsByElectoralDistrict, но уже на 2-ой итерации выдает ошибку - error:
[object Object] status: parsererror er:SyntaxError: Unexpected token < in JSON at position 2.
Попытался вернуть json вместо представления:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult GetPolingStationsByElectoralDistrict([FromBody] ElectoralDistrictDTO electoralDistrictDTO)
{
List<District> districts = _context.District.Where(d => d.ElectoralDistrictId == electoralDistrictDTO.IdElectoralDistrict).ToList();
List<int> selectStationsId = districts.Select(d => d.StationId ?? 0).ToList();
IQueryable<PollingStation> pollingStations = _context.PollingStation.Include(p => p.Station).Include(p => p.City).Include(p => p.Street).Include(p => p.House)
.Where(p => selectStationsId.Contains(p.StationId ?? 0));
return Ok(pollingStations.ToList());
//return PartialView(pollingStations);
}
После возврата из метода 500 ошибка:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Попытался в методе контроллера явно преобразовать получаемый результат в Json массив - после конвертации и возврата из метода та же 500 ошибка.