One of the common uses of this beautiful reporting tool is in CRM (customer relationship management) suites. The applications are used to increase popular ways of centralizing and optimizing sales and marketing operations. Using BI reports, companies can reduce the time it takes to derive actionable BI insights.<\/p>\n
Here in this blog, we\u2019ll learn how to embed beautiful reporting into ASP Net core web applications.<\/p>\n
<\/span>HTML5 Report Viewer<\/span><\/h3>\nThe viewer displays report documents on a webpage. They use a custom JQuery based widget, which comes with rich-feature and stateful plugins. The viewer stores the layout in the HTML template, which supports mobile and desktop browsers with full customized methods. HTML viewer includes built-in search functions, hyperlink interaction, and multi-page zoom view support.<\/p>\n
<\/span>Check a few of the HTML5 viewer features<\/span><\/h3>\n\n- The interactive view allows drill-down and drill-through<\/li>\n
- Ability to scale the pages for the best viewing experience<\/li>\n
- Report Parameter intuitive UI for user input<\/li>\n
- Customized layout based on a pure HTML5 template<\/li>\n
- Support mobile as well as desktop browsers<\/li>\n
- Color themes using Kendo UI theming mechanism<\/li>\n
- Scale the pages for best experience including full-page or custom scale factor<\/li>\n<\/ul>\n
<\/span>What are the system requirements for the HTML5 report viewer?<\/span><\/h3>\n\n- Required Service: The viewer would need a running instance of the Telerik Reporting rest service to display reports.<\/li>\n
- Required JavaScript Libraries and Files:<\/li>\n
- JQuery minimum required version 1.9.1<\/li>\n
- Kendo UI Professional Q3 2015<\/li>\n
- HTML5 Report Viewer JavaScript<\/li>\n
- Required HTML5 compliant browser<\/li>\n<\/ul>\n
<\/span>Use HTML5 report viewer with Reporting REST Service<\/span><\/h3>\nIt\u2019s one of the quickest ways to add an HTML5 report viewer to a web project. Here, the viewer won\u2019t be able to process and render work by itself, so it uses the Reporting Rest service. The beautiful reporting services wrap the report engine and expose its functionality over HTTP<\/strong> <\/span><\/a>so the viewer can access it easily. There\u2019s a common scenario used with viewer-service interaction that is described with a high level of abstraction explained below<\/p>\n![\"HTML5](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/09\/image_2020_09_01T05_31_12_950Z.png\" "\\"HTML5")
Image Courtesy: https:\/\/www.telerik.com\/<\/figcaption><\/figure>\n\n- The viewer requests a report document. It provides report definition with a unique identifier<\/li>\n
- The service search for the requested report definition and guide the report engine to process and render in the HTML5 report document<\/li>\n
- Later the service will return the produced result to the viewer<\/li>\n
- Finally, the viewer will display the report document to the user<\/li>\n<\/ul>\n
<\/span>Host Reporting REST service in your ASP.Net core web Application<\/strong><\/span><\/h3>\n![\"Host](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/09\/asp-net-core-2.png\")
<\/p>\n
No viewer can function without the service. Let\u2019s assume that the project display report is a service project then uses a separate project with the solution as explained in the below blog. If you don\u2019t have ASP net core web applications, then you can hire an ASP.Net core developer<\/strong><\/span><\/a> or an ASP.Net development company. Or else follow the below steps to create one:<\/p>\n\n- Open Visual Studio 2019<\/li>\n
- Now, Open File>New>Project<\/li>\n
- Choose ASP.Net Core<\/strong> Web Application and Press Next<\/li>\n
- Enter your Project name and click to create one<\/li>\n
- Choose .Net Core and ASP.Net Core 3.1 framework.<\/strong><\/li>\n
- Choose web app template<\/strong> and click on create<\/li>\n<\/ul>\n
Now you can host a reporting rest service by adding NuGet Package. Add own dependencies to project using service packages like Microsoft.AspNet.Core<\/strong>.MVC.NewtonsoftJson.<\/p>\nWe can activate NewtonsoftJson services by using the below code:
\nservices.AddRazorPages().AddNewtonsoftJson();<\/p>\n
<\/span>Now add, minimal Reporting Rest services like:<\/span><\/h3>\n![\"ASP.Net](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/09\/image_2020_09_01T05_32_09_493Z.png\" "\\"ASP.Net")
Image Courtesy: https:\/\/www.telerik.com\/<\/figcaption><\/figure>\nThe storage section in the above service specifies internal state objects and temp files.
\nReportSourceResolver specifies for report definition inside the Reports application folder.<\/p>\n
There is no report folder yet, as we need to add a report, let\u2019s create a folder in the project root named under Reports and copy your report definition file into it.
\nConfigure the API controller inside ConfigureServices method
\nservices.AddControllers();<\/p>\n
<\/span>Now, Map the controller endpoints by adding the code below:<\/span><\/h3>\n![\"Now,](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/09\/image_2020_09_01T05_32_14_588Z.png\" "\\"Now,")
<\/p>\n
Now the next step is to create an actual Reportscontroller class
\nAt the root of the project add new controllers\u2019 folder
\nSelect Add>Controller<\/p>\n
Choose an API controller with an empty template and click to Add it
\nName new controller ReportsController.cs and click on Add<\/p>\n
<\/span>Know how to change the content of the new controller<\/span><\/h3>\n![\"Know](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/09\/image_2020_09_01T05_32_19_948Z.png\" "\\"Know")
<\/p>\n
Request a Report Document and Display Report Document in HTML5 Report Viewer
\nIn this section, we\u2019ll get to know how to request a report document and display it into the HTML5 report viewer.<\/p>\n
Add custom section like the head element of the Layout page<\/p>\n
<head><\/strong>
\n…<\/strong>
\n@RenderSection(“Head”, required: false)<\/strong>
\n<\/head><\/strong><\/p>\nSo now, inside pages\/Index.cshtml add div element to hold the viewer. The element inside it comes with unique id. Set it with CSS file, inline style dimension<\/p>\n
<div id=”reportViewer1″ style=”width:840px; height:1200px”><\/strong>
\n<\/div><\/strong><\/p>\nLater, add a link to section head to the desired Kendo UI<\/strong><\/span><\/a> theme in custom head and finally to the viewer widget\u2019s JavaScript file by calling the Telerik_ReportViewer method.<\/p>\n![\"Telerik_ReportViewer](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/09\/image_2020_09_01T05_32_33_680Z.png\" "\\"Telerik_ReportViewer")
<\/p>\n
Understand below Scripts section which helps to insert viewer script after JQuery<\/p>\n
![\"Understand](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/09\/image_2020_09_01T05_32_38_284Z.png\" "\\"Understand")
<\/p>\n
Check the final Index. cshtml file<\/strong><\/h4>\n![\"Check](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/09\/image_2020_09_01T05_32_43_626Z.png\" "\\"Check")
<\/p>\n
Now press F5 in visual studio and check HTML5 Report Viewer. The service instructs Report Engine to render the report definition in HTML5 form and return it to the viewer as a report document.<\/p>\n
<\/span>Check final output<\/span><\/h2>\n![\"Check](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/09\/image_2020_09_01T05_32_48_494Z.png\" "\\"Check")
Image Courtesy: https:\/\/www.telerik.com\/<\/figcaption><\/figure>\nIf you want to check the errors, then press F12 in the browser and log the network traffic. If you want to hire ASP.NET Core Developer or looking for ASP.NET Development Company<\/strong><\/span><\/a> connect with us to discuss your requirements.<\/p>\n
- \n
- The interactive view allows drill-down and drill-through<\/li>\n
- Ability to scale the pages for the best viewing experience<\/li>\n
- Report Parameter intuitive UI for user input<\/li>\n
- Customized layout based on a pure HTML5 template<\/li>\n
- Support mobile as well as desktop browsers<\/li>\n
- Color themes using Kendo UI theming mechanism<\/li>\n
- Scale the pages for best experience including full-page or custom scale factor<\/li>\n<\/ul>\n
<\/span>What are the system requirements for the HTML5 report viewer?<\/span><\/h3>\n
- \n
- Required Service: The viewer would need a running instance of the Telerik Reporting rest service to display reports.<\/li>\n
- Required JavaScript Libraries and Files:<\/li>\n
- JQuery minimum required version 1.9.1<\/li>\n
- Kendo UI Professional Q3 2015<\/li>\n
- HTML5 Report Viewer JavaScript<\/li>\n
- Required HTML5 compliant browser<\/li>\n<\/ul>\n
<\/span>Use HTML5 report viewer with Reporting REST Service<\/span><\/h3>\n
It\u2019s one of the quickest ways to add an HTML5 report viewer to a web project. Here, the viewer won\u2019t be able to process and render work by itself, so it uses the Reporting Rest service. The beautiful reporting services wrap the report engine and expose its functionality over HTTP<\/strong> <\/span><\/a>so the viewer can access it easily. There\u2019s a common scenario used with viewer-service interaction that is described with a high level of abstraction explained below<\/p>\n
Image Courtesy: https:\/\/www.telerik.com\/<\/figcaption><\/figure>\n - \n
- The viewer requests a report document. It provides report definition with a unique identifier<\/li>\n
- The service search for the requested report definition and guide the report engine to process and render in the HTML5 report document<\/li>\n
- Later the service will return the produced result to the viewer<\/li>\n
- Finally, the viewer will display the report document to the user<\/li>\n<\/ul>\n
<\/span>Host Reporting REST service in your ASP.Net core web Application<\/strong><\/span><\/h3>\n
<\/p>\nNo viewer can function without the service. Let\u2019s assume that the project display report is a service project then uses a separate project with the solution as explained in the below blog. If you don\u2019t have ASP net core web applications, then you can hire an ASP.Net core developer<\/strong><\/span><\/a> or an ASP.Net development company. Or else follow the below steps to create one:<\/p>\n
- \n
- Open Visual Studio 2019<\/li>\n
- Now, Open File>New>Project<\/li>\n
- Choose ASP.Net Core<\/strong> Web Application and Press Next<\/li>\n
- Enter your Project name and click to create one<\/li>\n
- Choose .Net Core and ASP.Net Core 3.1 framework.<\/strong><\/li>\n
- Choose web app template<\/strong> and click on create<\/li>\n<\/ul>\n
Now you can host a reporting rest service by adding NuGet Package. Add own dependencies to project using service packages like Microsoft.AspNet.Core<\/strong>.MVC.NewtonsoftJson.<\/p>\n
We can activate NewtonsoftJson services by using the below code:
\nservices.AddRazorPages().AddNewtonsoftJson();<\/p>\n<\/span>Now add, minimal Reporting Rest services like:<\/span><\/h3>\n
Image Courtesy: https:\/\/www.telerik.com\/<\/figcaption><\/figure>\n The storage section in the above service specifies internal state objects and temp files.
\nReportSourceResolver specifies for report definition inside the Reports application folder.<\/p>\nThere is no report folder yet, as we need to add a report, let\u2019s create a folder in the project root named under Reports and copy your report definition file into it.
\nConfigure the API controller inside ConfigureServices method
\nservices.AddControllers();<\/p>\n<\/span>Now, Map the controller endpoints by adding the code below:<\/span><\/h3>\n
<\/p>\nNow the next step is to create an actual Reportscontroller class
\nAt the root of the project add new controllers\u2019 folder
\nSelect Add>Controller<\/p>\nChoose an API controller with an empty template and click to Add it
\nName new controller ReportsController.cs and click on Add<\/p>\n<\/span>Know how to change the content of the new controller<\/span><\/h3>\n
<\/p>\nRequest a Report Document and Display Report Document in HTML5 Report Viewer
\nIn this section, we\u2019ll get to know how to request a report document and display it into the HTML5 report viewer.<\/p>\nAdd custom section like the head element of the Layout page<\/p>\n
<head><\/strong>
\n…<\/strong>
\n@RenderSection(“Head”, required: false)<\/strong>
\n<\/head><\/strong><\/p>\nSo now, inside pages\/Index.cshtml add div element to hold the viewer. The element inside it comes with unique id. Set it with CSS file, inline style dimension<\/p>\n
<div id=”reportViewer1″ style=”width:840px; height:1200px”><\/strong>
\n<\/div><\/strong><\/p>\nLater, add a link to section head to the desired Kendo UI<\/strong><\/span><\/a> theme in custom head and finally to the viewer widget\u2019s JavaScript file by calling the Telerik_ReportViewer method.<\/p>\n
<\/p>\nUnderstand below Scripts section which helps to insert viewer script after JQuery<\/p>\n
<\/p>\nCheck the final Index. cshtml file<\/strong><\/h4>\n
<\/p>\nNow press F5 in visual studio and check HTML5 Report Viewer. The service instructs Report Engine to render the report definition in HTML5 form and return it to the viewer as a report document.<\/p>\n
<\/span>Check final output<\/span><\/h2>\n
Image Courtesy: https:\/\/www.telerik.com\/<\/figcaption><\/figure>\n If you want to check the errors, then press F12 in the browser and log the network traffic. If you want to hire ASP.NET Core Developer or looking for ASP.NET Development Company<\/strong><\/span><\/a> connect with us to discuss your requirements.<\/p>\n