! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

ASP.NET Core 응용 프로그램 내에서 JavaScript 보고 도구를 사용하는 방법 > 온라인 스터디

본문 바로가기

ActiveReportsJS

온라인 스터디

기타 ASP.NET Core 응용 프로그램 내에서 JavaScript 보고 도구를 사용하는 방법

페이지 정보

작성자 GrapeCity 작성일 2022-12-16 09:08 조회 352회 댓글 0건

본문

ActiveReportsJS는 서버 종속성이 없는 100% 클라이언트 측 보고 도구입니다. 즉, ASP.NET Core를 비롯하여 모든 웹 프레임워크와 ActiveReportsJS를 함께 사용할 수 있습니다. 이 문서에는 ASP.NET Core 응용 프로그램과 ActiveReportsJS를 통합하는 방법에 대한 간단하면서 완전한 자습서가 포함되어 있습니다. 자습서를 마치면 다음을 수행할 수 있습니다.

  • 새로운 ASP.NET Core 응용 프로그램 만들기
  • SQLite 데이터베이스에서 JSON 형식 데이터를 검색하기 위한 앱 경로 만들기
  • 검색된 JSON 데이터를 시각화하기 위한 ActiveReportsJS 보고서 만들기
  • ActivReportsJS Report Viewer 컴포넌트를 호스팅하고 보고서를 표시하기 위한 정적 HTML 페이지 만들기

사전 준비 사항

다음 콘텐츠는 컴퓨터에 ActiveReportsJS가 설치되어 있다고 가정합니다. 설치되지 않은 경우 ActiveReportsJS 웹사이트에서 다운로드할 수 있습니다. Visual Studio 2022 역시 설치되어 있어야 합니다.

ASP.NET Core 응용 프로그램 만들기

Visual Studio 2022를 실행하고 “새 프로젝트 만들기” 옵션을 선택합니다. “ASP.NET Core Empty with C#” 템플릿을 선택하고 “다음” 버튼을 클릭합니다.

img

프로젝트 구성” 대화 상자에서 프로젝트 이름을 "ReportingOnDotNet"으로 설정하거나 다른 유효한 이름을 선택하여 설정하고 프로젝트 파일이 저장될 디렉터리를 선택하고 “다음” 버튼을 클릭합니다.

img

추가 정보” 대화 상자에서 “HTTPS 구성” 체크박스가 선택 취소 되었는지 확인합니다.

img

응용 프로그램 데이터 추가

이 문서에서는 Chinook SQLite 데이터베이스를 사용합니다. 응용 프로그램의 루트에서 “data” 폴더를 만들고 chinook.zip 파일을 다운로드하여 이 폴더에 압축을 풉니다.

다음으로 “Microsoft.EntityFrameworkCore.Sqlite” 및 “Microsoft.EntityFrameworkCore.Tools” 패키지를 프로젝트에 추가합니다. NuGet 패키지를 설치하는 방법에 대한 자세한 내용은 MSDN 페이지를 확인하십시오.

패키지 관리자 콘솔을 열고 다음 명령을 실행합니다.

Scaffold-DbContext "DataSource=Data\chinook.db" Microsoft.EntityFrameworkCore.Sqlite -Tables Customers -Context ChinookContext

Scaffold-DbContext 명령은 SQLite 데이터베이스로부터 정보를 검색하는 데 필요한 유형을 생성합니다.

Program.cs 파일을 열고 파일 내용을 다음으로 바꿉니다.

using  ReportingOnDotNet;
using  System.Text.Json;

var  db = new  ChinookContext();
var  builder = WebApplication.CreateBuilder(args);
var  app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles(new  StaticFileOptions{
  ServeUnknownFileTypes = true,
});

app.MapGet("/Customers", () => JsonSerializer.Serialize(db.Customers));

app.Run();

디버그를 사용하거나 사용하지 않고 응용 프로그램을 시작한 다음 브라우저에서 http://localhost:5255/Customers URL을 방문하여 JSON 형식으로 고객 목록을 반환하는지 확인합니다.

 

ActiveReportsJS 보고서 만들기

JSON 형식으로 고객 목록을 반환하는 이러한 데이터를 API에서 시각화하는 보고서를 만들어보겠습니다.

독립 실행형 보고서 디자이너 응용 프로그램에서 파일 메뉴를 클릭하고 새로 만든 보고서를 위해 연속 페이지 레이아웃 템플릿을 선택합니다.

속성 검사자의 데이터 패널을 열고 추가 버튼을 클릭합니다.

데이터 소스 편집기 대화 상자에서 NAME 필드에 "Chinook"라고 입력하고, ENDPOINT 필드에 http://localhost:5255/Customers를 입력하고 변경 사항 저장 버튼을 클릭합니다.

img

데이터 패널에서 데이터 소스 근처에 있는 + 아이콘을 클릭합니다.

데이터 집합 편집기 대화 상자에서 NAME 필드에 Customers라고 입력하고 JSON Path 필드에는 $.*를 입력합니다.

유효성 검사 버튼을 클릭하고 데이터베이스 필드 섹션에 [13 items]라는 텍스트가 표시되는지 확인한 다음 변경 사항 저장 버튼을 클릭합니다.

img

데이터 패널에서 “Customers” 데이터 집합을 확장하고, “필드 선택…” 버튼을 클릭하고, “CustomerId”, “FirstName”, “LastName” 및 “Country” 필드를 선택하여 보고서 본문에 끌어서 놓습니다. 열 머리글 행과 세부 정보 행으로 구성된 표 데이터 영역이 자동으로 생성됩니다.

img

각 열 헤더를 선택하고, 도구 모음의 해당 버튼을 사용하여 글꼴 두께를 굵게로 설정합니다.

CustomerID를 표시하는 텍스트 상자의 텍스트 맞춤을 왼쪽으로 설정합니다.

각 열의 크기를 조정하여 표가 전체 보고서 본문 너비에 맞도록 할 수 있습니다.

표 디자인은 다음 그림에 있는 항목과 같습니다.

img

파일 메뉴를 클릭하고 새로 만든 보고서를 응용 프로그램의 “wwwroot” 폴더(만들어야 함)에 Customers.rdlx-json이라는 이름으로 저장합니다.

보고서를 표시할 HTML 페이지 만들기

다음 콘텐츠를 사용하여 새로 만든 “wwwroot” 폴더에 “customers.html” 파일을 추가합니다.

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customers Report</title>
  <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
    type="text/css" />
  <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
    type="text/css" />
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
  <style>
    #viewer-host {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="viewer-host"></div>
  <script>
    var viewer = new ActiveReports.Viewer("#viewer-host");
    viewer.open('Customers.rdlx-json');
  </script>
</body>

</html>

 

응용 프로그램을 다시 시작하고 브라우저에서 http://localhost:5255/customers.html URL을 방문하면 이 페이지에는 고객 보고서가 표시됩니다.

img



지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.