【发布时间】：2018-11-21 16:50:29
【问题描述】：
我正在开发一个 ASP.NET Core 2.1 网站，我正在使用 Datatables.net 显示从后端 API 检索到的记录列表。
我要解决的这个问题是，每当从后端 API 检索数据时发生错误时，我希望错误消息出现在与数据表相同的页面上的 Bootstrap 警报错误 DIV 中。
我查看了https://datatables.net/forums/discussion/30033/override-default-ajax-error-behavior 和Enable datatable warning alert，但我不擅长javascript，所以我很难确定如何实现此功能。
目前，我在我的 cshtml 页面中设置了如下数据表；
<script>
jQuery(document).ready(function ($) {
var table = $("#sitelist").DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"orderMulti": false,
"ajax": {
"url": "/Sites/LoadData",
"type": "POST",
"datatype": "json"
},
"columnDefs": [
{ "orderable": false, "targets": 6 },
{ "className": "text-center", "targets": [4, 5] },
{
"targets": [4, 5],
"createdCell": function(td, cellData, rowData, row, col) {
if (cellData) {
$(td).html('<i class="far fa-check-circle text-primary""></i>');
} else {
$(td).html('<i class="far fa-times-circle text-danger""></i>');
}
}
}
],
"columns": [
{ "data": "Id", "name": "Id", "autoWidth": true, "defaultContent": "" },
{ "data": "SiteName", "name": "SiteName", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyId", "name": "CompanyId", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyName", "name": "CompanyName", "autoWidth": true, "defaultContent": "" },
{ "data": "IsAdminSite", "name": "IsAdminSite", "autoWidth": true, "defaultContent": "" },
{ "data": "IsEnabled", "name": "IsEnabled", "autoWidth": true, "defaultContent": "" },
{
"render": function (data, type, full, meta) { return `<a href="/sites/edit?id=${full.Id}"><i class="far fa-edit text-primary" title="Edit"></a>`; }
}
],
// From StackOverflow http://stackoverflow.com/a/33377633/1988326 - hides pagination if only 1 page
"preDrawCallback": function (settings) {
var api = new $.fn.dataTable.Api(settings);
var pagination = $(this)
.closest('.dataTables_wrapper')
.find('.dataTables_paginate');
pagination.toggle(api.page.info().pages > 1);
}
});
});
</script>
这是我的 SitesController 类中的 loaddata 操作；
public async Task<IActionResult> LoadData()
{
try
{
await SetCurrentUser();
ViewData["Role"] = _currentRole;
var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
var start = Request.Form["start"].FirstOrDefault();
var length = Request.Form["length"].FirstOrDefault();
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
var searchValue = Request.Form["search[value]"].FirstOrDefault();
var pageSize = length != null ? Convert.ToInt32(length) : 0;
var skip = start != null ? Convert.ToInt32(start) : 0;
var request = new SitesGetListRequest
{
OrderBy = SetOrderBy(sortColumn, sortColumnDirection),
Filter = SetFilter(searchValue),
PageNumber = (skip / pageSize) + 1,
PageSize = pageSize
};
var tokenSource = new CancellationTokenSource();
var token = tokenSource.Token;
var endpoint = $"api/companies/{SetCompanyId()}/sites/filtered";
var siteData = await _client.GetSiteListAsync(request, endpoint, token);
if (siteData.Sites != null)
{
return Json(new
{
draw,
recordsFiltered = siteData.Paging.TotalCount,
recordsTotal = siteData.Paging.TotalCount,
data = siteData.Sites.ToList()
});
}
//TODO: Find a way to pass error to a Bootstrap alert-warning DIV rather than the jQuery (javascript) alert box
var errorMessage = $"Http Status Code: {siteData.StatusCode} - {siteData.ErrorMessages.FirstOrDefault()}";
return Json(new
{
data = "",
error = errorMessage
});
}
catch (Exception ex)
{
const string message = "An exception has occurred trying to get the list of Site records.";
_logger.LogError(ex, message);
throw;
}
}
就目前而言，如果从 API 调用返回的对象中存在错误，我会向返回的 json 中的错误属性传递一条消息，它会在我的 cshtml 页面上显示为一个 javascript 警报弹出框，当点击确定，数据表显示“No records found”，如下图所示；
还有……
我想要的是在 cshtml 页面顶部的引导程序警报危险 div 中显示错误消息。我不希望出现警报弹出窗口，但我仍然希望数据表显示“未找到记录”。
我认为Enable datatable warning alert 上描述了我正在寻找的内容...
使用禁用警报弹出窗口
$.fn.dataTable.ext.errMode = 'none';
并使用
将错误消息传递给 BootStrap div $('#example')
.on( 'error.dt', function ( e, settings, techNote, message ) {
console.log( 'An error has been reported by DataTables: ', message );
} )
.DataTable();
但不是
console.log( 'An error has been reported by DataTables: ', message );
使用类似的东西
$("#error").html(MY ERROR MESSAGE HERE);
并将 id="error" 分配给引导 div。
但是，我无法弄清楚如何从 SitesController 中的 loaddata 方法触发 Ajax 调用，以及如何正确地将错误事件添加到数据表脚本的开头。
在我花更多时间尝试解决这个问题之前，我想我会把它放在 SO 上，看看是否有 javascrit/jquery 经验的人可以提供一些指导。
【问题讨论】：
标签： javascript c# jquery datatables asp.net-core-mvc