Report Viewer is not working
Hello,
I recently installed bold report, followed the entire configuration guide, however when running the simulation it gives the following error. What can it be?
Thanks
Net Core 7.0
view Relatorio.cshtml
<bold-report-viewer id="viewer" report-path="sales-order-detail.rdl" report-service-url="/api/ReportViewer"></bold-report-viewer>
wwwroot
ReportViewerController
[Route("api/[controller]/[action]")]
[Microsoft.AspNetCore.Cors.EnableCors("AllowAllOrigins")]
public class ReportViewerController : Controller, IReportController
{
// Report viewer requires a memory cache to store the information of consecutive client request and
// have the rendered Report Viewer information in server.
private Microsoft.Extensions.Caching.Memory.IMemoryCache _cache;
// IWebHostEnvironment used with sample to get the application data from wwwroot.
private Microsoft.AspNetCore.Hosting.IWebHostEnvironment _hostingEnvironment;
// Post action to process the report from server based json parameters and send the result back to the client.
public ReportViewerController(Microsoft.Extensions.Caching.Memory.IMemoryCache memoryCache,
Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironment)
{
_cache = memoryCache;
_hostingEnvironment = hostingEnvironment;
}
// Post action to process the report from server based json parameters and send the result back to the client.
[HttpPost]
public object PostReportAction([FromBody] Dictionary<string, object> jsonArray)
{
//Contains helper methods that help to process a Post or Get request from the Report Viewer control and return the response to the Report Viewer control
return ReportHelper.ProcessReport(jsonArray, this, this._cache);
}
// Method will be called to initialize the report information to load the report with ReportHelper for processing.
[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
string basePath = _hostingEnvironment.WebRootPath;
// Here, we have loaded the sales-order-detail.rdl report from application the folder wwwroot\Resources. sales-order-detail.rdl should be there in wwwroot\Resources application folder.
FileStream inputStream = new FileStream(basePath + @"\Resources\" + reportOption.ReportModel.ReportPath, FileMode.Open, FileAccess.Read);
MemoryStream reportStream = new MemoryStream();
inputStream.CopyTo(reportStream);
reportStream.Position = 0;
inputStream.Close();
reportOption.ReportModel.Stream = reportStream;
}
// Method will be called when reported is loaded with internally to start to layout process with ReportHelper.
[NonAction]
public void OnReportLoaded(ReportViewerOptions reportOption)
{
}
//Get action for getting resources from the report
[ActionName("GetResource")]
[AcceptVerbs("GET")]
// Method will be called from Report Viewer client to get the image src for Image report item.
public object GetResource(ReportResource resource)
{
return ReportHelper.GetResource(resource, this, _cache);
}
[HttpPost]
public object PostFormReportAction()
{
return ReportHelper.ProcessReport(null, this, _cache);
}
}
_Layout.cshtml
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - LIVET</title>
<link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" rel='nofollow' href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" rel='nofollow' href="~/LIVET.styles.css" asp-append-version="true" />
<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/23.1.44/bootstrap5.css" />
<script src="~/js/ej2/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/23.1.44/dist/ej2.min.js"></script>
<link rel="stylesheet" rel='nofollow' href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel='nofollow' href="https://cdn.boldreports.com/5.3.8/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.boldreports.com/5.3.8/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.3.8/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/5.3.8/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/5.3.8/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.3.8/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/5.3.8/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/5.3.8/scripts/data-visualization/ej2-maps.min.js"></script>
<script src="https://cdn.boldreports.com/5.3.8/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.3.8/scripts/common/bold.reports.widgets.min.js"></script>
<!--Render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/5.3.8/scripts/data-visualization/ej.chart.min.js"></script>
<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/5.3.8/scripts/bold.report-viewer.min.js"></script>
.......
</header>
<div class="custom-container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<ejs-scripts></ejs-scripts>
@await RenderSectionAsync("Scripts", required: false)
<bold-script-manager></bold-script-manager>
</body>
</html>
program.cs
builder.Services.AddCors(o => o.AddPolicy("AllowAllOrigins", builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
}));
SIGN IN To post a reply.
3 Replies
Hello,
Thank you very much. Worked perfectly.
I had commented this script highlighted in yellow, but it is showing this error when it is uncommented. When I comment the script highlighted in green the error is resolved, but the report no longer works, Could you tell me how to resolve it?
Thanks!
@using Microsoft.AspNetCore.Identity;
@inject SignInManager<ApplicationUser> SignInManager
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - LIVET</title>
<link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" rel='nofollow' href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" rel='nofollow' href="~/LIVET.styles.css" asp-append-version="true" />
<link rel="stylesheet" rel='nofollow' href=https://cdn.syncfusion.com/ej2/23.1.44/bootstrap5.css />
<script src="~/js/ej2/ej2.min.js"></script>
<script src=https://cdn.syncfusion.com/ej2/23.1.44/dist/ej2.min.js></script>
<link rel="stylesheet" rel='nofollow' href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css />
<link rel='nofollow' href=https://cdn.boldreports.com/5.3.8/content/material/bold.reports.all.min.css rel="stylesheet" />
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>
@* <!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src=https://cdn.boldreports.com/5.3.8/scripts/common/ej2-base.min.js></script>
<script src=https://cdn.boldreports.com/5.3.8/scripts/common/ej2-data.min.js></script>
<script src=https://cdn.boldreports.com/5.3.8/scripts/common/ej2-pdf-export.min.js></script>
<script src=https://cdn.boldreports.com/5.3.8/scripts/common/ej2-svg-base.min.js></script>
<script src=https://cdn.boldreports.com/5.3.8/scripts/data-visualization/ej2-lineargauge.min.js></script>
<script src=https://cdn.boldreports.com/5.3.8/scripts/data-visualization/ej2-circulargauge.min.js></script>
<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src=https://cdn.boldreports.com/5.3.8/scripts/data-visualization/ej2-maps.min.js></script>*@
<script src=https://cdn.boldreports.com/5.3.8/scripts/common/bold.reports.common.min.js></script>
<script src=https://cdn.boldreports.com/5.3.8/scripts/common/bold.reports.widgets.min.js></script>
<!--Render the chart item. Add this script only if your report contains the chart report item.-->
<script src=https://cdn.boldreports.com/5.3.8/scripts/data-visualization/ej.chart.min.js></script>
<!-- Report Viewer component script-->
<script src=https://cdn.boldreports.com/5.3.8/scripts/bold.report-viewer.min.js></script>
<style>
.e-input-group.e-corner {
border-radius: 10px;
}
.e-float-input, .e-float-input.e-control-wrapper {
margin-top: 0px !important;
}
.grid-container {
margin-top: 20px; /* Você pode ajustar o valor conforme necessário */
/* Ou use padding-bottom em vez disso, dependendo do resultado desejado */
}
.btn-excluir {
background-color: red;
padding: 5px;
color: white;
width: 100px;
}
/* Em custom-styles.css */
.e-grid .e-summarycell.e-templatecell {
background-color: green; /* Defina a cor desejada */
color: white;
font-weight: bold;
text-align: right;
}
.btn-excluirmoradores {
background-color: red;
padding: 5px;
color: white;
width: 200px;
vertical-align:middle;
}
.btn-excluirleituras {
background-color: red;
padding: 5px;
color: white;
width: 120px;
vertical-align: middle;
}
.btn-editar {
background-color: green;
padding: 5px;
color: white;
width: 100px;
}
.btn-orange {
background-color: orange;
padding: 5px;
color: black;
width: 150px;
}
.btn-marrom {
background-color: rosybrown;
padding: 5px;
color: black;
width: 150px;
}
.btn-verde {
background-color: lightgreen;
padding: 5px;
color: black;
width: 150px;
}
.btn-blue {
background-color: lightblue;
padding: 5px;
color: black;
width: 150px;
}
.btn-amarelo {
background-color: yellow;
padding: 5px;
color: black;
width: 150px;
}
.custom-block {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0; /* Fundo cinza claro */
border: 1px solid #ccc; /* Borda cinza mais escura */
padding: 10px;
}
.custom-block h4 {
margin: 0; /* Remover margem padrão do h4 */
font-size: 18px; /* Tamanho da fonte ajustável */
}
.button-container {
display: flex;
gap: 50px; /* Espaçamento de 50px entre os botões */
align-items: center; /* Centraliza verticalmente os botões */
}
.custom-blockdet {
width: 100%; /* Define a largura para ocupar toda a tela */
display: flex; /* Torna o bloco um contêiner flexível */
justify-content: space-between; /* Espaçamento entre elementos no eixo principal (horizontal) */
align-items: center; /* Centraliza verticalmente os elementos dentro do bloco */
}
.button-containerdetails {
align-items: center;
background-color: #f0f0f0;
display: flex;
justify-content: space-between;
border: 1px solid #ccc; /* Borda cinza mais escura */
padding: 10px;
}
.button-left {
flex: 1; /* Expande para ocupar todo o espaço disponível à esquerda */
text-align: left; /* Alinha o botão à esquerda */
}
.button-right {
text-align: right; /* Alinha o botão à direita */
}
.custom-filter {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0; /* Fundo cinza claro */
border: 1px solid #ccc; /* Borda cinza mais escura */
padding: 10px;
}
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.0em;
}
.create-button-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0; /* Fundo cinza claro */
border: 1px solid #ccc; /* Borda cinza mais escura */
padding: 10px;
}
.grid-container {
padding-top:20px;
}
.create-button-container h4 {
margin: 0; /* Remove margens padrão */
font-size: 18px; /* Tamanho da fonte ajustável */
}
.btn-primary {
background-color: #28a745; /* Cor de fundo do botão */
border-color: #28a745; /* Cor da borda do botão */
}
.e-grid * {
font-size: 11px !important;
}
.e-grid td.e-selectionbackground {
background-color: #ADD8E6;
}
.e-grid .e-headercell {
background-color: #f5f5f5;
}
.e-grid .e-toolbar-items {
background-color: #f0f0f0;
}
</style>
<script> var L10n = ej.base.L10n;
L10n.load({ "pt": { 'datepicker': { today: 'hoje' }, "schedule": { "day": "Dia", "week": "Semana", "workWeek": "Semana de trabalho",
"month": "Mês",
"agenda": "Agenda",
"weekAgenda": "Agenda da semana",
"workWeekAgenda": "Agenda da Semana de Trabalho",
"monthAgenda": "Agenda do mês",
"today": "Hoje",
"noEvents": "Sem eventos",
"emptyContainer": "Não há eventos agendados para este dia.",
"allDay": "Dia todo",
"start": "Começar",
"end": "Fim",
"more": "Mais",
"close": "Fechar",
"cancel": "Cancelar",
"noTitle": "(Sem título)",
"delete": "Excluir",
"deleteEvent": "Este evento",
"deleteMultipleEvent": "Excluir vários eventos",
"selectedItems": "Itens selecionados",
"deleteSeries": "Série inteira",
"edit": "Editar",
"editSeries": "Série inteira",
"editEvent": "Este evento",
"createEvent": "Crio",
"subject": "Sujeito",
"addTitle": "Adicionar título",
"moreDetails": "Mais detalhes",
"save": "Salve ",
"editContent": "Como você gostaria de alterar o compromisso na série?",
"deleteContent": "Tem certeza de que deseja excluir este evento?",
"deleteMultipleContent": "Tem certeza de que deseja excluir os eventos selecionados?",
"newEvent": "Novo evento",
"title": "Título",
"location": "Localização",
"description": "Descrição",
"timezone": "Fuso horário",
"startTimezone": "Iniciar fuso horário",
"endTimezone": "Fuso horário final",
"repeat": "Repetir",
"saveButton": "Salve ",
"cancelButton": "Cancelar",
"deleteButton": "Excluir",
"recurrence": "Recorrência",
"wrongPattern": "O padrão de recorrência não é válido.",
"seriesChangeAlert": "Deseja cancelar as alterações feitas em instâncias específicas desta série e associá-las à série inteira novamente?",
"createError": "A duração do evento deve ser menor que a frequência com que ele ocorre. Diminua a duração ou altere o padrão de recorrência no editor de eventos de recorrência.",
"sameDayAlert": "Duas ocorrências do mesmo evento não podem ocorrer no mesmo dia.",
"editRecurrence": "Editar recorrência",
"repeats": "Repete",
"alert": "Alerta",
"startEndError": "A data final selecionada ocorre antes da data de início.",
"invalidDateError": "O valor da data inserida é inválido.",
"blockAlert": "Os eventos não podem ser agendados dentro do intervalo de tempo bloqueado.",
"ok": "Está bem",
"yes": "sim",
"no": "Não",
"occurrence": "Ocorrência",
"series": "Series",
"previous": "Anterior",
"next": "Próximo",
"timelineDay": "Dia da linha do tempo",
"timelineWeek": "Semana da Linha do Tempo",
"timelineWorkWeek": "Semana de trabalho da linha do tempo",
"timelineMonth": "Mês da linha do tempo",
"timelineYear": "Ano da Linha do Tempo",
"editFollowingEvent": "Eventos seguintes",
"deleteTitle": "Excluir evento",
"editTitle": "Editar evento",
"beginFrom": "Começar de",
"endAt": "Termina em"
},
"uploader": {
"invalidFileType": "Formato inválido",
"Browse": "Procurar...",
"Clear": "Limpar",
"Upload": "Upload",
"dropFilesHint": "Ou arraste o arquivo aqui",
"uploadFailedMessage": "Falha no upload",
"uploadSuccessMessage": "Upload realizado com sucesso",
"removedSuccessMessage": "Fichier supprimé avec succès",
"removedFailedMessage": "Le fichier n'a pas pu être supprimé",
"inProgress": "Em progresso",
"readyToUploadMessage": "Pronto",
"remove": "Remover",
"cancel": "Cancelar",
"delete": "Apagar"
},
grid: {
Add: 'Novo',
Edit: 'Editar',
Cancel: 'Cancelar',
Update: 'Atualizar',
Delete: 'Excluir',
EmptyRecord: 'Sem registros',
GroupDropArea: 'Arraste a coluna para agrupar',
Item: 'Item',
Items: 'Itens',
Search: 'Pesquisa',
TextFilter: 'Filtro',
Equal: 'Igual',
NotEqual: 'Diferente',
StartsWith: 'Começa Com',
EndsWith: 'Termina Com',
Contains: 'Contém',
CustomFilter: 'Filtro Customizado',
LessThan: 'Menor que',
GreaterThan: 'Maior que',
ClearFilter: 'Limpar',
AND: 'E',
OR: 'Ou',
ShowRowsWhere: 'Filtrar linhas',
SelectAll: 'Selecionar tudo',
NumberFilter: 'Filtro numérico',
CancelButton: 'Cancelar',
SaveButton: 'Salvar',
DateFilter: 'Filtro datas',
LessThanOrEqual: 'Menor ou Igual',
GreaterThanOrEqual: 'Maior ou Igual',
Between: 'Intervalo',
EnterValue: 'Digite o valor',
CustomFilterPlaceHolder: 'Digite o valor',
CustomFilterDatePlaceHolder: 'Selecione a data',
Excelexport: 'Excel'
},
'pager': {
'currentPageInfo': '{0} de {1} páginas',
'totalItemsInfo': '({0} itens)'
},
"recurrenceeditor": {
"none": "Nenhum",
"daily": "Diariamente",
"weekly": "Semanal",
"monthly": "Por mês",
"month": "Mês",
"yearly": "Anual",
"never": "Nunca",
"until": "Até",
"count": "Contagem",
"first": "Primeiro",
"second": "Segundo",
"third": "Terceiro",
"fourth": "Quarto",
"last": "Último",
"repeat": "Repetir",
"repeatEvery": "Repita cada",
"on": "Repetir em",
"end": "Fim",
"onDay": "Dia",
"days": "Dias)",
"weeks": "Semana (s)",
"months": "Mês (es)",
"years": "Anos)",
"every": "cada",
"summaryTimes": "tempo (s)",
"summaryOn": "em",
"summaryUntil": "até",
"summaryRepeat": "Repete",
"summaryDay": "dias)",
"summaryWeek": "semana (s)",
"summaryMonth": "mês (es)",
"summaryYear": "anos)",
"monthWeek": "Mês Semana",
"monthPosition": "Posição do mês",
"monthExpander": "Expansor do mês",
"yearExpander": "Expansor do ano",
"repeatInterval": "Intervalo de repetição"
},
"calendar": {
"today": "Hoje"
}
}
});
loadCultureFiles('pt');
function loadCultureFiles(name) {
var files = ['ca-gregorian.json', 'numberingSystems.json', 'numbers.json', 'timeZoneNames.json', 'ca-islamic.json'];
var loader = ej.base.loadCldr;
var loadCulture = function (prop) {
var val, ajax;
if (files[prop] === 'numberingSystems.json') {
ajax = new ej.base.Ajax(location.origin + '/cldr-data/supplemental/' + files[prop], 'GET', false);
} else {
ajax = new ej.base.Ajax(location.origin + '/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
}
ajax.onSuccess = function (value) {
val = value;
};
ajax.send();
loader(JSON.parse(val));
};
for (var prop = 0; prop < files.length; prop++) {
loadCulture(prop);
}
}
</script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container-fluid"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index"> <img style="width: 118px; height: 38px;" src=https://www.portallivet.com.br/logolivet.png alt="Logo" /> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @if (SignInManager.IsSignedIn(User)) { <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
@{ string nomeservidor = ""; if (!@Context.Request.Host.Value.Contains("localhost")) { nomeservidor = "/livet"; } List<object> menuItems = new List <object>(); //HOME menuItems.Add(new { text = "Home", url = nomeservidor + "/Home/Index"
});
menuItems.Add(new { text = "Relatório teste", url = nomeservidor + "/Home/Relatorio" }); //DEPARTAMENTOS menuItems.Add(new { text = "Cadastros", items = new List <object>() {
new { text = "Administradoras", url = nomeservidor + "/Administradoras/Index" },
new { text = "Colaboradores", url = nomeservidor + "/Colaboradores/Index" },
new { text = "Condomínios", url = nomeservidor + "/Condominios/Index" } } }); //TABELAS menuItems.Add(new { text = "Tabelas", url = nomeservidor + "/Tabelas/Index" }); } <ejs-menu id="menu" items="menuItems"></ejs-menu> <partial name="_LoginPartial" /> </div> } </div>
</nav>
</header>
<div class="custom-container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
</footer>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<ejs-scripts></ejs-scripts>
@await RenderSectionAsync("Scripts", required: false)
<bold-script-manager></bold-script-manager>
</body>
</html>
SIGN IN To post a reply.
